Using stylelint to standardize Vue project

Time:2021-3-16

preface

Stylelint is a powerful and modern CSS review tool, which helps developers to implement a unified code specification and avoid style errors. It supports preprocessors such as less and sass. At present, stylelint has more than 100 verification rules, and they are gradually increasing.

1、 What is the function of stylelint

Stylelint hasMore than 100 verification rulesThese rules can be divided into three categories

  • Rules for proofreading styles

    For spaces (such as spaces near colons), newlines, indentations, and so on.

  • Rules for code maintainability

    Determine whether an ID is used in the CSS selector, or whether the important keyword is applied in a declaration.

  • Rules for judging code errors

    Detect whether the wrong hex color notation or a short attribute will override other declaration statements.

2、 Installation dependency

  1. Install stylelint
npm i -D stylelint stylelint-config-stand
  1. Install the plug-in that adapts the preprocessing syntax. Take sass as an example
npm i -D stylelint-scss
  1. Install the webpack plug-in
npm i -D stylelint-webpack-plugin

3、 Run through NPM command

// package.json
{
    "scripts": {
        "lint:css": "stylelint **/*.{html,vue,css,sass,scss,less}"
    }
}

You can run it manually on the command line:

npm run lint:css

4、 Run through webpack plug-in

// vue.config.js
const StyleLintPlugin = require('stylelint-webpack-plugin');

module.exports = {
    ...
    configureWebpack: {
        plugins: [new StyleLintPlugin({
           files: ['**/*.{vue,htm,html,css,sss,less,scss,sass}'],
            Fix: false, // repair automatically
            Cache: true, // cache
            emitErrors: true, 
            failOnError: false,
        })],
    },

};

5、 Write configuration

Search in the following order. If any item has a value, the search ends

  1. In package.json The stylelint property in specifies the rule
  2. Specified in the. Stylelintrc file, the file format can be JSON or yaml. You can also add an extension to the file stylelintrc.json 、 . stylelintrc.yaml 、 . stylelintrc.yml 、 . stylelintrc.js .
  3. stylelint.config.js File, which exports a configuration object

rules

By default, no rules are open and there is no default value. You must explicitly configure each rule to open it

defaultSeverity

Only “warning” and “error” are supported to define the global default error level

extends

You can extend existing configurations (either your own or a third party configuration)

plugins

Plug ins are community built rules or rule sets that support methods, toolsets, nonstandard CSS functions, or very specific use cases.

processors

Processors are community built functions that hook into the stylelint pipeline, modify the code when they enter stylelint, and modify the results when they exit.
We do not encourage the use of built-in syntax because the processor is not compatible with Autofix features.

ignoreFiles

Ignore specific files, node_ Modules is the directory that is ignored by default. However, if ignorefiles is set, it will be overridden.
Note: This is not an effective way to ignore a large number of files. If you want to effectively ignore many files, use. Stylelintignore or adjust the file range.

// stylelint.config.js 

module.exports = {
    defaultSeverity: 'error',
    Extensions: [stylelint config standard '] // official recommendation
    rules: {
    },
};

6、 Ignore file

Add the. Stylelintignore file to the project and directory, and the configuration rules are the same as those of. Gitignore and. Eslintignore.

# .stylelintignore
#Old style library without packaging
*.min.css

#Other types of documents
*.js
*.jpg
*.png
*.eot
*.ttf
*.woff
*.json

#Test and package catalog
/test/
/dist/

7、 Using git hooks to configure stylelint and eslint at the same time

// package.json
{
    ...
    "lint-staged": {
        "*.{html,vue,css,sass,scss,less}": [
          "npm run lint:css"
        ]
    },
    "gitHooks": {
        "pre-commit": "lint-staged"
    },
}

Recommended Today

Analysis of super comprehensive MySQL statement locking (Part 1)

A series of articles: Analysis of super comprehensive MySQL statement locking (Part 1) Analysis of super comprehensive MySQL statement locking (Part 2) Analysis of super comprehensive MySQL statement locking (Part 2) Preparation in advance Build a system to store heroes of the Three KingdomsheroTable: CREATE TABLE hero ( number INT, name VARCHAR(100), country varchar(100), PRIMARY […]