この記事の要点
• ESLintでコード品質チェック、Prettierでフォーマットを統一する
• Flat Config形式でモダンなESLint設定を構築する
• husky+lint-stagedでGitコミット時に自動チェックを実行する
このチュートリアルで学ぶこと
- ESLintセットアップ
- Prettierセットアップ
- ESLint + Prettier連携
- VS Code設定
- Git hooks
実践メモ: npm init @eslint/configの対話式セットアップで、プロジェクトに合った初期設定が自動生成���れます。
Step 1: ESLintセットアップ
npm init @eslint/config
# 対話式で設定
# - To check syntax and find problems
# - JavaScript modules (import/export)
# - React / Vue / None
# - TypeScript: Yes
# - Browser / Node
Step 2: eslint.config.js (Flat Config)
import js from '@eslint/js';
import typescript from '@typescript-eslint/eslint-plugin';
import tsParser from '@typescript-eslint/parser';
export default [
js.configs.recommended,
{
files: ['**/*.ts', '**/*.tsx'],
languageOptions: {
parser: tsParser,
parserOptions: {
project: './tsconfig.json',
},
},
plugins: {
'@typescript-eslint': typescript,
},
rules: {
'@typescript-eslint/no-unused-vars': 'error',
'@typescript-eslint/no-explicit-any': 'warn',
},
},
];
Step 3: Prettierセットアップ
npm install -D prettier
// .prettierrc
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 80
}
# .prettierignore
node_modules
dist
.next
ポイント: Prettierはフォーマット専用、ESLintはコード品質チェック専用と役割を明確に分けるのが鍵です。
Step 4: ESLint + Prettier連携
npm install -D eslint-config-prettier eslint-plugin-prettier
// eslint.config.js
import prettier from 'eslint-plugin-prettier';
import prettierConfig from 'eslint-config-prettier';
export default [
// ... 他の設定
prettierConfig,
{
plugins: { prettier },
rules: {
'prettier/prettier': 'error',
},
},
];
Step 5: package.jsonスクリプト
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"format": "prettier --write .",
"format:check": "prettier --check ."
}
}
注意: eslint-config-prettierを必ず最後に読み込んでください。ESLintのフォーマット系ルールとPrettierの競合を防ぎます。
Step 6: VS Code設定
// .vscode/settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}
// .vscode/extensions.json
{
"recommendations": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode"
]
}
実践メモ: editor.formatOnSaveとsource.fixAll.eslintを両方設定すると、保存のたびにフォーマットとリントが自動実行されます。
Step 7: Git hooks (lint-staged)
npm install -D husky lint-staged
npx husky init
// package.json
{
"lint-staged": {
"*.{ts,tsx,js,jsx}": ["eslint --fix", "prettier --write"],
"*.{json,md,css}": ["prettier --write"]
}
}
# .husky/pre-commit
npx lint-staged
ベストプラクティス
- Prettier は フォーマット
- ESLint は コード品質
- 両方を組み合わせて使用
- CI/CDでもチェック
まとめ
ESLintとPrettierでコードスタイルを統一し、品質を維持できます。lint-stagedでGit hooks自動化も忘れずに設定しましょう。
注意: npx husky init後に.husky/pre-commitファイルの内容を必ず確認してください。デフォルトの内容をnpx lint-stagedに書き換える必要があります。