使用stylelint進行Vue項目樣式檢查

　　stylelint是一個強大的現代 CSS 檢測器，可以讓開發者在樣式表中遵循一致的約定和避免錯誤。擁有超過170條的規則，包括捕捉錯誤、最佳實踐、控制可以使用的語言特性和強制代碼風格規范。它支持最新的CSS語法，並且靈活可配置。

1. 安裝

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

　　其中，stylelint是運行工具，stylelint-config-standard或者stylelint-config-recommended是stylelint的推薦配置，stylelint-order是CSS屬性排序插件，並且每個規則都支持自動修復（stylelint --fix）。

　　stylelint本身就很好地支持SCSS語法（以及其他預處理器的語法），但是stylelint通常專注於標准CSS。而stylelint-scss引入了特定於SCSS語法的規則。

　　stylelint-config-rational-order是Stylelint配置，通過按照以下順序將相關屬性聲明進行分組來對它們進行排序：
　　　　1. Positioning      2. Box Model      3. Typography      4. Visual      5. Animation      6. Misc

　　stylelint-webpack-plugin是webpack插件，使用stylelint檢查CSS/SCSS代碼。

 2. 配置

　　在根目錄添加.stylelintrc.json配置校驗規則，也可以進行自定義規則

{
  "extends": ["stylelint-config-standard", "stylelint-config-rational-order"],
  "plugins": ["stylelint-scss", "stylelint-order"],
  "rules": {
    "order/order": [
      "custom-properties",
      "dollar-variables",
      "declarations",
      "rules",
      "at-rules"
    ]
  }
}

　　也可以添加.stylelintignore忽略指定目錄或文件

/dist/
/test/

*.min.css

*.js
*.ts
*.png
*.jpg
*.webp
*.ttf
*.woff

　　在package.json中添加script執行校驗：
　　　　"lint:style": "stylelint src/**/*.{css,scss} --syntax scss --fix"

 　　使用webpack插件校驗.vue文件中的style，在vue.config.js中添加：

configureWebpack: config => {
  const StyleLintPlugin = require('stylelint-webpack-plugin')
  config.plugins.push(
    new StyleLintPlugin({
      files: ['src/**/*.{vue,html,css,scss,sass,less}'],
      failOnError: false,
      cache: true,
      fix: true,
    })
  )
}