ESLint & Prettier設定入門

入門 | 35分 で読める | 2025.12.17

公式ドキュメント

このチュートリアルで学ぶこと

  • 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は似て見えますが、役割が違います。Prettierはコードの見た目を自動整形し、ESLintはバグにつながる書き方やプロジェクト規約を検出します。両方で同じルールを持つと衝突しやすいため、責務を分けることが大切です。

チーム開発では、エディタ保存時の整形、コミット前チェック、CIでの検証をそろえると効果が出ます。個人の環境だけで動いている状態だと、メンバーごとに結果が変わりやすくなります。

導入時の確認

  • formatとlintのコマンドを分けているか
  • 保存時にPrettierが実行されるか
  • CIでlintエラーを検出できるか
  • ルールを増やしすぎて開発速度を落としていないか

まとめ

ESLintとPrettierでコードスタイルを統一し、品質を維持できます。lint-stagedでGit hooks自動化も忘れずに設定しましょう。

注意: npx husky init後に.husky/pre-commitファイルの内容を必ず確認してください。デフォルトの内容をnpx lint-stagedに書き換える必要があります。

参考リソース

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR