はじめに

アプリケーションエンジニア 3 年生の鎌田です。

最近、ある新規開発を（ほぼ）一人で担当することになりました。
普段はシニアエンジニアがサクッとやってしまう Lint や開発環境まわりの設定を自分で組みました。

具体的には、Vite × React × TypeScript の構成に、ESLint と Prettier を導入しました。
余計な差分を減らして開発を快適にする ことを目的に、「特にカスタムをしないプレーンな設定」をゴールとしました。

使用技術

主なパッケージのバージョンです。

Vite: v7.1.7
React: v19.1.1
TypeScript: v5.9.3
ESLint: v9.36.0
Prettier: v3.6.2

導入手順

1. ESLint を導入する

npm create vite@latest すると、ESLint は自動でインストールされます。
多くの場合、この手順はスキップできると思います。

ESLint とその他必要なパッケージをインストールします。

npm install --save-dev eslint @eslint/js typescript typescript-eslint

eslint.config.js に以下を追記します。（すでに書いてあるはず）

eslint.config.js

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
+     js.configs.recommended,
+     tseslint.configs.recommended,
      reactHooks.configs['recommended-latest'],
      reactRefresh.configs.vite,
    ],
    // ...
  }
]);

ESLint のこの設定ファイルの書き方は v8 から導入された新しいもので、Flat Config と言うようです。

2. Prettier を導入する

Prettier と eslint-config-prettier をインストールします。

If you use ESLint, install eslint-config-prettier to make ESLint and Prettier play nice with each other. It turns off all ESLint rules that are unnecessary or might conflict with Prettier.

npm install --save-dev prettier eslint-config-prettier

以下のような .prettierrc を作成します。
Prettier の設定ファイルです。

.prettierrc

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "endOfLine": "lf"
}

空の .prettierignore を作成します。
フォーマット対象としないファイルがあれば、そのファイル名を記述します。

eslint.config.js に以下を追記します。

eslint.config.js

+ import eslintConfigPrettier from "eslint-config-prettier/flat";
  // other imports

  export default defineConfig([
    globalIgnores(['dist']),
+   eslintConfigPrettier,
    {
      files: ['**/*.{ts,tsx}'],
      // ...
    }
  ]);

3. eslint-plugin-import を導入する

eslint-plugin-import をインストールします。

npm install --save-dev eslint-plugin-import

eslint.config.js に以下を追記します。
import/no-unresolved の ignore には、ESLint が解決できなくて OK なものだけ書くとよいです。

eslint.config.js

  import eslintConfigPrettier from 'eslint-config-prettier/flat';
+ import importPlugin from 'eslint-plugin-import';
  // other imports

  export default defineConfig([
    // ...
    eslintConfigPrettier,
    {
      files: ['**/*.{js,ts,tsx}'],
      extends: [
        js.configs.recommended,
        tseslint.configs.recommended,
        reactHooks.configs['recommended-latest'],
        reactRefresh.configs.vite,
+       importPlugin.flatConfigs.recommended,
+       importPlugin.flatConfigs.typescript,
      ],
      // ...
+     rules: {
+       'import/order': [
+         'error',
+         {
+           alphabetize: { order: 'asc' },
+           'newlines-between': 'always',
+         },
+       ],
+       'import/no-unresolved': [
+         'error',
+         {
+           ignore: [
+             '\\.svg$',
+             '@tailwindcss/vite',
+             '@vitejs/plugin-react',
+             'eslint/config',
+             'typescript-eslint',
+           ],
+         },
+       ],
+     },
    },
  ]);

4. vscode と連携する

拡張機能 ESLint と Prettier - Code Formatter をインストールします。

.vscode/extensions.json に記述しておくとプロジェクト内で共有できます。

.vscode/extensions.json

{
  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
}

.vscode/settings.json に次のように追記すると、ファイル保存時にフォーマットが効くようになります。

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },
  // prettier の設定
  "prettier.configPath": "./frontend/app/.prettierrc",
  "prettier.ignorePath": "./frontend/app/.prettierignore",
  "prettier.requireConfig": true,
  // eslint の設定
  "eslint.enable": true,
  "eslint.useFlatConfig": true,
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
}

コマンドで実行したい場合は、次のコマンドを使用します。

npx eslint . --fix
npx prettier . --write

おわりに

心穏やかに開発できるようになりました。
水の呼吸拾壱ノ型凪。

参考