プロジェクトことはじめ。Next.jsでESLintとPrettierによるコード整形を適用する方法。

Next.jsでコードフォーマットを適用させる。

https://ics.media/entry/17030/

コードフォーマットはテキストエディタに組み込まれていたりしますが、開発者の環境ごとに違いがある。その差異をなくすため、Node.jsを用いてコードフォーマットを適用するのがPrettier。

このように整形してくれる。

let   hoge  = func (
  parameter1,   parameter2, parameter3,    parameter4,
 parameter6,  parameter7,
       parameter8,
            );

↓整形後

let hoge = func(
  parameter1,
  parameter2,
  parameter3,
  parameter4,
  parameter6,
  parameter7,
  parameter8
);

Prettierのインストール

npm i -D prettier

{
  "scripts": {
    "format": "prettier --write src"
  },
  "devDependencies": {
    "prettier": "^3.0.0"
  }
}

とするとsrcフォルダの中のファイルをすべて適用し、修正した後にwrite（保存）してくれる。

コードフォーマットを使うには

npm run format

ESLintを使う

Prettierはコードフォーマットで整形をするがコードの解析は行わない。あわせてESLintを使うとコードの静的解析を行い、未使用の変数、不必要なブロックなどをチェックしてくれ、未然のバグを防ぐことに役立つ。

ESLintをPrettierと競合を起こさずに使うには以下のコマンドでインストールを行う。

npm i -D eslint eslint-config-prettier eslint-config-standard prettier

eslint-config-prettierは、Prettierと競合する可能性のあるESLintのルールを無効にするための設定。ESLintとPrettierを同時に使用する場合、この設定を適用することでルールの競合を避けることができる。

eslint-config-standardはJavaScriptの「Standard」スタイルガイドに従うESLintのルールセット。これを使用すると、Standardスタイルのコーディング規約に従ったコードを維持することができる。

次に、.eslintrc.jsonファイルを作成し、以下を記述。

{
  "env": {
    "browser": true
  },
  "extends": [
    "standard",
    "prettier"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  }
}

"env": ESLintに対して、ブラウザのグローバル変数にアクセス可能であること伝達。window や document などのブラウザ特有のオブジェクトをコード内で安全に使用できるという意味。

"extends": ESLintに既に定義されている設定を拡張するために使用。この例では、"standard" と "prettier" の二つの設定を拡張。

"parserOptions": ESLintがコードを解析する際に使用するパーサーのオプション。
"ecmaVersion": "latest": 最新のECMAScript標準に従ってコードを解析。
"sourceType": "module": コードがECMAScriptモジュール（import や export 文を使用する）として扱われることを伝達。

最後にpackage.jsonファイルを以下のように変更。

{
  "scripts": {
    "format": "eslint src --fix && prettier --write src"
  },
}

これでnpm run formatを使うとPrettierで整形とESLintが適用されるようになる。

追記

"extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "next/core-web-vitals",
    "prettier"
  ],

TypeScriptのサポート、ESLintが推奨する一般的なJavaScriptルールのセットを適用。これにより、"standard"よりも広範なエラー検出が可能になる。また、"next/core-web-vitals"を使用することで、Next.jsフレームワークに特化したパフォーマンス関連のルールが適用される。