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"

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"]
}

eslint

• eslint, eslint-config-prettier, eslint-plugin-prettier(默认调用prettier的配置文件)

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

}

prettier

• prettier

module.exports = {
  printWidth: 100, // 打印宽度
  tabWidth: 2, // tab 宽度
  useTabs: false, // 使用tab
  semi: false, // 分号
  vueIndentScriptAndStyle: false, // vue indent <script/>  <style/>
  singleQuote: false, // 单引号
  quoteProps: "as-needed", // 对象key 引号
  bracketSpacing: true, // 导入对象和{}之间加空格
  trailingComma: "none", // 尾随逗号
  // jsxBracketSameLine: true, // 尖括号和结尾同一行 Deprecated
  bracketSameLine: true, // 尖括号和结尾同一行
  jsxSingleQuote: false, // jsx 中使用单引号
  arrowParens: "avoid", //  x=>x , (x)=>
  insertPragma: false, // insert <!-- @format -->
  requirePragma: false, // 只在@format或者@prettier 文件格式
  proseWrap: "never", //  prose散文是否根据printWidth 格式换行
  htmlWhitespaceSensitivity: "strict", // HTML空白灵敏度
  endOfLine: "auto" // 结尾
}

stylelint

• stylelint,stylelint-config-standard,stylelint-config-prettier(冲突以prettier由主),style-order(插件),

module.exports = {
	extends:['stylelint-config-standard','stylelint-config-prettier'],
	plugins:['stylelint-order']
}

commitlint

• commitlint,@commitlint/cli,@commitlint/config-conventional

commitlint.config.js

module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "body-leading-blank": [2, "always"],
    "footer-leading-blank": [1, "always"],
    "header-max-length": [2, "always", 108],
    "type-empty": [2, "never"],
    "scope-empty": [0],
    "subject-empty": [2, "never"],
    "subject-full-stop": [0],
    "type-case": [0],
    "scope-case": [0],
    "subject-case": [0],
    "type-enum": [
      2,
      "always",
      ["feat", "fix", "perf", "style", "docs", "test", "refactor", "build", "ci", "chore", "revert"]
    ]
  }
}

.editorconfig

# http://editorconfig.org
root = true

# 说明
## 设置文件编码为 UTF-8；
## 用两个空格代替制表符；
## 在保存时删除尾部的空白字符；
## 在文件结尾添加一个空白行；
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab