はじめに
アプリケーションエンジニア 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 に以下を追記します。（すでに書いてあるはず）
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 の設定ファイルです。
{
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"endOfLine": "lf"
}
空の .prettierignore を作成します。
フォーマット対象としないファイルがあれば、そのファイル名を記述します。
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 なものだけ書くとよいです。
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 に記述しておくとプロジェクト内で共有できます。
{
"recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
}
.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
おわりに
心穏やかに開発できるようになりました。
水の呼吸 拾壱ノ型 凪。