Vue project carried out using stylelint style check

　　stylelint is a powerful modern CSS detector, allowing developers to follow the same conventions and avoid errors in the stylesheet. It has more than 170 rules, including catching errors, best practices, language features that can be used to control and enforce the code style guide. It supports the latest CSS syntax, flexible and configurable.

1. Install

　　yarn add stylelint stylelint-config-standard stylelint-config-rational-order stylelint-order stylelint-scss stylelint-webpack-plugin --save-dev

　　Which, stylelint is running tools, stylelint-config-Standard or stylelint-config-recommended is stylelint recommended configuration, stylelint-the Order is sort plugin CSS property, and each rule with auto repair (stylelint --fix).

　　stylelint itself well supported SCSS syntax (grammar and other pre-processors), but stylelint usually focus on standard CSS. The stylelint-scss introduced specific rules SCSS syntax.

　　stylelint-config-rational-order is Stylelint configured to sort them by grouping related properties declared in the following order:
　　　　1. Box 2. Positioning the Typography the Model 3. 4. 6. The Animation the Misc the Visual 5. The

　　stylelint-webpack-plugin is a plugin WebPACK, using stylelint check CSS / SCSS code.

 2. Configure

　　Add .stylelintrc.json root configuration validation rules, the rules may be customized

 1 {
 2   "extends": ["stylelint-config-standard", "stylelint-config-rational-order"],
 3   "plugins": ["stylelint-scss", "stylelint-order"],
 4   "rules": {
 5     "order/order": [
 6       "custom-properties",
 7       "dollar-variables",
 8       "declarations",
 9       "rules",
10       "at-rules"
11     ]
12   }
13 }

　　You can also add .stylelintignore ignore specified file or directory

 1 /dist/
 2 /test/
 3 
 4 *.min.css
 5 
 6 *.js
 7 *.ts
 8 *.png
 9 *.jpg
10 *.webp
11 *.ttf
12 *.woff

.stylelintignore

　　Add script check is performed in the package.json:
　　　　"lint: style":. "Stylelint the src / ** / CSS * {,} --syntax SCSS SCSS --fix"

 　　Use webpack plug-in check .vue file style, add in vue.config.js in:

 1 configureWebpack: config => {
 2   const StyleLintPlugin = require('stylelint-webpack-plugin')
 3   config.plugins.push(
 4     new StyleLintPlugin({
 5       files: ['src/**/*.{vue,html,css,scss,sass,less}'],
 6       failOnError: false,
 7       cache: true,
 8       fix: true,
 9     })
10   )
11 }