Use stylelint to check CSS_StyleLint and stylelint

Use stylelint to check CSS_StyleLint and stylelint

When you write a lot of CSS code, there may be more than one error. You may need a tool to prevent CSS writing errors.

Maybe, sometimes your error is really a bug. It may also be due to the inconsistent or ambiguous code style caused by rashness. Many of them may seem insignificant (depending on your temper), but with the increase in the code library and time accumulation, many people will make ugly things when using it. The consequences are not what you can imagine.

You try to control yourself. Your colleagues also help you to promptly correct your mistakes. However, you and your colleagues are both the makers of errors, so at least to a certain extent, they will inevitably fail. Later, you or others will solve the problem caused by CSS errors on your page.

Whether you or your colleagues do not like to discuss your mistakes, because they are embarrassing. It can even be frustrating or break down. Some standards are sometimes helpful for the maintenance of the code library. For example, if the writing style is consistent, it may seem a bit peatchy when executed manually. Otherwise, they will show your favorite strong and stubborn elements.

In addition, you may prefer to correct errors in a timely manner, rather than modifying and declaring that such errors will not occur after the code is reviewed and reported by others. When a CSS error occurs, a timely feedback will help you save a lot of time.

What you need is a machine that prevents errors.

You need a machine that prevents errors. You can understand CSS and understand your intentions, preferences, ideas, and weaknesses.

This type of machine will have limitations. All things are not perfect. However, these limitations are different from those of you and your colleagues. As long as it can block errors, it will continue to block, tirelessly. At the same time, you and your colleagues can always improve the machine, expand its functions, and weaken its limitations. It is open-source, and people all over the world can join in to do their part-other authors who want to prevent their CSS writing errors.

Like others, CSS authors also need linters

The programs that prevent errors are called "linters ". There are several good linter in Javascript. ESLint, in particular, plays a miraculous role and shows us that a good linter is so useful. But in CSS, we are not so lucky. Our selection is very limited: Ruby-based scss-lint with special preprocessing programs and earlier CSS Lint.

However, this is before the emergence of PostCSS. In addition, PostCSS provides some methods to build CSS tools with better interaction. It can parse any CSS-like syntax into an extension of the abstract syntax tree (AST) for analysis and operations. In addition, using a custom parser, PostCSS can even handle nonstandard invalid modes (such//Note)

Mature conditions can already generate a more powerful linter-Based on PostCSS and inspired by the best features of scss-lint and ESLint.

I am working on this project with a few friends. Now I will begin to introduce the tool we developed: stylelint.

What you can do with stylelint

The following is a summary of the stylelint functions, with more than rules and scalability.

At this point, if you find yourself getting a little impatient ("OK, OK: I believe stylelint will have a miraculous working effect. There is no need for too many summaries. "). Just jump to the next part. Here I will only explain some problems and provide some tips.

Error capture

Some stylelint rules are designed to identify obvious mistakes, such as spelling mistakes or omissions made when you are upset or sleepy. For example, you can disable blank blocks, invalid hexadecimal values, repeated selectors, unnamed animation names, and incorrect linear gradient syntax.

Other rules are used to capture more subtle errors. Here is a rule: when you use it, you can overwrite its attributes (suchmargin-topFor examplemargin), It will give a warning, because it may be caused by your negligence. In addition, there is also A rule that will warn you: in case of chaos, for example, Rule A appears before rule B, but actually covers rule B, because the selector of Rule A has A higher priority (for example, Rule A is.foo.bar{···}, Rule B is.foo{···}). This is a very tricky situation.

Another rule uses the PostCSS doiuse plug-in to check whether your browser supports this style. In addition, the css-colorguard plug-in is used to indicate the similarity of colors to avoid confusion. (Note: This is one of the main advantages of stylelint Based on PostCSS: compared with other PostCSS plug-ins, stylelint can be prompted with little effort .)

Best practices for Force Execution

If you use the System Method in the style sheet or set a style guide for your code, you should disable these modes. Stylelint provides these functions.

First, you need to control your selector. With stylelint, you can disable selectors that exceed a certain degree of specificity or set limits on nested depth. You can disable category selectors (for example, selectors without IDs) and use regular expressions to name other selectors.

You can disable!importantOr brower hacks that your browser does not support. If you use Autoprefixer (or you should use it), you can disable vendor prefix in the source style sheet.

If you want to be more rigorous-you can spend some time on configuration to ensure absolute consistency-you can enforce the order of style sheet attributes and provide attributes for the blacklist and whitelist, value, and the unit of the function.

Convention for executing code styles

Stylelint has an automatic code execution convention, so you and your teammates do not need to set it manually. We are committed to making these rules more comprehensive and flexible.

These rules are mainly for spaces, but also for other details, such as quotation marks, uppercase and lowercase letters, writing zeros before decimal places, using keywords and spelling values.

Dream that you and your teammates can establish a Format Convention (for example, we always leave a space after the colon) and modify it in your stylelint configuration, you will not discuss it again later. Let it run on the machine kingdom.

Develop and expand everything

The creator of Nicholas Zakas, ESLint (and CSS Lint), writing to ESLint, is successful in its scalability. Stylelint tries to follow the leading advantages of ESLint and provides CSS authors with a linter, which is also scalable.

You can write and publish your own rule plug-ins. Now we have a lot of usable plug-ins, and we are eager to see other people's excellent plug-ins.

Configurations can be shared because they are scalable. As for plug-ins, we learned the value of this function from ESLint. Check which includes WordPress and SUITCSS configurations, which have been published.

If you do not like stylelint built-in prompts, You can manually create your own style or even create your organization. You can also customize rules used to provide warning information.

Using stylelint APIs, you can create plug-ins for the text compiler and perform tests to integrate stylelint into every aspect of your workflow.

If you have any idea about stylelint extension, please let us know!

Expected answer

There may be several questions in your mind. Here are several of the most common problems:

Can stylelint be used in SCSS or Less?

The answer is yes. You can use stylelint in SCSS and get support in Less! Since PostCSS allows a custom parser, stylelint can easily support a variety of non-standard syntaxes-you can customize a PostCSS Parser for parsing.

Because of the PostCSS parser-stylelint supports SCSS, Less, and new SugarSS. If you want to support another custom syntax, you can use PostLess!

Of course, there are still some rules in front of your non-standard syntax (for example, the Sass id selector's#{$interpolation}). Because stylelint tries to mask the style of our style sheet-some use standard CSS, some use extended languages such as SCSS, some people use some weird custom attributes and so on-These will inevitably generate some vulnerabilities that need to be filled. However, we have been processing the errors we have found; any rules during this period can be completely disabled or successively disabled for style sheets or successive rows.

Can stylelint use the future CSS syntax?

Yes! Similar to the answer described above: stylelint can understand anything PostCSS understands, including enabling any CSS syntax in the future (possibly through the PostCSS plug-in ). In fact, some stylelint rules specifically deal with future CSS syntax and some custom attributes.

Stylelint configuration is huge. Where should I start?

Three configuration methods are recommended:

Expand a published configuration. We maintain the stylelint-configuration standard to provide users with an inherent benchmark. And many configurations have been published. Add a rule at a time from the beginning. By default, no rule is enabled. Therefore, by manually adding a rule, you will know which rule will be executed forcibly and understand each rule you add. Start the copy and paste configuration to determine which options are used and delete them selectively.

Fortunately, you don't need to write huge stylelint configurations over and over again. You can select a style you like and use it anywhere.

What is the simplest way to run stylelint?

For most people, the simplest way is through its command line.

If you prefer the gulp plug-in, you can use gulp-stylelint. There are many options for webpack. We hope these plug-ins will inspire you to create other stylelint plug-ins, for example, for Grunt. (You can find it in an open-source project !)

You can also use the PostCSS plug-in to run stylelint, including anything contained in the plug-in. This means that you can use stylelint anywhere you can use PostCSS (almost every compilation tool!

In addition, there is also a stylelint Text compilation plug-in for Atom, Sublime Text, and VS Code to provide the fastest feedback. For more information, see the complementary tools list on the stylelint website.

As shown in the following figure, the expected result is displayed in the command line:

The following figure is displayed in Atom;

Can stylelint fix my errors?

No, but another name is stylefmt. It requires a stylelint configuration-similar to what you use in linting-and can fix any errors. We hope that with the contributions of our Community staff, stylelint will automatically fix errors that violate stylelint rules. Please help them achieve this goal!

You can also use other tools, such as CSScomb or perfectionlist used in combination with stylelint, to automatically fix and force the rest.

Use linting to supplement Constraints

There is a huge amount of constraints in good CSS. This is why we spend a lot of time discussing methods such as SMACSS, ACSS, BEM, SUITCSS, and ITCSS. We all know that writing bad CSS is very easy. Therefore, if we are no longer afraid of writing CSS styles, we need to establish an intelligent strategy at work and stick to it bravely.

Stylelint is designed to be automatically executed-provides a set of core rules and a pluggable framework so that CSS authors can use it to execute their own strategies.

Try it to let us know how to provide services for you. If you have better improvement ideas, such as contributing rules, enhancing features, testing, fixing bugs, files, new ideas, or just giving feedback, please give them to us! In this way, developers of all levels will have work to do.