ESLint + Prettierの設定方法

この記事は、エンジニア初心者の筆者が、自身の学びを記録するためにまとめたものです。万が一内容に誤りがありましたら、何卒ご容赦ください。
https://eslint.org/
https://prettier.io/

ESLintをインストールする

npm install -D eslint

ESLintの初期設定をする

npx eslint --init

設定を選ぶ

設定がすべて終わると、プロジェクトに「eslint.config.js」というファイルが作られます。

✔ How would you like to use ESLint? · problems
質問内容: 「ESLintをどうやって使いたいですか？」
problems: コードの問題（エラーや警告）を見つけることに特化する設定。

✔ What type of modules does your project use? · esm
質問内容: 「プロジェクトではどんなモジュール（ファイル形式）を使っていますか？」
esm (ES Modules): JavaScriptの新しいモジュール形式で、importやexportを使う形式のことです。ほとんどのプロジェクトではこれを使います。

✔ Which framework does your project use?・react
質問内容: 「どのフレームワークを使っていますか？」

✔ Does your project use TypeScript?・typeScript
質問内容: 「プロジェクトでTypeScriptを使っていますか？」
TypeScriptを使うプロジェクトでは、ESLintもTypeScript向けのルールが必要になります。

✔ Where does your code run?・browser
質問内容: 「コードはどこで動きますか？」
browser: ウェブブラウザ上で動かすことを想定しているので選択しました。

The config that you've selected requires the following dependencies
説明: 今回の設定を正しく動かすには、以下のパッケージ（ツール）が必要です：
eslint（ESLintの本体）
globals（グローバル変数をESLintに認識させる）
@eslint/js（ESLintのJavaScript向け設定）
typescript-eslint（TypeScript用のESLint設定）
eslint-plugin-react（React用のESLintルール）
✔ Would you like to install them now?・Yes
質問内容: 「これらのツールを今すぐインストールしますか？」・yes
「はい」を選ぶと、必要なツールが自動的にインストールされます。

✔ Which package manager do you want to use?・npm
質問内容: 「どのパッケージ管理ツールを使いますか？」
npm：使用しているため選択。

package.jsonに設定を追加

scriptsの中に以下を追加します。

"scripts": {
    "lint": "eslint src",//srcディレクトリの構文チェックを行いたい為
  },

構文チェックを試してみる

npm run lint

エラーが出ます。

10:5   error  'React' must be in scope when using JSX                                                                                                                                                react/react-in-jsx-scope

エラー:react/react-in-jsx-scope は、React17以降でReactをJSXのスコープに含める必要がなくなったにもかかわらず、ESLintのルールが古い仕様をチェックしているために発生します。
Reactの推奨設定にルールを上書きしエラーを回避します。

pluginReact.configs.flat.recommended,
  {
    rules: {
      "react/react-in-jsx-scope": "off",//このルールを無効化する
    },
  },

npm run lintをしても再度エラーが出ます。

[APP.tsx]
12:9  error  Using target="_blank" without rel="noreferrer" (which implies rel="noopener") is a security risk in older browsers: see https://mathiasbynens.github.io/rel-noopener/#recommendations  react/jsx-no-target-blank

target="_blank" を使用したリンクがある場合、古いブラウザでのセキュリティリスクを防ぐために rel="noreferrer" または rel="noopener noreferrer" を付ける必要があるためAPP.tsx内にrel="noreferrer"を追加します。

<div>
        <a href="https://vite.dev" target="_blank" rel="noreferrer">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank" rel="noreferrer">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>

これで構文が通ります。

ESLintで自動的に構文を修正する方法

package.json内の "scripts"に下記を追加します。

"lint:fix": "eslint src --fix",

これを追加することで、エラーを自動修正してくれます。
（例えばさきほどのrel="noreferrer"を自動追加してくれるなど。）

---

Prettierをインストールする

npm install -D prettier

もしくはprettierの拡張機能をインストールし有効にします。

カスタマイズの方法

プロジェクトディレクトリにprettier.config.jsを作成します。

/** @type {import('prettier').Config} */  ←tsを適応させる
const config = {};
　　　　　　　　　　　　　　　　　　　　　　　←ここに設定を書いていく
export default config;

setting.jsonファイルの設定が下記のようになっているか確認します。

"editor.formatOnSave": true,

true を設定すると、ファイルを保存した瞬間に、指定されたフォーマッターが自動的にコードを整形します。これにより、手動でフォーマットコマンドを実行する手間が省けます。

prettieのルールに従い全てのファイルを修正したい場合。

例
"Hello World"を、'Hello World'表記にしたい

prettier.config.jsに

"singleQuote": true
を記入します。

package.jsonに"format": "prettier --write ."を追加します。

"scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint src",
    "lint:fix": "eslint src --fix",
    "preview": "vite preview",
    "format": "prettier --write ."
  },

npm run format

で整形されます。