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; 
}