Vue+ESLint+Git钩子函数pre-commit配置教程
一、创建Vue项目eslint-standard
vue create eslint-standard
二、创建.eslintrc.*
- 删除package.json中的eslintConfig配置
- 我们创建.eslintrc.js
// .eslintrc.js
// .eslintrc.js module.exports = { root: true, env: { node: true, browser: true, es6: true }, extends: [ "plugin:vue/essential", "eslint:recommended" ], parserOptions: { "parser": "babel-eslint" }, rules: {} // 用来自定义一些符合个人或者团队的规则 }
- 安装配置Git钩子插件husky
- 安装lint-staged,只对修改的文件进行check
npm install lint-staged husky @commitlint/config-conventional @commitlint/cli --save-dev
//配置package.json,添加`husky`配置 { "husky": { "hooks": { "pre-commit": "lint-staged", "commit-msg": "commitlint -x @commitlint/config-conventional -E HUSKY_GIT_PARAMS"
} }, "lint-staged": { "src/**/*.{js,vue}": [ "pretty-quick --staged", "eslint --fix", "git add" ] } }
- 配置规则
我们可以生成 commitlint.config.js
或 .commitlintrc.js
文件来配置自定义的规则
commitlint.config.js 文件的配置如下:
module.exports = { extends: [ "@commitlint/config-conventional" ], rules: { 'type-enum': [2, 'always', [ 'upd', 'feat', 'fix', 'refactor', 'docs', 'chore', 'style', 'revert' ]], '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] } }
更多配置规则可参照 commitlint 官方网站:commitlint rules
git commit
用于说明 commit 的类别,只允许使用下面7个标识。
- feat:新功能(feature)
- fix:修补bug
- docs:文档(documentation)
- style: 格式(不影响代码运行的变动)
- refactor:重构(即不是新增功能,也不是修改bug的代码变动)
- test:增加测试
- chore:构建过程或辅助工具的变动
- 如果type为feat和fix,则该 commit 将肯定出现在 Change log 之中。其他情况(docs、chore、style、refactor、test)由你决定,要不要放入 Change log,建议是不要。
注意Vue3.0 TS模板需要修改
// 默认
declare module '*.vue' { import type { DefineComponent } from 'vue' const component: DefineComponent<{}, {}, any> export default component } // 修改为 因pretty-quick校验有异常
declare module "*.vue" {
import { defineComponent } from "vue";
const component: ReturnType<typeof defineComponent>;
export default component;
}