CSS校验规范——Stylelint

一、什么是stylelint

帮助你在css中避免错误的工具

二、如何使用

1. 添加以下npm包

   ① stylelint

   ② stylelint-config-standard：一些常见的css书写规范

   ③ stylelint-config-prettier：关闭所有不必要的或者有可能与Prettier冲突的规则

   ④ stylelint-order：提供给css属性排序的功能

   ⑤ stylelint-config-rational-order：一套常见的css书写顺序

   ⑥ prettier: 格式化

    npm i stylelint stylelint-config-standard stylelint-config-prettier stylelint-order stylelint-config-rational-order prettier -S
   

2. 编辑器下载相关插件：stylelint，prettier

3. 在项目根目录创建名为stylelint.config.js的配置文件，内容为：

   module.exports = {
   
           root: ``true``,`
   
           plugins: ['stylelint-order'],
   
           extends: ['stylelint-config-standard', 'stylelint-config-rational-order', 'stylelint-config-prettier'],`
   
           rules: { // 覆盖stylelint-config-standard的配置
   
               'order/properties-order': []    // 设置css属性书写顺序，和stylelint-config-rational-order会冲突
   
           }
   
   }
   

4. 添加npm script使用stylelint

   package.json添加

   执行npm run lint-css

    "scripts": {
        "lint-css": "stylelint src/**/*.{css,less,scss,vue} --fix"
        } 
   

5. 编辑器保存时，执行stylelint，以vscode为例：

    "editor.codeActionsOnSave": {"source.fixAll.stylelint": true},
   

6. git hooks pre-commit阶段校验style

   "lint-staged": {
       "src/**/*.{css,less,scss,vue}": ["stylelint --fix"]
   },