Introducing the code checking tool stylelint to share practical experience

Preface

When working in a team, when everyone's code has a custom formatting method, many conflicts often need to be resolved when submitting a merge. At this time, we can use eslint + stylelint to constrain the team's code.

text

Stylelint is a powerful, modern code checking tool that helps you enforce style conventions when working in a team.

1. Install stylelint

yarn add -D stylelint

2. Configuration File

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

stylelint property in package.json .

.stylelintrc.js File

The js object output by the stylelint.config.js file

Once any of them is found, no further lookup will be done, parsing will be done, and the parsed object will be used. This time, the .stylelintrc.js file is used for configuration.

3. Use stylelint

According to the official documentation, you can run stylelint to detect style codes as follows.

--fix is ​​used to automatically repair, but it cannot fix all problems.

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

Pitfall 1:

Because the style language used in my project is less. So the detection of CSS is definitely wrong, so we need to make some changes here

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

So we can run this code

yarn lint:css postcss-less

As you can see, there are some reminders here, which can be simply translated as letting us use the corresponding syntax to parse our styles. And the corresponding syntax parser needs us to install.

yarn add -D postcss-less

So I modified the script again.

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

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

4. Configure rules

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, stylelint-order is used to sort the properties of the code when formatting CSS files.

stylelint-config-css-modules is a css-module solution to process style files

My configuration file looks like this:

// .stylelintrc.js
module.exports = {
    processors: [],
    plugins: ['stylelint-order'],
    extends: [
        "stylelint-config-standard",
        "stylelint-config-css-modules"
    ],
    rules:
        "selector-class-pattern": [ // Naming convention -
            "^([az][a-z0-9]*)(-[a-z0-9]+)*$",
            {
                "message": "Expected class selector to be kebab-case"
            }
        ],
        "string-quotes":"single", // single quotes "at-rule-empty-line-before": null,
        "at-rule-no-unknown":null,
        "at-rule-name-case": "lower", // Specify the upper and lower case of @ rule names "length-zero-no-unit": true, // Prohibit zero-length units (can be automatically fixed)
        "shorthand-property-no-redundant-values": true, // shorthand property "number-leading-zero": "never", // decimals without 0
        "declaration-block-no-duplicate-properties": true, // Prohibit declaration-block duplicate properties "no-descending-specificity": true, // Prohibit the appearance of a lower-priority selector covered by a higher-priority selector.
        "selector-max-id": 0, // Limit the number of ID selectors in a selector "max-nesting-depth": 3,
        "indentation": [2, { // Specify indentation 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',
        ],
    }
};

processors attribute is not used this time, so it is not introduced. Students who are interested can consult the official documentation.

plugins are rules or rule sets created by the community to support methodologies, tool sets, non-standard CSS features, or very specific use cases.

extends inherits an existing configuration file. (In my configuration, css-module and the official recommended configuration are inherited)

rules determine what the detector should find and what to solve, so through this option you can turn on the corresponding rules and perform corresponding detection. All rules must be configured explicitly, as there are no defaults .

Note: null disables the rule. You can rewrite the officially recommended configuration rules in rules.

5. Ignore lint files

At this point we can use stylelint to format the style code normally. However, there are often some codes in the project that do not need to be formatted. For example, we will extract an overrides file separately to rewrite the style of antd. Obviously, no formatting is required here, because antd's selector naming may be different from our specifications. 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 /* stylelint-disable */ method to ignore lint detection for code blocks.

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

// .stylelintignore
*.js
*.tsx
*.ts
*.json
*.png
*.eot
*.ttf
*.woff
*.css
src/styles/antd-overrides.less

6. Automatic formatting

After completing the above configuration, we have actually achieved the purpose of standardization, 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 style code.

stylelint vs-code plugin

webpack plugin

Why can a webpack plug-in help us format style code? This is because when we recompile during hot update, this plug-in will help us detect the code. And fix it according to the rules configured in the .stylelintrc.js file. If there are lint errors, you can choose to make the project unable to run, avoiding uploading styles without lint to the code base.

So I stepped on a lot of pitfalls when using this plug-in, and I will talk about them one by one.

Plugin Pitfalls Collection

At the very beginning. According to the writing methods of various great gods found on 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'
})

The ending was as expected, it didn't work. The most terrifying thing is that it will give you a false impression that there is no task problem when you run it locally, making you mistakenly believe that there is no problem with your code! Actually, this plugin didn’t work.

In addition, if you use the vscode extension of stylelint with this configuration, there will be a lot of red waves that will make you explode~~~~.

After my experience, I finally completed a configuration with no errors, no illusions, no error checking, and no ignoring of my ignored 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 during 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"
    ]
  }

In fact, there is no need to run yarn lint:css here, because if you do this, all styles under src will be fully detected when committing. However, we only need to detect the modified files.

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

The above is the detailed content of the experience summary and sharing of the problems encountered in the introduction of stylelint. For more information about the sharing of practical problems in the introduction of stylelint, please pay attention to other related articles on 123WORDPRESS.COM!