こんにちは。私は主にReactでWEBフロントエンド開発を行っています。

ESLint v9.0.0のリリースブログによるとESLint v9.0.0以降はFlat configと呼ばれる書き方がデフォルトになるようです。

そこでESLint Flat config時代における、VS Codeを使ったVite × React環境にESLintとPrettierを組み込み、保存時に自動的にフォーマットしてくれる設定をご紹介します。

2024年9月現在、Viteを使ったReactプロジェクトを立ち上げる方法についてです。

ViteによるReact環境構築
パッケージのインストール
ESLintの設定ファイルにPrettierとの競合を解決する設定を追加
VS Codeの設定ファイルの作成
- 設定がうまく効かない場合の確認事項
VS Codeの拡張機能の追加
環境構築完了
- 動作確認
- ルールの変更
まとめ
おわりに

ViteによるReact環境構築

npm create vite@latest -- --template react-ts を実行し、お好みのプロジェクト名を入力して、プロジェクトを作成します。

template部分はreact-swc-tsとしたSWCを使う環境構築でも良いです。

このコマンドで作成されたフォルダを以降ルートフォルダ(./)とします。VS Codeでルートフォルダを開いてから以下手順の実行をしてください。

パッケージのインストール

npm i -D prettier eslint-config-prettierを実行します。

Viteを使ってReact環境を立ち上げた時点でESLintが初めからパッケージに含まれているため、改めてインストールコマンドを実行する必要はありません。

上記コマンド実行によりPrettierとESLintとそれらが競合しないためのパッケージのインストールが完了します。

PrettierによればESLintとPrettierを共存させるためにはeslint-config-prettierが必要となります。

ESLintの設定ファイルにPrettierとの競合を解決する設定を追加

./eslint.config.jsを以下のようにPrettierと競合が起きないように設定を追加します。

import eslintConfigPrettier from "eslint-config-prettier"; // 追加
 
export default [
  ...tseslint.config({
    // 既存の設定そのままでOK
  }),
  eslintConfigPrettier, // 追加
];

eslintConfitPrettierを追加するためにtseslint.configをスプレッド構文で配列に加える形にします。

eslint-config-prettierによれば、オーバーライドしたい設定の後にeslintConfigPrettierを置くようにとのことなので、一番最後に追加しています。

VS Codeの設定ファイルの作成

以下の.vscode/settings.jsonを作成します。

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

こちらの設定はVS Code上でGUIを操作して追加することも可能です。既存の設定が既にある場合は、その設定に上記の設定を追加すればOKです。

ファイルを保存したときにESLintの自動修正が実行される設定、フォーマッターとしてprettierを使う設定、ファイルを保存したときにフォーマッターが実行される設定、を追加しました。

ESLintはフォーマッターではないため"editor.formatOnSave": trueだけでは保存時にESLintの自動修正が実行されない点にご注意ください。

設定がうまく効かない場合の確認事項

設定がうまく効かない場合は以下の項目を確認してみてください。

プロジェクトのパス名に日本語が含まれていないこと
VS Codeで開いているフォルダがこのプロジェクトのルートフォルダであること
VS Codeのユーザー設定と競合していないこと

VS Codeの拡張機能の追加

VS Codeの拡張機能であるESLintとPrettierをVS Codeにインストールしてください。このプロジェクトに拡張機能が適用されていれば問題ありませんが、VS Codeの拡張機能タブからインストールすればOKです。

上記以外のPrettierやESLintに関する拡張機能も有効になっている際に、上手く拡張機能が機能しなかったことがあるので、設定が上手く効かない場合はそちらもご確認ください。

環境構築完了

Prettierは設定ファイル無しでもデフォルトの設定が有効になっているため、これで最低限の設定は完了です。

動作確認

./src/App.tsxを開いてファイルを保存してみてください。各行の末尾にセミコロンが追加されるなどファイルが整形されるはずです。

また、同じファイルでconst hoge = 0;をテキトウな位置に記述しマウスホバーすると'hoge' is assigned a value but never used.というエラーがESLintから出るはずです。

これで正しく動作していることが確認できました。

ルールの変更

整形ルールやリントルールを変更する場合はESLintの設定やPrettierの設定を追加してください。

まとめ

Viteで構築したReact環境にESLintとPrettierを導入し、VS Codeで保存時に自動でフォーマットされるようにする方法を紹介しました。ESLintもPrettierもまだまだ多くの設定があるので、よりカスタマイズしたい方は公式ページや他の方の記事を参考に設定を追加してみてください。

これから新しいプロジェクトを立ち上げる方や既存のプロジェクトにESLint + Prettierの設定を追加したい方の参考になれば幸いです。

KENTEMでは、様々な拠点でエンジニアを大募集しています！
建設×ITにご興味頂いた方は、是非下記のリンクからご応募ください。
recruit.kentem.jp career.kentem.jp