Vue CLIプロジェクトがネストされるとgitHooksが動作しない問題の解決

問題

Vue CLIでプロジェクトを作る際にLint and fix on commitにチェックを入れたが、コミットをしてもリンターが動作しない。

原因

リポジトリの中にフロントエンド(Vue)用のディレクトリとサーバーサイド用のディレクトリがあったため。

解決方法

リポジトリのルートでgitHooksを呼び出せばよい。

リポジトリのルートでnpm init -y && npm i -D yorkie
yorkieはGit hookを手軽に記述できるhuskyからフォークされたもので、@vue/cli-serviceについてくる。

package.jsonにgitHooksを記述する。

{
  "name": "nesting-yorkie-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "gitHooks": {
    // コミット時の動作を記述する
    "pre-commit": "cd 'ネストされたVueCLIプロジェクト' && node_modules/.bin/lint-staged"
  },
  "devDependencies": {
    "yorkie": "^2.0.0"
  }
}

サンプル