StyleLint 在vue-cli中的使用

一、什么是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"
       ]
    }