ファイル保存時にESLintとPrettierで自動修正する

参考にさせていただいたページ

VSCodeを使っている場合の参考情報

• TypeScriptのプロジェクトにESLintとPrettierを併用してVSCodeの保存時に自動フォーマットをする | ZUMA Lab

VSCodeを使っていない場合の参考情報

• GitHub - Qard/onchange: Use glob patterns to watch file sets and run a command when anything is added, changed or deleted.
• GitHub - mysticatea/npm-run-all: A CLI tool to run multiple npm-scripts in parallel or sequential.

VSCodeを使っている場合

VSCodeを使っている場合は簡単で、以下の通り設定するだけです。

1. ESLintのextentionをインストールして有効化する
2. Prettierのextentionをインストールして有効化する
3. VSCodeのsettiongs.jsonに以下の通り設定を記述する

{
  "editor.defaultFormatter": "esbenp.prettier-vscode", // デフォルトのフォーマッタを prettier に設定
  "editor.formatOnSave": true, // ファイル保存時、prettier による自動フォーマット
  "editor.codeActionsOnSave": {
    "source.fixAll": true // ファイル保存時、ESLint による自動フォーマット
  }
}

VSCodeの場合はこれで大丈夫だと思います。

VSCodeじゃない場合

業務において複数人で開発をしている場合は各々色々なエディタを使っているので、VSCode以外のエディタでもファイル保存時にESLintとPrettierで自動修正したいので、その方法です。

ファイルが保存されたときに任意の処理を実行するためにonchangeをインストールして使用しています。
dev と watch:onchange を並列実行するためにnpm-run-allをインストールして使用しています。

Next.jsで開発をしている場合で、package.jsonに以下のようにscriptsを定義しました。

{
  〜略〜
  "scripts": {
    "dev-with-auto-fix": "run-p dev watch:onchange",
    "dev": "next dev -p 8001",
    "watch:onchange": "onchange \"./src/**/*.{ts,tsx}\" -- npm run lint-and-format:changed -path={{changed}}",
    "lint-and-format:changed": "next lint --fix --file $npm_config_path && prettier --write $npm_config_path",
  },
  〜略〜
}

VSCodeを使っているメンバーは通常通り npm run dev コマンドを使用して、コードの自動修正はVSCodeのextentionsで行うのが良いのではないかと思います。

VSCode以外のエディタを使っているメンバーは dev-with-auto-fix コマンドを使用することで、コードの自動修正をすることができます。

おまけ

VSCodeのsettings.jsonに以下の設定をすると、コードをペーストしたときや、コードを編集したときにもフォーマットされるようです。

  "editor.formatOnPaste": true, // ペーストした文字の自動フォーマット有効
  "editor.formatOnType": true, // 文字入力行の自動フォーマット有効