Vue3學習（五）集成styleLint&git

步驟

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-less --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腳本）