ESlint+Prettier+VSCode代码格式规范、git提交规范
一、ESlint规范、Prettier格式化工具规范
1. .eslintrc.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
|
module.exports = { root: true, env: { node: true }, extends: ["plugin:vue/vue3-essential", "@vue/standard"], parserOptions: { parser: "babel-eslint" },
rules: { "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", 'space-before-function-paren': 'off', 'no-unused-expressions': 'off' } }; space-before-function-paren:off 关闭《方法名后增加空格》的规则
|
2、VSCode安装Prettier插件
(1)新建.prettierrc
1 2 3 4 5 6 7 8
| { "semi": false, "singleQuote": true, "trailingComma": "none" }
|
(2)打开VSCode设置,搜索save,勾选Format On Save
VSCode默认一个tab是4个空格,可以修改成2个。
这样我们保存的代码,prettier会帮我们自动格式化成符合ESlint校验规则的代码。
3、git提交规范
(1)、全局安装Commitizen
1
| npm install -g commitizen@4.2.4
|
(2)、安装并配置cz-customizable
1
| npm i cz-customizable@6.3.0 --save-dev
|
在package.json中配置
1 2 3 4 5
| "config": { "commitizen": { "path": "node_modules/cz-customizable" } }
|
(3)、根目录下创建.cz-config.js自定义提示文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
| module.exports = { types: [ { value: 'feat', name: 'feat: 新功能' }, { value: 'fix', name: 'fix: 修复' }, { value: 'docs', name: 'docs: 文档变更' }, { value: 'style', name: 'style: 代码格式(不影响代码运行的变动)' }, { value: 'refactor', name: 'refactor: 重构(既不是增加feature,也不是修复bug)' }, { value: 'perf', name: 'perf: 性能优化' }, { value: 'test', name: 'test: 增加测试' }, { value: 'chore', name: 'chore: 构建过程或辅助工具的变动' }, { value: 'revert', name: 'revert: 回退' }, { value: 'build', name: 'build: 打包' } ], messages: { type: '请选择提交类型:', customScope: '请输入修改范围(可选):', subject: '请简要描述提交(必填):', body: '请输入详细描述(可选):', footer: '请输入要关闭的issue(可选):', confirmCommit: '确认使用以上信息提交?(y/n/e/h)' }, skipQuestions: ['body', 'footer'], subjectLimit: 72 }
|
(4)、使用git cz代替git commit
并不是所有人都记得使用git cz 还需要加上Git Hooks
4、Git Hooks
Git Hooks常用的2个钩子:
1、commit-msg:可以用来规范化标准格式,并且可以按需指定是否要拒绝本次提交
2、pre-commit:会在提交前被调用,并且可以按需指定是否要拒绝本次提交
(1)commitlint和husky 2个工具的安装与配置
1
| npm install --save-dev @commitlint/config-conventional@12.1.4 @commitlint/cli@12.1.4
|
创建commitlint.config.js
1
| echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
|
配置commitlint.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| module.exports = { extends: ['@commitlint/config-conventional'], rules: { 'type-enum': [ 2, 'always', [ 'feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'chore', 'revert', 'build' ] ], 'subject-case': [0] } }
|
注意:确保此文件为UTF-8编码格式
安装husky:
1
| npm install husky@7.0.1 --save-dev
|
启动hooks,生成.husky文件夹
在package.json中生成prepare指令(npm版本 > 7.0)
1
| npm set-script prepare "husky install"
|
执行prepare指令
添加 commitlint 的 hook 到 husky中,并指令在 commit-msg 的 hooks 下执行 npx –no-install commitlint –edit “$1” 指令
1
| npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
|
pre-commit规避格式错误的提交
通过 husky 监测 pre-commit 钩子,在该钩子下执行 npx eslint –ext .js,.vue src 指令来去进行相关检测:
执行 npx husky add .husky/pre-commit “npx eslint –ext .js,.vue src” 添加 commit 时的 hook (npx eslint –ext .js,.vue src 会在执行到该 hook 时运行)
该操作会生成对应文件 pre-commit:
lint-staged 自动修复格式错误
1 2 3 4 5 6
| "lint-staged": { "src/**/*.{js,vue}": [ "eslint --fix", "git add" ] }
|
修改 .husky/pre-commit 文件
1 2 3 4
| #!/bin/sh . "$(dirname "$0")/_/husky.sh"
npx lint-staged
|
5、package.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| "scripts": { "prepare": "husky install" }, "config": { "commitizen": { "path": "node_modules/cz-customizable" } }, "gitHooks": { "pre-commit": "lint-staged" }, "lint-staged": { "src/**/*.{js,vue}": [ "eslint --fix", "git add" ] }
|