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
配置文件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
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
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