需求:项目中用到了eslint+prettier对格式及语法校验但是commit的时候还是可以正常提交,所以需要用到一些插件来解决这个问题
需要的效果如下:
首先在搭建项目的时候选择了使用eslint;如果没有请先自行安装
npm install -D eslint eslint-plugin-vuenpm 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 /vuejs/eslint-config-vuerules: {'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_modulesstaticdist
安装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: 测试错误代码"
接下来使用，git cz 来代替 git commit 进行提交就可以看到提示内容了
