random.tagucch.dev

技術とかの雑なToday I Learnedメモ

ESLintとPrettierの記事を読む 続き
ESLint
Prettier

ESLint と Prettier の記事を読む 続き

昨日の記事の続きを読んだ。

Prettier 入門 ～ ESLint との違いを理解して併用する～ - Qiita

ESLint との併用

  • ESLint のメインは Lint で構文チェックなので、整形を Prettier で行う
  • ESLint でも整形ができるが、整形ルールが Prettier と一部競合するため、ESLint のフォーマットルールを無効化することで Prettier の設定のみでフォーマットする
  • eslint-config-prettierというパッケージを使う。このパッケージは ESLint のフォーマット関係のルールをすべて無効化するというもの
    • これを使うことで、Prettier が整形した箇所に ESLint のエラーがでなくなる
  • .eslintrc.js(設定ファイル全般)にextends: [“prettier”]と記述するだけで、上記パッケージにより ESLint のフォーマット関連のルールが無効になる
    • 注意点として、”prettier”の記述を extends の配列の最後に書かないとうまく動作しないことがある
    • ex: extends: [“eslint:recommended”, “prettier”]のように書く
  • npm scripts で以下のように設定してyarn fixを叩くことで、Prettier と ESLint が実行される
"scripts": {
    "format": "prettier --write [対象ファイル],
    "lint": "eslint --fix [対象ファイル]“,
    "fix": "npm run format && npm run lint"
  },

git commit 時に Prettier と ESLint が実行されるようにする

  • 整形が手動なので、コミット時に整形を忘れたら整形していないコミットがされることになる
  • エディタと連携してファイル保存時に Prettier と ESLint を実行する手段がある
  • 複数人開発だとエディタを揃えてそれぞれプラグインを導入するという運用が必要になってしまうが、コミット時のフックであれば特に何かの準備はいらない
  • Commit 前に指定のスクリプトを実行できる git の pre-commit という仕組みを使う

husky と lint-staged

  • husky は、v4 から v5 になったときに設定方法が大幅に変わったので注意する。v5 でライセンスが変更されたが v6 で戻ったので、v5 または v6 の記事を参考にしたほうがいい
  • yarn add -D huskyでインストールし、npm set-script prepare “husky install”を実行する
    • このコマンドを実行することで、npm scripts に”prepare”: “husky install”が追加される
  • prepare はnpm installやyarn installを実行する際に自動で実行されるので、自分以外のメンバーが clone してyarn installなどを行うことで自動で git フックが有効になる
  • npx husky add .husky/pre-commit “lint-staged”を実行すると、コミット時のフックで lint-staged が実行されるようになった
  • package.json に lint-staged の設定を追加することで、コミット時に lint-staged の設定部分が実行される
  "lint-staged": {
    "*.js": [
      "prettier --write",
      "eslint --fix"
    ]
  },

上記のように設定することでコミット時に実行される

← Back To Home