• husky+lint-staged+eslint+prettier+stylelint+commitlint

    概念:

    • husky,暴露出git的hook钩子,在这些钩子执行一些命令,
    • lint-staged,只在git的暂存区有修改的文件进行lint操作,执行一些校验脚本
    • eslint,prettier,styelint有npm包还有对应的scode插件,其中npm包是用于执行那些诸如入eslint --fix "src/**/*.{js,jsx,…}"的脚本命令,所需要的包,每次修改要都要执行一次该命令才会格式化代码,而对应的vscode插件则可以通过vscode的工作区或者用户去设置settings.json来配置保存代码时执行校验,还可以通过.editorconfig来统一编辑器的代码风格.
    • eslint 代码质量检查,会与prettier配置冲突,通过extends配置eslint-config-prettier,eslint-plugin-prettier来覆盖掉与prettier冲突的规则
    • prettier,代码美化
    • stylelint,格式化css,还有scss等,会与prettier冲突,通过stylelint-config-prettier配置解决prettier冲突
    • commitlint,配置提交信息规范

    相关的包:

    husky

    • yarn add husky -D
    npm set-script prepare "husky install"
npm run prepare
// -c指定了lint-staged的配置文件
npx husky add .husky/pre-commit "npx lint-staged -c ./.husky/lintstagedrc.js"
npx husky add .husky/commit-msg "npx commitlint --edit $1"

    • 1
    • 2
    • 3
    • 4
    • 5

    lint-staged

    “husky”: “^8.0.3”,
    “lint-staged”: “13.2.3”

    配置文件lintstagedrc.js

    module.exports = {
  "**/*.{js,jsx}": ["eslint --fix"],
  "*.{scss,less,styl,html}": ["stylelint --fix", "prettier --write"],
  "*.vue": ["prettier --write", "eslint --fix", "stylelint --fix"]
}

    • 1
    • 2
    • 3
    • 4
    • 5

    eslint

    • eslint, eslint-config-prettier, eslint-plugin-prettier(默认调用prettier的配置文件)
    module.exports = {
	extends:[...,'eslint-config-prettier','plugin:prettier/recommended'],//这里直接使用了插件eslint-plugin-prettier的配置,plugin:开头,那么就可以不用在plugins字段声明prettier插件了

}

    • 1
    • 2
    • 3
    • 4

    prettier

    • prettier
    module.exports = {
  printWidth: 100, // 打印宽度
  tabWidth: 2, // tab 宽度
  useTabs: false, // 使用tab
  semi: false, // 分号
  vueIndentScriptAndStyle: false, // vue indent