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脚本）