huskyとlint-stageでコミット時にformatterを走らせる

管理人

こんにちは、さえと申します👩‍💻
フロントエンドエンジニアになるために日々勉強をしています
このブログはその勉強の記録とアウトプットのために運営をしています✨

前回に引き続きformatterについての学習記録です
今回はコミットした際にformatterが走る様な設定を加えていく編

現状のpackage.json
導入
エラー記録
参考記事

現状のpackage.json

{
  "name": "formatter-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "stylelint": "npx stylelint '*.scss'",
    "stylelint:fix": "npx stylelint '*.scss' --fix",
    "eslint": "npx eslint 'index.js'",
    "eslint:fix": "npx eslint 'index.js' --fix",
    "prettier": "npx prettier --check .",
    "prettier:fix": "npx prettier --write .",
    "format": "npm run prettier && npm run eslint && npm run stylelint"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "^8.15.0",
    "prettier": "2.6.2",
    "stylelint": "^14.8.2",
    "stylelint-config-recommended": "^7.0.0",
    "stylelint-config-recommended-scss": "^6.0.0",
    "stylelint-scss": "^4.2.0"
  },
  "dependencies": {
    "eslint-config-prettier": "^8.5.0",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-standard-scss": "^3.0.0"
  }
}

導入

Prettierのドキュメントにあったhuskyとlint-staged を使用した方法をやってみる

Pre-commit Hook · Prettier

You can use Prettier with a pre-commit tool. This can re-format your files that are marked as “staged” via `git add` before you commit.

① セットアップ

npx mrm@2 lint-staged

これは husky と lint-staged をインストールし、プロジェクトの package.json に設定を追加して、対応するファイルを pre-commit フックで自動的にフォーマットするようにするものです。
https://prettier.io/docs/en/precommit.html#option-1-lint-stagedhttpsgithubcomokonetlint-staged

以下の部分がpackage.json へ追加された

{
  ....
  "scripts": {
    ...
    "prepare": "husky install"
  },
  "devDependencies": {
    "husky": "^8.0.1",
    "lint-staged": "^12.4.1",
    ....
  },
  "lint-staged": {
    "*.js": "eslint --cache --fix",
    "*.css": "stylelint --fix",
    "*.stylelint": "prettier --write"
  }
}

.huskyがプロジェクトディレクトリに追加された

“prepare”: “husky install”ってなに

package.jsonへ追加された”prepare”: “husky install”は何なのか

"scripts": {
  "prepare": "husky install"
}

npm iした後に自動的にGitフックディレクトリとして.husky/を使用する様するコマンド

Typicode's blog - Why husky has dropped conventional JS config

Typicode's blog - Why husky doesn't autoinstall anymore

② lint-staged内を変更

対象のファイルとnpmスクリプトを指定

"lint-staged": {
  "*.js": "npm run eslint:fix",
  "*.scss": "npm run stylelint:fix",
  "*.{js,scss,html}": "npm run prettier:fix"
}

③ コミットしてみる

eslintでエラーが発生！エラー箇所は.eslintrc.jsファイルの一行目

原因

lint-stageで.jsの拡張子がつくファイルに対して右辺が実行されている
本来linterから除外したかった.eslintrc.jsも対象ファイルとみなされlinterが走ってしまった

"lint-staged": {
  "*.js": "npm run eslint:fix",
  "*.scss": "npm run stylelint:fix",
  "*.{js,scss,html}": "npm run prettier:fix"
}

解決方法

ignoreする、またはlint-stagedで実行するファイルをの指定方法を変える

{
  ignorePatterns:[".eslintrc.js"],
}

エラー記録

コミットした際にformatterが走らない。
The '.husky/pre-commit' hook was ignored because it's not set as executable.とでた

% git commit -m "fix"
... 
hint: The '.husky/pre-commit' hook was ignored because it's not set as executable.
hint: You can disable this warning with `git config advice.ignoredHook false`.

以下のコマンドを実行し、実行権限を許可してあげることで解決