ESlintとPretterを正しく理解して, VScodeに導入する(導入編)

前提

これはあらゆる記事を参考に著者がESlintとPretterを理解しようという記事です．
なので，参考記事をベタ貼り・コードがそのままなどがあると思います．

できるだけ，誤解がないように参考した部分と自分のところを分けます．
参考にさせていただける著者さまに悪意はないので，暖かい心で見守って欲しいです．

理解編があります -> ESlintとPretterを正しく理解して, VScodeに導入する(理解編)

ESlintのインストール

install

$ npm show eslint # eslint最新バージョンの確認(latestを確認)
$ npm init @eslint/config # 最新バージョンがインストールされるっぽい

2個目をやってみると．

✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · typescript
✔ Where does your code run? · browser
The config that you've selected requires the following dependencies:

eslint, globals, @eslint/js, typescript-eslint, eslint-plugin-react
✔ Would you like to install them now? · No
Successfully created /usr/src/app/udemy-household-app/eslint.config.mjs file.
You will need to install the dependencies yourself.

自分で設定してみてって感じに言われる．
もし，Yesだったら．

eslint, globals, @eslint/js, typescript-eslint, eslint-plugin-react
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm
☕️Installing...

インストールがはじまる．
多分，2個目が導入という点では楽なのかな？

npmによるデバック

なんと，ESLint + Prettierの導入（パッケージ版 + VSCodeプラグイン版）^[1]によると，でバックが楽になる方法が書いてありました．

package.jsonに以下を記述する。
(npm run lint or lint:fix でコードチェック or 自動整形ができる)

<中略>
  "scripts": {
    "lint": "eslint src", // srcの部分は適用したいディレクトリやファイルを指定
    "lint:fix": "eslint src --fix",
  },
<中略>

または, はじめてのESLint^[2]

  "scripts": {
    "lint": "eslint --ext ts,tsx .",
    "lint:fix": "eslint --ext ts,tsx --fix .",
  },

違いのポイント

特徴	第一のスクリプト	第二のスクリプト
対象ディレクトリ	srcディレクトリ内	プロジェクト全体（ルート以下の全体）
対象拡張子	デフォルトで.jsファイルのみ	明示的に.tsと.tsxファイルを指定
TypeScript対応	.tsや.tsxファイルは対象外	.tsと.tsxファイルを完全にサポート

つまずき！！！

ここでなんと現状で作ってみるとファイルが違うことに気づきました．
eslint.config.mjs と .eslintrc.jsです．

なので，最新版のeslint.config.mjsで動くようにしていく必要性があります．

eslint.config.mjsで動かす方法

npm init @eslint/latestで作られたファイルの内容は以下でした．

/** @type {import('eslint').Linter.Config[]} */
export default [
  {files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]},
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
];

あまりにも，参考の雰囲気^[1:1][2:1]と違いすぎます．
というか勉強したplugin, extends, rulesとかなさすぎ．

ってことで，ChatGPT 4oに手伝ってもらいました．(2024/12/20)

eslint.config.mjs

import globals from "globals"; // 各種環境（ブラウザ、Node.jsなど）のグローバル変数を提供
import pluginJs from "@eslint/js"; // JavaScriptのESLint推奨設定を提供するプラグイン
import tseslint from "typescript-eslint"; // TypeScript用のESLintルールセット
import pluginReact from "eslint-plugin-react"; // React用のESLintルールセット

/** @type {import('eslint').Linter.Config[]} */
// ESLintの設定を定義する配列形式のFlat Config
export default [
  {
    // チェック対象のファイルを指定
    // js, mjs, cjs, ts, jsx, tsx の拡張子を持つすべてのファイルが対象
    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]
  },
  {
    // 使用するグローバル変数を指定
    // ブラウザ環境のグローバル変数（例: window, document）を有効化
    languageOptions: { globals: globals.browser }
  },
  // JavaScriptの推奨ルールを追加
  pluginJs.configs.recommended,
  // TypeScriptの推奨ルールを展開して追加
  ...tseslint.configs.recommended,
  // Reactの推奨ルールを追加
  pluginReact.configs.flat.recommended,
];

なんか，pluginsとか，rulesとかどこいったの？
となったので，それも聞いてみます．

plugin

2. pluginsが必要になるケース
## 独自ルールを使用する場合
推奨ルールセットではカバーされない独自ルールを使用したい場合は、pluginsを設定して有効化します。
例: eslint-plugin-jsdocやeslint-plugin-import。

## 推奨設定を使用しない場合
推奨設定を使わず、自分でルールをカスタマイズしたい場合は、プラグインを登録してからルールを設定する必要があります。

## プラグインのルールだけを部分的に使用する場合
推奨ルールをすべて適用せず、特定のルールだけ使いたい場合。
プラグインのルールだけを部分的に使用する場合

そのときに必要用のファイル例も入れておきます．

plugin必要時の```eslint.config.mjs```

eslint.config.mjs

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";
import jsdoc from "eslint-plugin-jsdoc";

/** @type {import('eslint').Linter.FlatConfig[]} */
export default [
  {
    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
    languageOptions: {
      globals: globals.browser,
    },
    plugins: {
      jsdoc, // 独自のJSDocルールを追加
    },
    rules: {
      ...pluginJs.configs.recommended.rules, // JavaScript推奨ルール
      ...tseslint.configs.recommended.rules, // TypeScript推奨ルール
      ...pluginReact.configs.flat.recommended.rules, // React推奨ルール
      "jsdoc/check-alignment": "warn", // JSDocの整列をチェック
    },
  },
];

Prettierの導入

今回はコード整形はPrttierを導入します．

まずnpm install

必要なパッケージをインストールします．

npm install --save-dev eslint eslint-config-prettier
# --save-devオプションで開発環境にインストールする

eslint.config.mjsの設定

では，eslint.config.mjsはどのようになるのでしょうか？

先ほどのファイルのコメントにルールとかいてあります．
実は，このファイルは以下のようにも表せ，Prettierを追加すると以下のようになります．

eslint.config.mjs

import globals from "globals"; // グローバル変数設定
import pluginJs from "@eslint/js"; // JavaScript推奨設定
import tseslint from "typescript-eslint"; // TypeScript用の設定
import pluginReact from "eslint-plugin-react"; // React用の設定
import prettier from "eslint-config-prettier"; // Prettier設定を無効化

/** @type {import("eslint").Linter.FlatConfig[]} */
export default [
  {
    files: ["**/*.{js,mjs,cjs,ts,tsx,jsx}"], // 対象ファイルを指定
    languageOptions: {
      parser: tseslint.parser, // TypeScript用パーサー
      globals: globals.browser, // ブラウザ環境のグローバル変数
    },
    plugins: {
      react: pluginReact, // Reactプラグイン
      typescript: tseslint, // TypeScriptプラグイン
    },
    rules: {
      // 各種推奨ルールを適用
      ...pluginJs.configs.recommended.rules, // JavaScript推奨ルール
      ...tseslint.configs.recommended.rules, // TypeScript推奨ルール
      ...pluginReact.configs.flat.recommended.rules, // React推奨ルール
      "no-console": "warn", // consoleの使用を警告
    },
  },
  {
    // Prettierによる競合するフォーマットルールを無効化
    rules: {
      ...prettier.rules,
    },
  },
];

このようにして，まず書くパッケージのルールを追加します．
その次に，競合する部分のPrettierルールを上書きすることで，無効化しています．

npm runで動くようにする.

最後に```npm run``で動くようにする．

package.json

    "lint": "eslint .",
    "lint:fix": "eslint --fix .",
    "prettier": "npx prettier --write .",
    "format": "npm run prettier && npm run lint"

動かし方

npm run lint
npm run lint:fix
npm run prettier
npm run format

脚注

1. ESLint + Prettierの導入（パッケージ版 + VSCodeプラグイン版）

2. はじめてのESLint