Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to introduce the code inspection tool stylelint. The content of the article is of high quality, so the editor shares it for you as a reference. I hope you will have some understanding of the relevant knowledge after reading this article.

Preface

When working in a team, when everyone's code has a custom formatting, there are often a lot of conflicts to be resolved when submitting merge, so we can use eslint+stylelint to constrain the team's code.

Text

Stylelint is a powerful, modern code review tool that can help you enforce style conventions in teamwork.

1. Install stylelintyarn add-D stylelint2. Configuration file

Using the stylelint detector requires a configuration object, which you can create in three ways.

The stylelint property in package.json.

.stylelintrc.js file

Js objects exported by stylelint.config.js files

Once any of them are found, the search will no longer be carried out, the parsed object will be used. This time, the .stylelintrc.js file is used for configuration.

3. Use stylelint

To install the official documentation, you can run the stylelint detection style code in the following ways.

-- fix is used to fix automatically, but not all problems.

/ / package.json "scripts": {"lint:css": "stylelint src/**/*.css-- fix"} step on pit point 1:

Because the style language used in my project is less. So it's definitely wrong to test css, so we need to make some changes here.

/ / package.json "scripts": {"lint:css": "stylelint src/**/*.less-- fix"}

So we can run this string of code.

Yarn lint:css postcss-less

As you can see, there are some reminders here, which are simply translated as let's use the corresponding grammar to parse our style. And the corresponding syntax parser needs to be installed.

Yarn add-D postcss-less

So modify the script again.

/ / package.json "scripts": {"lint:css": "stylelint src/**/*.less-fix-custom-syntax postcss-less"}

At this point of OK, we can normally run the lint command to format our style code. Next, let's configure lint rules.

4. Configuration Rul

We first need to install three npm packages to help us improve the rules

Yarn add-D stylelint-config-standard stylelint-order stylelint-config-css-modules

Stylelint-config-standard is the recommended configuration for stylelint, and stylelint-order is used to sort the properties of the code when formatting the css file.

Stylelint-config-css-modules is css-module 's solution to handle style files

My profile looks like this:

/ / .stylelintrc.jsmodule.module = {processors: [], plugins: ['stylelint-order'], extends: ["stylelint-config-standard", "stylelint-config-css-modules"] Rules: {"selector-class-pattern": [/ / naming convention-"^ ([an a-z0] [a-z0-9] *) (- [a-z0-9] +) * $", {"message": "Expected class selector to be kebab-case"}], "string-quotes": "single" / / single quotation marks "at-rule-empty-line-before": null, "at-rule-no-unknown": null, "at-rule-name-case": "lower", / / specify the case of @ rule name "length-zero-no-unit": true, / / prohibit zero-length units (can be automatically repaired) "shorthand-property-no-redundant-values": true / / abbreviated attribute "number-leading-zero": "never", / / decimal without 0 "declaration-block-no-duplicate-properties": true, / / prohibit declaration of fast repeating attribute "no-descending-specificity": true, / / prohibit lower priority selector overwritten by higher priority selector. "selector-max-id": 0, / / limit the number of ID selectors in a selector "max-nesting-depth": 3, "indentation": [2, {/ / specify indent warning reminder "severity": "warning"}], "order/properties-order": [/ / Rule order "position", "top" "right", "bottom", "left", "z-index", "display", "float", "width", "height", 'max-width',' max-height', 'min-width',' min-height' 'padding', 'padding-top',' padding-right', 'padding-bottom',' padding-left', 'margin',' margin-top', 'margin-right',' margin-bottom', 'margin-left',' margin-collapse' 'margin-top-collapse', 'margin-right-collapse',' margin-bottom-collapse', 'margin-left-collapse',' overflow', 'overflow-x',' overflow-y', 'clip',' clear', 'font',' font-family' 'font-size',' font-smoothing', 'osx-font-smoothing',' font-style', 'font-weight', "line-height",' letter-spacing', 'word-spacing', "color", "text-align",' text-decoration' 'text-indent', 'text-overflow',' text-rendering', 'text-size-adjust',' text-shadow', 'text-transform',' word-break', 'word-wrap',' white-space', 'vertical-align' 'list-style', 'list-style-type',' list-style-position', 'list-style-image',' pointer-events', 'cursor', "background", "background-color", "border", "border-radius",' content' 'outline', 'outline-offset',' opacity', 'filter',' visibility', 'size',' transform',],}}

The processors attribute is not used this time, so there is no introduction. Students who are interested can consult the official documents.

A plugins is a rule or set of rules created by the community that supports methodology, toolset, non-standard CSS features, or very specific use cases.

Extends inherits an existing configuration file. (in my configuration, I inherited the css-module and the officially recommended configuration)

Rules rules determine what the detector is looking for and what to solve, so with this option you can turn on the rules and detect them accordingly. All rules must be explicitly configured because there are no default values.

Note: null is a disabled rule. You can rewrite the configuration rules that override the official recommendations in rules.

5. Ignore lint files

At this point, we can normally use stylelint to format the style code. But in the project there is often some code that does not need to be formatted, for example, we will extract a separate overrides file to rewrite the style of antd. Obviously there is no need for formatting here, because the selector naming of antd may be different from our specification. So we need to ignore this file when running lint.

We can configure ignoreFiles in .stylelintrc.js.

Create a .stylelintignore file.

We can use the method of / * stylelint-disable * / to detect the ignore lint of the code quickly.

I use the second method, and the configuration is as follows:

/ /. Stylelintignore*.js*.tsx*.ts*.json*.png*.eot*.ttf*.woff*.csssrc/styles/antd-overrides.less6. Automatic formatting

After the above configuration, we have actually achieved the goal of the specification, but if we have to run lint every time, it will undoubtedly increase our coding burden. Here are two ways to automatically format the code when we write the style code.

6.1 stylelint vs-code plug-in 6.2 webpack plugin

Why can a webpack plug-in help us format the styling code? it's because it will help us detect the code when we hot update and recompile. And fix according to the rules configured in the .stylelintrc.js file. If there is a lint error, you can choose to prevent the project from running and avoid uploading styles without lint to the code base.

So I stepped on a lot of holes when using this plug-in, and then I said one by one.

6.3 plug-in stampede pit collection

In the beginning. According to the writing of all the great gods from Baidu, you only need to configure it like this:

New StyleLintPlugin ({context: "src", configFile: path.resolve (_ dirname,'. / stylelintrc.js'), files:'* * / * .less', failOnError: false, quiet: true, syntax: 'less'})

If the ending is not unexpected, it is useless. The most scary thing is that he will give you the illusion that there is no task problem when you run locally, making you think that there is nothing wrong with your code! In fact, it is this plug-in that does not work.

In addition, if you use stylelint's vscode extension in this configuration, there will be a lot of red waves that make your mind explode.

After my trampling, I finally completed a configuration with no error report, no illusion, no error check, and no neglect of my configuration!

New StylelintPlugin ({configFile: path.resolve (_ _ dirname,'. / .stylelintrc.js'), extensions: ['less'], files:' src/**/*.less', fix: true, customSyntax: 'postcss-less', lintDirtyModulesOnly: true, threads: true, exclude: [' node_modules', 'src/styles/antd-overrides.less'],}) 7. Commit detection

This is relatively simple. If the project has previously configured commit detection for eslint, you only need to add the detection style to the script. The configuration is as follows

"lint-staged": {"*. {ts,tsx}": ["eslint-- ext js,ts,tsx-- fix", "git add"], "* .less": ["stylelint-- fix-- custom-syntax postcss-less", "git add"]}

There is no need to run yarn lint:css here, because if you do so, all the styles under src will be tested during commit, but in fact, we only need to detect the modified files.

Special note: be sure to add-custom-syntax postcss-less.

On how to introduce the code review tool stylelint to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.