vue commit提交代码husky+lint-staged进行校验

需求:项目中用到了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-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_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"'

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 进行提交就可以看到提示内容了

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！