步驟

1、安裝styleLint

npm i stylelint --save-dev

2、新建.stylelintrc.json檔案

內容如下：

{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": 4,
    "font-family-no-missing-generic-family-keyword": null,
    "number-leading-zero": "never",
    "color-named": "never",
    "color-hex-length
 
": "short",
    "declaration-colon-space-after": "always",
    "no-invalid-position-at-import-rule":null
  },
  "customSyntax": "postcss-html"
}

3、安裝依賴包

1、根據extends選項安裝擴充套件

npm i stylelint-config-standard --save-dev

2、根據報錯資訊：Unknown word (CssSyntaxError)安裝postcss-html（幫助識別.vue檔案的 css 程式碼）

npm i postcss-html --save-dev

3、根據報錯資訊：安裝postcss-less（幫助解析less程式碼）

npm i postcss-html --save-dev

4、新建stylelint.sh檔案

內容如下：

filesCheckedByStylelint=`git diff-index --cached HEAD --name-only --diff-filter ACMR | grep -v mockData | grep -v dep | egrep '(.vue|.less)$'`


if [ "$filesCheckedByStylelint" ];then
    ./node_modules/stylelint/bin/stylelint.js --fix $filesCheckedByStylelint
 
else
    echo 'there is no less files to stylelint check!'
fi

5、配置package.json檔案

安裝pre-commit

npm i pre-commit --save-dev

配置內容如下：

  "scripts": {
    "stylelint": "sh stylelint.sh"
  },
  "pre-commit": [
    "stylelint"
  ]

注意

vscode + vite + vue3 + ts + eslint + stylelint 程式碼自動格式化（為什麼安裝postcss-html）

stylelint 接入實戰踩坑總結（為什麼安裝postcss-less）

rules中相關規則：規則

配置詳細資訊

Git hooks + Eslint + Stylelint + Prettier 規範程式碼（使用git hook做提交校驗，而不是我們上面用的shell指令碼）