需求:项目中用到了eslint+prettier对格式及语法校验但是commit的时候还是可以正常提交,所以需要用到一些插件来解决这个问题
需要的效果如下:
首先在搭建项目的时候选择了使用eslint;如果没有请先自行安装
npm install -D eslint eslint-plugin-vue
npm install eslint-plugin-html --save-dev eslint-plugin-html //用于校验html中的js语法
新建.eslintrc.js配置文件
module.exports = {
root: true,
parserOptions: {
"parser": "@babel/eslint-parser",
sourceType: 'module'
},
env: {
browser: true,
node: true,
es6: true
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],
// add your custom rules here
//it is base on https://github.com/vuejs/eslint-config-vue
rules: {
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-var': ['error'],//不能使用var
// 尾随逗号规则
// 'comma-dangle': [
// 'error',
// {
// arrays: 'always',
// objects: 'always',
// imports: 'never',
// exports: 'never',
// functions: 'never',
// },
// ],
},
'overrides': [
{
'files': ['*.vue'],
'rules': {
'indent': 'off'
}
}
],
"plugins": [
"html",//识别.vue文件里的JavaScript代码
'vue'
]
};
新建.eslintignore指定eslint忽略文件和目录
node_modules
static
dist安装prettier开发环境
npm install -D prettier eslint-plugin-prettier eslint-config-prettier新建.prettierrc.js配置文件（仅做参考，自行补充）
module.exports = {
"semi": true,//分号
"singleQuote": true,//单引号
"tabWidth": 2//tab采用两个空格
};
安装husky开发环境
npm install husky --save-dev启动hooks
npx husky install
添加prepare指令
通过npm设置preapre指令
npm set-scrip prepare "husky install"
运行prepare指令
npm run prepare
添加commit-msg的hook到husky中
git commit执行前
可用于将消息规范化为某种项目标准格式。
还可用于在检查消息文件后拒绝提交。
简单说:可以用来规范化标准格式，并且可以按需指定是否要拒绝本次提交
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
执行 commit-msg 钩子，进行提交信息的校验
生成 pre-commit 文件
git commit执行前
它不接受任何参数，并且在获取提交日志消息并进行提交之前被调用。脚本git commit以非零状态退出会导致命令在创建提交之前中止。
简单说:会在提交前被调用，并且可以按需指定是否要拒绝本次提交
npx husky add .husky/pre-commit在当前项目的 .husky 文件夹中创建了一个 pre-commit 文件 (执行pre-commit 钩子进行代码格式校验)
修改 pre-commit 文件
把pre-commit文件中的undefined改为npx lint-staged
在package.json文件中增加节点（仅做参考，自行补充）
"scripts": {
"lint": "eslint --fix src",
"prepare": "husky install",
"lint-staged": "lint-staged"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
安装 lint-staged
lint-staged 是文件过滤器，它只会校验你提交或者说你修改的部分内容
npm install lint-staged --save-dev配置 package.json
"lint-staged": {
"src/**/*.{js,vue}": [
"eslint --fix",
"git add"
]
},
当commit 后报以下错误的时候需要安装@commitlint/config-conventional @commitlint/cli插件
解决方法
commitlint 工具检查提交描述是否符合规范要求 ( 用于检查提交信息)
npm install --save-dev @commitlint/config-conventional @commitlint/cli
根目录创建commitlint.config.js文件
将下列代码加入刚才创建的文件中
module.exports = {
// 继承的规则
extends: ['@commitlint/config-conventional'],
// 定义规则类型
rules: {
// type 类型定义，表示 git 提交的 type 必须在以下类型范围内
'type-enum': [
2,
'always', [
'feat', // 新功能 feature
'fix', // 修复 bug
'docs', // 项目文档或注释变更
'style', // 仅仅修改了空格、格式缩进、逗号等等，不改变代码逻辑
'refactor', // 代码重构，没有加新功能或者修复bug
'perf', // 优化相关，比如提升性能、体验
'test', // 增加测试
'chore', // 改变构建流程、或者增加依赖库、工具等
'revert', // 回滚到上一个版本
'build', // 部署版本
],
],
// subject 大小写不做校验
'subject-case': [0],
},
}
这里的git提交规范要在type-enum中所有提交方式
git commit -m "test: 测试错误代码"
