eslintとprettierを連携して開発効率を上げる
はじめに
フロントエンド開発では必須のeslint、prettierですが皆さんはうまく連携できてますか？ 今回はeslintとprettierの連携方法とファイル保存時に自動でフォーマッタが走るようにVSCodeを設定する方法についてまとめます。
prettierとeslintを連携させる理由
この2つのルールに関する設定項目が一部被っているため、どちらか一方のルールに統一することが目的です。
(クォーテーションを""か''か設定するquotesや文末の;の有無を設定するsemiが該当。)
今回はeslint-config-prettierというnpmを使用してルールが被っている場合はprettierのルールを優先してeslintのルールをオフにするという設定をしていきます。
事前準備
eslintのインストール
今回はeslintの細かい設定を省略するためにcreate-next-appを使用します。
ターミナルでcreate-next-appを実行すると対話形式で設定項目を問われます。
ESLintを使用するか聞かれるのでYesと回答しましょう。
その他の項目についてはプロジェクトに合わせて適宜回答します。
プロジェクトの作成が完了すると.eslintrc.jsonファイルが自動で作られるので各種pluginのインストールなど.eslintrc.jsonファイルの編集を行います。今回は特にeslintの設定をせずに進めるため、eslintの設定について気になる方は下記を参考にしていただければと思います。
https://umatsui.hatenablog.com/entry/2023/07/10/102109
さて、eslintのインストールはこれにて完了です。
create-next-appによって自動生成された.eslintrc.jsonファイルの内容を載せておきます。
.eslintrc.json
{ "extends": "next/core-web-vitals" }
prettierのインストール
下記コマンドでprettierをインストールします。
% yarn add -D prettier
package.jsonファイルにprettierが追加されていることを確認しましょう。
"devDependencies": { "@typescript-eslint/eslint-plugin": "^5.61.0", "@typescript-eslint/parser": "^5.61.0", "eslint-plugin-react": "^7.32.2", "prettier": "^3.0.0" }
Next.jsを使用しているのでprettier以外のパッケージも記載されていますが、今回は特に気にしなくて大丈夫です。
eslint-config-prettierのインストール
次にeslintとprettierを組み合わせて使うためのeslint-config-prettierをインストールします。
% yarn add -D eslint-config-prettier
eslintとprettierの連携
次にeslintとprettierの連携を行います。
とはいっても.eslintrc.jsonファイルのextendsにprettierを追加するだけです。
.eslintrc.json
{ "extends": ["next/core-web-vitals", "prettier"] }
連携するときの注意点
これまでの方法で連携を行った場合でも.eslintrc.jsonファイルのrulesにsemiやquotesを追加してしまうとそちらが優先されてしまうので気をつけましょう。
prettierで設定されているルールは下記で確認ができます。
https://prettier.io/docs/en/options.html
VSCodeの設定
最後にファイル保存時にコードが自動でフォーマットされる設定を行います。
VSCodeの設定手順は以下です。
右下の設定アイコンから設定ページへ遷移
画面左上のタブから「ワークスペース」を選択
画面右上の「設定」アイコンから
settings.jsonファイルを開く
下記設定を行う
{ // ファイル保存時にeslintの指摘箇所が自動修正される "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, // VSCodeのデフォルトのフォーマッターをprettierに指定 "editor.defaultFormatter": "esbenp.prettier-vscode", // ファイル保存時に自動でprettierが実行される "editor.formatOnSave": true }
設定が効いているか試してみる
実際に自動修正がされるか試してみましょう。
まずはeslintの自動修正を確認します。確認のために一度、.eslintrc.jsonに下記を追加します。
.eslintrc.json
{ "extends": ["next/core-web-vitals", "prettier"], "rules": { "quotes": "error" } }
そして_app.tsxファイルで""を''に変えてみましょう。
すると次のようなエラーになるはずです。
この状態でCommand + sでファイルを保存してみてください。
クォーテーションがダブルクォーテーションに修正されてエラーが消えたのではないでしょうか？
次にprettierの自動修正を試してみましょう。.eslintrc.jsonのrulesを削除して、今度は_app.texファイルで;を消してみましょう。
eslintのruleを追加していないのでエラーは出ていませんが、この状態でCommand + sでファイルを保存してみてください。
自動で;が補完されたのではないでしょうか。
prettierのルール設定
prettierのルールを別途設定したい場合は設定ファイルを作成することで変更が可能です。
例えばデフォルトの設定ではsemiがtrue、singleQuotesがfalseで指定されています。これらを変更したい場合はルートディレクトリにprettier.config.jsを用意して下記のように記述することで変更ができます。
module.exports = { singleQuote: true, semi: false, }
この状態でいずれかのファイルを保存してみてください。
全てのセミコロンが取り除かれ、""が''に変わったのではないでしょうか？
コマンド一つで一気に修正できてしまうのは爽快ですよね。
その他のルールについても下記で確認ができます。
https://prettier.io/docs/en/options.html
おわりに
はじめに書きましたがeslint、prettierはフロント開発には必須です。個人開発をしているけどeslint、prettierをまだ使用していない方やこれから個人開発をする方の参考になれば幸いです。
