使用的npm包
- prettier 代码格式化模块，和vscode上安装的Vetur扩展工具使用的格式化相同
- husky git的钩子，在git的hook中执行一些命令
- lint-staged 对git暂存的文件进行lint检查
- eslint js代码检测工具
- commitlint commit lint配置包
husky介绍
husky是一个让配置git钩子变得更简单的工具，支持所有的git钩子。它可以将git内置的钩子暴露出来，很方便地进行钩子命令注入，而不需要在.git/hooks目录下自己写shell脚本了。可以使用它来lint将要提交的消息、运行测试、lint代码等。当你commit或push的时候。husky触发所有git钩子脚本
代码规范配置
1、安装husky prettier lint-staged eslint依赖
cnpm install --save-dev prettier husky lint-staged eslint
2、配置prettier的规则
在项目根目录新建一个 .prettier 文件；
延伸：prettier官网
// 代码换行长度
"printWidth": 120,
// 代码缩进空格数
"tabWidth": 2,
// 使用空格缩进，不使用缩进符
"useTabs": false,
// 代码结尾是否加分号
"semi": false,
// 是否使用单引号
"singleQuote": true,
// 单个参数的箭头函数也要加括号 (x) => x
"arrowParens": "always",
// 每个文件格式化的范围是文件的全部内容
"rangeStart": 0,
"rangeEnd": Infinity,
// 使用默认的折行标准
"proseWrap": 'preserve',
// 根据显示样式决定 html 要不要折行
"htmlWhitespaceSensitivity": 'css',
// vue 文件中的 script 和 style 内不用缩进
"vueIndentScriptAndStyle": false,
// 换行符使用 lf
"endOfLine": 'lf',
// 格式化嵌入的内容
"embeddedLanguageFormatting": 'auto',
// html, vue, jsx 中每个属性占一行
"singleAttributePerLine": false,
// 仅在必需时为对象的key添加引号
"quoteProps": 'as-needed',
// jsx中使用单引号
"jsxSingleQuote": true,
// 在对象前后添加空格-eg { foo: bar }
"bracketSpacing": true,
//在已被preitter格式化的文件顶部加上标注
"insertPragma": false,
}
3、配置eslint规则
如果没有全局安装eslint，可以在项目中执行
./node_modules/.bin/eslint --init
项目自动在根目录新增加了一个.eslintrc.json文件，在rules选项中校验规则
延伸：eslint规则
"rules":{
// 禁止对象字面量中出现重复的 key
"no-dupe-keys": "error",
// 禁止出现重复的 case 标签
"no-duplicate-case": "error",
// 禁止出现空语句块,允许catch出现空语句
"no-empty": [
"error",
{"allowEmptyCatch": true}
],
// 禁止对 catch 子句的参数重新赋值
"no-ex-assign": "error",
// 禁止不必要的布尔转换
"no-extra-boolean-cast": "error",
// 禁止不必要的分号
"no-extra-semi": "error",
// 强制所有控制语句使用一致的括号风格
"curly": "error"
// 要求使用 === 和 !==
"eqeqeq": "warn",
// 禁止 function 定义中出现重名参数
"no-dupe-args": "error",
// 禁用 eval()
"no-eval": "error",
// 禁止自身比较
"no-self-compare": "error",
// 禁止自我赋值
"no-self-assign": "error",
// 禁止出现未使用过的变量
"no-unused-vars": "error",
// 禁止修改 const 声明的变量
"no-const-assign": "error",
// 禁止对 function 声明重新赋值
"no-func-assign": "error",
// 强制使用骆驼拼写法命名约定
"camelcase": "error",
// 禁止混用tab和空格
"no-mixed-spaces-and-tabs": "error",
// 两个空格缩进
"indent": ["warn", 2],
// 要求引号类型 `` ' ''
"quotes": ["warn", "single"],
// 语句强制分号结尾
"semi": ["error", "never"]
}
4、在package.json中增加husky和lint-staged的配置
"husky":{
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**": [
"prettier --config .prettierrc --write",
"eslint --fix",
"git add"
]
}
添加位置效果图：
image.png
5、检验是否成功
git add .
git commit -m '测试'
此时就会自动格式化后进行eslint校验，如果有错误的话，commit会失败，并给出eslint提示的错误，修改后再次提交就可以了
备注：
.eslintignore文件 忽略eslint检查的路径
.prettierignore文件 忽略prettier格式化的路径
git commit 规范性配置
1、安装commitlint依赖
npm install --save-dev @commitlint/config-conventional @commitlint/cli husky
2、添加配置文件，名称commitlint.config.js
在commitlint.config.js文件中添加配置信息
const types = [ 'docs', 'feat', 'fix', 'revert', 'subject', 'test'];
typeEnum = {
rules: {
'type-enum': [2, 'always', types]
},
value: () => types
}
module.exports = {
extends: [
"@commitlint/config-conventional"
],
rules: {
'type-case': [0],
'type-empty': [0],
'scope-empty': [0],
'scope-case': [0],
'subject-full-stop': [0, 'never'],
'subject-case': [0, 'never'],
'header-max-length': [0, 'always', 72],
'type-enum': typeEnum.rules['type-enum']
}
};
3、在package.json文件中添加配置项，husky
"husky":{
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
"pre-push": "echo 提交代码前需要先进行单元测试 && 可以做测试相关"
}
}
pre-commit：在 git commit 之前触发
commit-msg: 在编写commit信息时触发
pre-push: 在git push之前触发
上面的流程配置完成，在提交 commit 信息的输入的内容，如果不符合 <type>: <subject> 规则，会终止并给出提示信息。
type就是上面的种类，subject就是当次提交需要填写的文字描述
例如：feat: 添加租赁管理模块页面
说明：
如果某次提交想绕过校验规则，可以添加参数 **--no-verify**
git commit --no-verify -m "xxx"
网友评论