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