Help us understand the problem. What is going on with this article?

pre-commit hookをプロジェクトで共有したいしprettierもeslintもよしなにしてほしい

プロジェクトにESLintやRubocopのようなLinter, PrettierやRufoといったFormatterは導入していますか?
いいですよね、人間が細かいコーディングルールを気にすること無く神様にお任せでよしなにやってくれる。とても嬉しい。

とはいえですよ、これらの実行を手運用に任せてるとしばしば実行し忘れてしまい、
LinterやFormatterを実行しただけのコミットが生まれてしまいがちです。

そういうときにはpre-commit hookやpre-push hookなんていうありがたーい仕組みがあるわけですが
なんとこちら、.gitディレクトリ配下にあるのでプロジェクトで共有できません。ああもったいない!

ということでこれを解決するためのnpmパッケージがあります。
typicode/husky

今回はこちらを中心に、prettierやeslintをよしなにしてみたり、
okonet/lint-staged を導入してステージに入ってるファイルだけを対象にしてみたりします。

ちなみに実行するコマンドとしてrubocopやrufoを指定することでnpmパッケージではないものも普通にpre-commit hook書けることができるようです。やったね。
(JS関係ないプロジェクトでもpre-commit hookやpre-push hookを矯正するためだけにhuskyを導入する人もいるとか。)

なお、この記事では、eslintとprettierが喧嘩しないLintルールの設定についてはここでは省きます。

環境構築滅多にやらない勢なので、こうするともっとええんやでとかあったらどしどしコメントをお寄せください。

huskey を導入してpre-commit hook とpre-push hookを導入する

まずhuskeyをプロジェクトに導入しましょう。

npm install --save-dev husky 
OR
yarn add -D husky

package.jsonに以下を追加します。

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

これでcommitとpushの前に "npm test" コマンドが実行されるようになります。
複数のファイルを実行したいときはsh hoge.shとかnode hoge.jsファイルを作って実行すればいいです。

pre-commit hookでeslintとprettierをコマンドライン実行する

eslintとprettierを併用するにはeslintprettierの他に
eslint-plugin-prettier も必要みたいです。

npm install --save-dev eslint prettier eslint-plugin-prettier
OR
yarn add -D eslint prettier eslint-plugin-prettier

前述の通り、eslintとprettierが喧嘩しないLintルールの設定についてはここでは省きます。
ESLintとPrettierを併用するときの設定(eslint-plugin-prettier, eslint-config-prettier) - dackdive's blog
このあたりの記事とかが参考になるかもしれません。

さて、huskyでeslintとprettierを実行し、エラーがあったらコミットを失敗し、
自動整形結果をgit addするようにしたいところです。

でも、自動整形するのはgit addしてstagingしたコードに限定したいですよね?

okonet/lint-staged こちらを使うことで、stagingしてるファイルだけを対象にできます。

ということでlint-stagedをインストールして使ってみましょう!

npm install --save-dev lint-staged
OR
yarn add -D lint-staged

package.jsonに下記の設定を追加します。
例では .jsファイルと.vueファイルに適用するようになってますが、jsxだったりtsだったり対象にしたいファイルはプロジェクトによって異なると思いますので適宜設定してください。

package.json
  ...,
 "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
     }
  },
  "lint-staged": {
    "*.{js,vue}": [
      "eslint --fix",
    ]
  },
  ...

これで、stagedなファイルだけを対象にprettierとeslintがかかり、git addしてくれるようになります。
やったね!

@puku0x 2020-04-13 00:28
v10以降のlint-stagedではgit addは不要になったようです。

とのことなので、 git add の行を削除しました。 thx!

参考にしました

余談

eslintとprettierを併用する方法として、prettier-eslintというものもあります

studist
「伝えることを、もっと簡単に」をミッションにビジュアルSOPマネジメントプラットフォームのBtoB SaaS「Teachme Biz」を開発・運営するスタートアップ
https://medium.com/studist-dev
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした