项目(vue3)中添加husky、eslint、prettier , 自动格式化代码， 保姆级教学。
日常开发中，项目基本上都是由多个人进行开发和维护，每个人的代码书写习惯和风格又不尽相同，commit log也是乱七八糟，为以后的开发和维护增添了很多困难。所以，规范和约束在多人协作下，就显得尤为重要。
首先安装代码检查工具
- Eslint
npm i eslint -D
Eslint 安装成功后，在项目根目录下执行
npx eslint --init
然后按照终端操作的提示完成一系列设置来创建配置文件。你可以按照下图所示的选择来始化 ESLint
eslint安装.png
这样的设置比较松散，可以在eslintrc.json 中设置规则
比如行尾不写分号
"rules": {
"semi": ["warn","never"]
}
然后我们执行
npx eslint src
就可以看到当前项目中哪些不符合规范
上面每次都需要执行npx eslint xxx才能校验，很麻烦。有没有办法在代码保存的时候自动执行Eslint，只需要安装Eslint插件即可：
VSCode中插件市场安装Eslint
image.png
然后设置中添加
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
更多规则请看这里
在vue3中可能会出现的错误：
- 错误1
Parsing error: '>' expected.eslint
需要在.eslintrc.json中指定解析器
"parser": "vue-eslint-parser"
- 错误2
在vue3.2中不需要申明 emit和props
error ‘defineProps’ is not defined no-undef
解决:
"env": {
"vue/setup-compiler-macros": true
},
- 错误3
如果有jest，同样需要做相应的配置。
"env": {
"jest": true
},
这样，Eslint这块算是完成了，接下来我们添加prettier
npm i prettier eslint-config-prettier eslint-plugin-prettier -D
在根目录创建.prettierrc
{
"semi": false,
"tabWidth": 2,
"trailingComma": "none",
"singleQuote": true,
"arrowParens": "avoid"
}
同样vscode中安装prettier
image.png
设置中搜索Formar On Save 并勾选
image.png
设置中添加
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
在.eslintrc 中,extend中添加 "prettier" 解决 eslint 和 prettier 的冲突
更多规则请看这里
设置完需要重启，否则不会生效
代码提交规范 husky
- 这里用的husky是7.0.4版本的,老版本可自行百度
简单的举一些常见的githooks例子
| Git Hook | 执行时机 | 说明 |
|---|---|---|
| pre-commit | git commit执行前 | 可以用git commit --no-verify绕过 |
| commit-msg | git commit执行前 | 可以用git commit --no-verify绕过 |
详细的hooks介绍可以点击这里
首先安装
npm install -D husky
初始化husky
npx husky install .husky
添加一个commit msg钩子
npx husky add .husky/commit-msg "node scripts/verifyCommit.js"
创建verifyCommit.js
添加代码
这段代码逻辑是，找到文件并读取了commit的提交信息，然后使用正则去校验提交信息的格式，如果commit的信息不符合要求，会直接报错并且终止代码的提交。
const msg = require('fs')
.readFileSync('.git/COMMIT_EDITMSG', 'utf-8')
.trim()
const commitRE = /^(revert: )?(feat|fix|docs|dx|style|refactor|perf|test|workflow|build|ci|chore|types|wip|release)(\(.+\))?: .{1,50}/
const mergeRe = /^(Merge pull request|Merge branch)/
if (!commitRE.test(msg)) {
if(!mergeRe.test(msg)){
console.log('git commit信息校验不通过')
console.error(`git commit的信息格式不对, 需要使用 title(scope): desc的格式
比如 fix: xxbug
feat(test): add new
具体校验逻辑看 scripts/verifyCommit.js
`)
process.exit(1)
}
}else{
console.log('git commit信息校验通过')
}
在commit-msg执行的时候我们还可以用代码执行之前的钩子，pre-commit，去执行ESLint代码格式,
这样我们在执行git commit的时候，首先会进行ESLint校验，然后在执行commit的log信息格式检查，全部通过后代码才能提交至Git。
npx husky add .husky/pre-commit "npm run lint"
package.json 中创建
"lint": "eslint --fix --ext .js,vue src/"
commit msg参考
feat: 新功能
fix: 修改 bug
docs: 文档
perf: 性能相关
refactor: 代码重构（就是不影响使用，内部结构的调整）
test: 测试用例
style: 样式修改
workflow: 工作流
build: 项目打包构建相关的配置修改
ci: 持续集成相关
revert: 恢复上一次提交（回滚）
wip: work in progress 工作中 还没完成
chore: 其他修改（不在上述类型中的修改）
release: 发版
deps: 依赖相关的修改
总结
我们通过在项目中添加eslint与prettier和相对应的规则来约束代码，使用husky在代码提交的时候检测代码和约束提交log。
网友评论