pre-commitフック、コード品質検査

現在、jsコード品質検査ツールは基本的に3つ使用されています.jslint、jshint、eslintです.多くのIDEにも対応するチェックプラグインがあり、ctrl+sがファイルを保存するたびに、現在のファイルが仕様に合致しているかどうかをチェックし、コードの品質を保証します.
多くのチームはコード仕様code reviewを指定し、コード修正のたびにより厳格にチェックします.また、git commit以前に、バージョンライブラリに提出されたすべてのコードが仕様に合致していることを確認し、
vueソースコードを見ると、コードを修正することが避けられず、中に配置されたフック関数がトリガーされます.そこで,vue構成方法をよく検討すると,構成が非常に簡単であることが分かった.
gitフックドキュメントでは非常に詳細に説明されていますが、git init後、.git/hooksファイルには、.simple末尾のフックサンプルスクリプトがいくつかあります.対応するフック関数を有効にするには、接尾辞を手動で削除するだけです.次に、2つの構成方法を示します.
1.フックファイルを手動で修正する
ドキュメントに従って、フックスクリプトを構成し、hooksのファイル名に対応するフックファイルを変更し、フックを有効にします.shellスクリプトチェックを使用すると、vue 1を参照できます.xでの使い方

    !/usr/bin/env bash
    
     # get files to be linted
    FILES=$(git diff --cached --name-only | grep -E '^src|^test/unit/specs|^test/e2e')
    
     # lint them if any
    if [[ $FILES ]]; then
      ./node_modules/.bin/eslint $FILES
    fi

ファイル名はpre-commitcommitより前に有効にしたフック関数を利用してgit diff現在どのファイルが修正されているかを確認し、指定したフォルダで修正されたファイルに対してのみeslintを使用してコードチェックを行い、プロジェクト全体に対して漸進的にコード仕様を実現します.
スクリプトが作成されたら、毎回手動で.git/hooksディレクトリにコピーする必要はありません.現在のファイルにソフト接続を作成し、指定されたディレクトリにpackage.jsonでスクリプトコマンドを構成し、

"scripts": {
   "install-hook": "ln -s ../../build/git-hooks/pre-commit .git/hooks/pre-commit",
}

プロジェクト初期化後、実行npm run install-hookpre-commitフックを容易に配置
2.yorkie or husky+lint-stagedによるフックの構築
vueの最新バージョンでは、尤大に書き換えられたyoukieが使用されています.youkieは実際にfork huskyで、フックがpackageから動くようにカスタマイズされた変更が行われています.jsonの「gitHooks」属性で読み込み、

{
  "gitHooks": {
    "pre-commit": "foo"
  }
}

使用方法はhuskyと同様で、huskyドキュメントを表示することができます.詳細について説明します.

 npm install husky --save-dev
 # or npm install yorkie --save-dev

インストールが完了すると、hooksディレクトリのファイルが書き換えられていることがわかります.packageだけです.jsonでは、フックに対応するスクリプトを構成します.husky構成:

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "npm test",
      "pre-push": "npm test",
      "...": "..."
    }
  }
}

振り返って、vueでどのように構成するかを見てみましょう.

// package.json
 "gitHooks": {
    "pre-commit": "lint-staged",
    "commit-msg": "node scripts/verify-commit-msg.js"
  }
 "lint-staged": {
    "*.js": [
      "eslint --fix",
      "git add"
    ]
  }

前述したように、git diffを利用して、lintが現在変更しているファイルのみ、lint-stagedがこの問題を非常に正確に解決していることから、このパッケージ名から、Run linters on git staged filesは、変更したファイルのみに対して処理されていることがわかる.huskyと組み合わせて使用し、依存度をインストールします.

npm install --save-dev lint-staged husky

パッケージを変更します.jsonファイル

{
+ "husky": {
+   "hooks": {  
+     "pre-commit": "lint-staged"
+   }
+ },
+ "lint-staged": {
+   "*.js": ["eslint --fix", "git add"]
+ }
}

eslintを使用するには、構成が必要です.Eslintrc,lint-stagedには、lint後、より柔軟に、他のスクリプトを実行して、eslint --fixチェック後にエラーを修正しようとするメリットがあります.
上記のvueファイルは同様の構成を使用し、commit-msgフックを追加し、scripts/verify-commit-msgでコミット説明をチェックします.jsファイルにはチェックスクリプトが見つかります.

const chalk = require('chalk')
const msgPath = process.env.GIT_PARAMS
const msg = require('fs').readFileSync(msgPath, 'utf-8').trim()

const commitRE = /^(revert: )?(feat|fix|polish|docs|style|refactor|perf|test|workflow|ci|chore|types|build)(\(.+\))?: .{1,50}/

if (!commitRE.test(msg)) {
  console.log()
  console.error(
    `  ${chalk.bgRed.white(' ERROR ')} ${chalk.red(`invalid commit message format.`)}

` +
    chalk.red(`  Proper commit message format is required for automated changelog generation. Examples:

`) +
    `    ${chalk.green(`feat(compiler): add 'comments' option`)}
` +
    `    ${chalk.green(`fix(v-model): handle events on blur (close #28)`)}

` +
    chalk.red(`  See .github/COMMIT_CONVENTION.md for more details.
`) +
    chalk.red(`  You can also use ${chalk.cyan(`npm run commit`)} to interactively generate a commit message.
`)
  )
  process.exit(1)
}

プロセスを利用するenv.GIT_PARAMSはディレクトリを見つけ,msgの説明を読み出し,チェックを行う.
huskyを使用するには、対応する属性名がHUSKYに変更されていることに注意してください.GIT_元のGIT_ではなくPARAMSPARAMS環境変数.