vue-cli3+git-hook實現代碼提交前自動eslint驗證和格式化

Git Hook

官方文檔：https://cli.vuejs.org/zh/guide/cli-service.html#git-hook
在安裝@vue/cli-service 之后, 也會安裝 yorkie，它會讓你在 package.json 的 gitHooks 字段中方便地指定 Git hook：

{
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,vue}": ["vue-cli-service lint", "git add"]
  }
}

注意

yorkie fork 自 husky 並且與后者不兼容。

lint-staged 需要安裝 否則會報找不到 lint-staged 命令

yarn add lint-staged --dev

再次 commit 時會看到這樣的提示

git commit -m "Update"
 > running pre-commit hook: lint-staged
[STARTED] Preparing...
[SUCCESS] Preparing...
[STARTED] Running tasks...
[STARTED] Running tasks for *.{js,vue}
[STARTED] vue-cli-service lint
[SUCCESS] vue-cli-service lint
[SUCCESS] Running tasks for *.{js,vue}
[SUCCESS] Running tasks...
[STARTED] Applying modifications...
[SUCCESS] Applying modifications...
[STARTED] Cleaning up...
[SUCCESS] Cleaning up...
[dev 486fef8] Update
 2 files changed, 2 insertions(+), 2 deletions(-)

commit時有警告

⚠ Some of your tasks use `git add` command. Please remove it from the config since all modifications made by tasks will be automatically added to the git commit index.

意思是將git add刪除 因為 lint-staged 會將格式化的后的代碼自動添加到當前 commit 中

使用 husky

因為 yorkie 無法向后兼容 所以建議直接使用 husky 做 git hook
自動安裝配置 lint-staged 和 husky

npx mrm@2 lint-staged

修改 package.json

"lint-staged": {
    "*.{js,vue}": ["vue-cli-service lint"]
  }

再次 commit 時會看到這樣的提示

$ git commit -m "Update"
[STARTED] Preparing...
[SUCCESS] Preparing...
[STARTED] Running tasks...
[STARTED] Running tasks for *.{js,vue}
[STARTED] vue-cli-service lint
[SUCCESS] vue-cli-service lint
[SUCCESS] Running tasks for *.{js,vue}
[SUCCESS] Running tasks...
[STARTED] Applying modifications...
[SUCCESS] Applying modifications...
[STARTED] Cleaning up...
[SUCCESS] Cleaning up...
[master c33d119] Update
 1 file changed, 1 insertion(+), 1 deletion(-)

自動 eslint 驗證和格式化

如果項目創建時沒有 選擇 linter / formatter config 需要設置一個標准讓 eslint 執行格式化
正常有三種標准可以選擇

ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier

簡單的方法想使用哪個標准 使用 vue-cli 創建一個新項目選擇對應的標准然后跟現在的項目對比看看缺了些什么
下面簡單說下各個標准的配置和需要的插件

Airbnb

下載插件

 npm install --save-dev @vue/eslint-config-airbnb

修改 eslintConfig

"eslintConfig": {
    ...
    "extends": [
      ...
      "@vue/airbnb"
    ],
  },

Standard

下載插件

 npm install --save-dev @vue/eslint-config-standard

修改 eslintConfig

"eslintConfig": {
    ...
    "extends": [
      ...
      "@vue/standard"
    ],
  },

Prettier

下載插件

 npm install --save-dev @vue/eslint-config-prettier@6.0.0  eslint-plugin-prettier@3.3.1 prettier@2.2.1

修改 eslintConfig

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // 如果強烈要自定義規則，否則不需要添加下面代碼 
    'prettier/prettier': [
      'warn',
      {
        printWidth: 80,
        semi: true,
        singleQuote: false,
        trailingComma: 'es5',
        jsxBracketSameLine: true,
        arrowParens: 'avoid',
        insertPragma: true,
        tabWidth: 2,
        useTabs: false,
        bracketSpacing: true,
        endOfLine: 'auto'
      }
    ]
  }
};

關於vscode-prettier

添加.prettierrc 和 修改vscode-prettier規則 會改變 prettier 的默認規則，可能會出現與eslint-config-prettier規則不一致問題 (注意：'prettier/prettier'選項將合並並覆蓋任何帶有.prettierrc文件的配置集)

建議 ：不修改 eslintConfig 中的規則 ， 不添加.prettierrc ， 不修改 vscode-prettier 規則 ，保持統一風格

如果非要自定義風格 需要保持 eslintConfig 規則和 .prettierrc 統一風格，或干脆排除 .prettierrc

"prettier/prettier": ["error", {}, {
   // 排除  .prettierrc  防止規則合並
  "usePrettierrc": false
}]