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"
       ]
    }