はじめに
チーム開発において、コードの品質と統一性は重要な課題です。ESLintとPrettierを適切に設定することで、バグの早期発見、コードの可読性向上、そして開発チーム全体の生産性向上を実現できます。
この記事では、ESLintとPrettierの基本的な設定から、実際のプロジェクトで使える実践的な設定例まで、段階的に解説していきます。
ESLintとPrettierの役割
ESLint:コード品質の番人
- 静的解析ツールとして、コードの潜在的な問題を検出
- バグの原因となりやすいパターンの発見
- チーム内でのコーディング規約の統一
- カスタムルールによる柔軟な品質管理
Prettier:コードフォーマットの統一
- コードフォーマッターとして、見た目の統一
- インデント、改行、スペースの自動調整
- 開発者間でのコードスタイルの違いを解消
- 保存時の自動フォーマットで効率化
環境構築
必要なパッケージのインストール
ESLintとPrettierを効果的に使用するため、プロジェクトの種類に応じて必要なパッケージを段階的にインストールします。
1. 基本パッケージ
# ESLintとPrettierの本体
npm install --save-dev eslint prettier
各パッケージの役割:
- eslint: JavaScript/TypeScriptのコード解析・品質チェックツール
- prettier: コードフォーマッター(見た目の統一)
--save-devを使う理由:
- 開発時のみ必要なツール(本番環境では不要)
-
devDependencies
に追加され、npm install --production
では除外される
2. TypeScriptプロジェクトの場合
# TypeScript用のパーサーとルールセット
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin
各パッケージの詳細:
@typescript-eslint/parser:
- TypeScriptのコードをESLintが理解できる形式に変換
-
.ts
、.tsx
ファイルの構文解析を担当 - 型情報も含めた解析が可能
@typescript-eslint/eslint-plugin:
- TypeScript特有のルールセットを提供
- 例:
@typescript-eslint/no-unused-vars
、@typescript-eslint/no-explicit-any
- 100以上のTypeScript専用ルールを含む
3. Reactプロジェクトの場合
# React用のルールセット
npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks
各パッケージの詳細:
eslint-plugin-react:
- React特有のルールセットを提供
- JSX構文のチェック
- Reactのベストプラクティス強制
eslint-plugin-react-hooks:
- React Hooks専用のルールセット
- Hooksの使用ルール強制(重要!)
4. ESLintとPrettierの統合
# ESLintとPrettierの競合を解決し、統合する
npm install --save-dev eslint-config-prettier eslint-plugin-prettier
各パッケージの詳細:
eslint-config-prettier:
- ESLintのフォーマット関連ルールを無効化
- Prettierと競合するESLintルールを自動的に無効化
-
重要:
extends
配列で最後に指定する必要がある
eslint-plugin-prettier:
- PrettierをESLintルールとして実行
- Prettierのフォーマット結果と異なる場合にESLintエラーを発生
- 保存時にESLintの自動修正でPrettierが実行される
インストール方法の選択
おすすめ:段階的インストール
# 1. 基本パッケージから始める
npm install --save-dev eslint prettier
# 2. プロジェクトに応じて追加
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin
# 3. 必要に応じてReactサポートを追加
npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks
# 4. 最後に統合パッケージを追加
npm install --save-dev eslint-config-prettier eslint-plugin-prettier
段階的インストールの利点:
- 理解しやすい:各パッケージの役割を理解しながら進められる
- トラブル対応:問題が発生した場合に原因を特定しやすい
- 必要最小限:不要なパッケージを入れずに済む
- 学習効果:依存関係や設定の仕組みを理解できる
一括インストール(経験者向け)
# React + TypeScript プロジェクトの場合
npm install --save-dev eslint prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-config-prettier eslint-plugin-prettier
推奨アプローチ:
- 初回導入時:段階的インストールで理解を深める
- 経験者:一括インストールで効率化
- チーム導入:段階的にルールを追加してチーム全体で慣れる
インストール後の確認:
# インストールされたパッケージの確認
npm list --depth=0 --dev
# ESLintが正常に動作するか確認
npx eslint --version
# Prettierが正常に動作するか確認
npx prettier --version
インストール時の注意点:
- 段階的導入:基本パッケージから始めて、必要に応じて追加
- バージョン互換性:各パッケージのバージョンが互換性を持つか確認
- プロジェクト特性:不要なパッケージは入れない(例:React使わないならeslint-plugin-react不要)
5. 全部まとめてインストール
# 一括インストール例(React + TypeScript プロジェクト)
npm install --save-dev \
eslint prettier \
@typescript-eslint/parser @typescript-eslint/eslint-plugin \
eslint-plugin-react eslint-plugin-react-hooks \
eslint-config-prettier eslint-plugin-prettier
6. インストール後の確認
# インストールされたパッケージの確認
npm list --depth=0 --dev
# ESLintが正常に動作するか確認
npx eslint --version
# Prettierが正常に動作するか確認
npx prettier --version
インストール時の注意点:
- パッケージの順序: 依存関係を考慮した順序でインストール
- バージョン互換性: 各パッケージのバージョンが互換性を持つか確認
- プロジェクトタイプ: 不要なパッケージは入れない(例:React使わないならeslint-plugin-react不要)
基本設定ファイル
設定ファイルの配置場所
プロジェクトのディレクトリ構造:
my-project/
├── package.json
├── eslint.config.js # ESLint v9以降の設定ファイル
├── .eslintrc.js # ESLint v8以前の設定ファイル(非推奨)
├── .prettierrc # Prettierの設定ファイル
├── .prettierignore # Prettierが無視するファイル
├── .eslintignore # ESLintが無視するファイル
├── src/
│ ├── index.js
│ ├── components/
│ └── utils/
├── tests/
├── node_modules/
└── README.md
設定ファイルの役割:
- eslint.config.js: ESLintの動作を制御する設定ファイル(プロジェクトルートに配置)
- .prettierrc: Prettierのフォーマット規則を定義するファイル(プロジェクトルートに配置)
- .eslintignore: ESLintがチェックしないファイル・ディレクトリを指定
- .prettierignore: Prettierがフォーマットしないファイル・ディレクトリを指定
ESLint v9以降:Flat Config(推奨)
eslint.config.jsを作成:
// ESLint v9の新しい設定形式(Flat Config)
import js from '@eslint/js';
import prettier from 'eslint-config-prettier';
import prettierPlugin from 'eslint-plugin-prettier';
import typescriptEslint from '@typescript-eslint/eslint-plugin';
import typescriptParser from '@typescript-eslint/parser';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
export default [
// JavaScript基本設定(ESLint推奨ルールを適用)
js.configs.recommended,
// TypeScript用の設定
{
// 対象ファイルを指定(TypeScriptファイルのみ)
files: ['**/*.{ts,tsx}'],
// 言語パーサーの設定
languageOptions: {
parser: typescriptParser, // TypeScriptパーサーを使用
parserOptions: {
ecmaVersion: 2021, // ECMAScript 2021の機能を使用
sourceType: 'module', // ES Modulesを使用
ecmaFeatures: {
jsx: true, // JSX構文を有効化
},
},
},
// 使用するプラグインを登録
plugins: {
'@typescript-eslint': typescriptEslint, // TypeScript用ルール
'prettier': prettierPlugin, // Prettier統合
'react': react, // React用ルール
'react-hooks': reactHooks, // React Hooks用ルール
},
// 適用するルールの設定
rules: {
// TypeScriptの推奨ルールを適用
...typescriptEslint.configs.recommended.rules,
// Prettierのフォーマット違反をエラーとして扱う
'prettier/prettier': 'error',
// 未使用変数をエラー扱い(_で始まる変数は除外)
'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
// React 17+では不要なルールを無効化
'react/react-in-jsx-scope': 'off',
'react/prop-types': 'off',
// React Hooks関連のルール
'react-hooks/rules-of-hooks': 'error', // Hooksの呼び出しルールを強制
'react-hooks/exhaustive-deps': 'warn', // useEffectの依存配列をチェック
},
// React関連の設定
settings: {
react: {
version: 'detect', // Reactバージョンを自動検出
runtime: 'automatic', // React 17+の新JSX Transformを使用
},
},
},
// Prettier設定(必ず最後に配置してフォーマット競合を回避)
prettier,
];
Flat Configの特徴:
-
ESモジュール形式:
import/export
を使用した現代的な書き方 - 配列ベース:設定を配列で管理し、順序で優先度を制御
- より直感的:設定の構造が分かりやすい
- 将来性:ESLint v9以降の標準形式
設定形式の選択指針
ESLint v9以降を使用する場合:
- Flat Config(eslint.config.js)を使用することを強く推奨
- より直感的で保守しやすい設定
- 将来的な互換性を考慮
ESLintバージョンの確認:
# ESLintのバージョンを確認
npx eslint --version
# v9.0.0以降ならFlat Configを推奨
Prettierの設定ファイル
.prettierrcとは、Prettierのフォーマット規則を定義する設定ファイルです。
Prettierとは:
- 自動コードフォーマッター:コードの見た目を統一するツール
- 設定可能:インデント、クォート、改行などのスタイルをカスタマイズ
- 言語対応:JavaScript、TypeScript、CSS、HTML、JSON等に対応
.prettierrcファイル形式:
{
"semi": true, // 文末にセミコロンを追加
"trailingComma": "es5", // ES5で有効な場所に末尾カンマを追加
"singleQuote": true, // シングルクォートを使用
"printWidth": 80, // 1行の最大文字数を80文字に制限
"tabWidth": 2, // インデントを2スペースに設定
"useTabs": false, // タブではなくスペースを使用
"endOfLine": "lf" // 改行コードをLF(Unix形式)に統一
}
各設定項目の詳細:
-
semi: セミコロンの有無(
true
=つける、false
=つけない) -
trailingComma: 末尾カンマ(
"es5"
=ES5準拠、"all"
=すべて、"none"
=なし) -
singleQuote: クォートの種類(
true
=シングル、false
=ダブル) - printWidth: 1行の最大文字数(推奨:80-120文字)
- tabWidth: インデントの幅(推奨:2または4スペース)
-
useTabs: インデント方法(
true
=タブ、false
=スペース) -
endOfLine: 改行コード(
"lf"
=Unix、"crlf"
=Windows、"auto"
=自動)
.prettierrcの他の形式:
// prettier.config.js(JavaScript形式)
module.exports = {
semi: true,
trailingComma: 'es5',
singleQuote: true,
};
// package.jsonに埋め込み
{
"name": "my-project",
"prettier": {
"semi": true,
"singleQuote": true
}
}
実践的な設定例
チーム開発向けのESLint設定
以下は実際のプロジェクトで使用している、より詳細な設定例です:
eslint.config.js:
// チーム開発向けの詳細なESLint設定(Flat Config形式)
import js from '@eslint/js';
import prettierConfig from 'eslint-config-prettier';
import prettierPlugin from 'eslint-plugin-prettier';
import typescriptEslint from '@typescript-eslint/eslint-plugin';
import typescriptParser from '@typescript-eslint/parser';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
export default [
// JavaScript基本設定
js.configs.recommended,
// TypeScript + React設定
{
files: ['**/*.{js,jsx,ts,tsx}'],
languageOptions: {
parser: typescriptParser,
parserOptions: {
ecmaVersion: 2021,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
},
plugins: {
'@typescript-eslint': typescriptEslint,
prettier: prettierPlugin,
react: react,
'react-hooks': reactHooks,
},
rules: {
// === コード品質に関するルール ===
// console.logを警告レベルに(本番前に削除推奨)
'no-console': 'warn',
// debuggerステートメントを禁止(本番環境で問題となるため)
'no-debugger': 'error',
// 基本の未使用変数ルールをオフ(TypeScriptルールを使用)
'no-unused-vars': 'off',
// TypeScriptの未使用変数チェック(_から始まる変数は除外)
'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
// === 可読性向上のルール ===
// 再代入されない変数はconstを強制
'prefer-const': 'error',
// varの使用を禁止(letまたはconstを使用)
'no-var': 'error',
// オブジェクトのプロパティ短縮記法を強制
'object-shorthand': 'error',
// === React固有のルール ===
// React 17+では不要なルールを無効化
'react/jsx-uses-react': 'off',
'react/react-in-jsx-scope': 'off',
// Hooksのルールを強制
'react-hooks/rules-of-hooks': 'error',
// useEffectの依存配列を警告
'react-hooks/exhaustive-deps': 'warn',
// === TypeScript固有のルール ===
// 戻り値の型定義を任意に
'@typescript-eslint/explicit-module-boundary-types': 'off',
// any型の使用を警告
'@typescript-eslint/no-explicit-any': 'warn',
// ?? 演算子の使用を推奨
'@typescript-eslint/prefer-nullish-coalescing': 'error',
// ?. 演算子の使用を推奨
'@typescript-eslint/prefer-optional-chain': 'error',
// === Prettier統合 ===
// Prettierルール違反をエラー扱い
'prettier/prettier': 'error',
},
settings: {
react: {
version: 'detect',
runtime: 'automatic',
},
},
},
// Prettier設定(必ず最後に配置)
prettierConfig,
];
設定の意図:
-
段階的な導入:
warn
から始めて、チームが慣れてからerror
に変更 - TypeScript重視:型安全性を高めるルールを積極的に採用
- React最新仕様対応:React 17+の新JSX Transformに対応
- 実用性重視:厳しすぎるルールは避け、開発効率を重視
プロジェクト別Prettier設定
フロントエンド向け
{
"semi": true, // TypeScriptとの相性を考慮してセミコロンを使用
"trailingComma": "es5", // 古いブラウザ対応のためES5準拠
"singleQuote": true, // JSXの属性との区別を明確化
"printWidth": 100, // モダンなモニターサイズに合わせて拡張
"tabWidth": 2, // フロントエンドの標準的なインデント
"useTabs": false, // チーム間でのタブ設定の違いを避ける
"endOfLine": "lf", // Gitでの改行コード問題を回避
"arrowParens": "avoid", // 単一引数の場合は括弧を省略してスッキリ
"bracketSpacing": true, // オブジェクトの可読性を向上
"jsxSingleQuote": true // JSXでもシングルクォートで統一
}
フロントエンド設定の特徴:
- 可読性重視:100文字まで許可してコードの分割を減らす
- JSX対応:React開発に最適化した設定
- ブラウザ互換性:ES5準拠の末尾カンマで古いブラウザに対応
Node.js/サーバーサイド向け
{
"semi": true, // サーバーサイドでは明確な文の終了を重視
"trailingComma": "all", // Node.jsは新しいためES2017+の末尾カンマを活用
"singleQuote": true, // 文字列の統一性を保つ
"printWidth": 120, // サーバーサイドでは長い行も許可
"tabWidth": 2, // 標準的なインデント
"useTabs": false, // スペースで統一
"endOfLine": "lf" // Unix系サーバーの標準改行コード
}
サーバーサイド設定の特徴:
- 高密度コード:120文字まで許可してファイルサイズを削減
- モダンJS活用:新しいNode.jsの機能を最大限活用
- サーバー環境最適化:Unix系環境に最適化した設定
VS Code統合設定
settings.json
{
// デフォルトのフォーマッターをPrettierに設定
"editor.defaultFormatter": "esbenp.prettier-vscode",
// ファイル保存時に自動でフォーマットを実行
"editor.formatOnSave": true,
// 保存時にESLintで修正可能なエラーを自動修正
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// ESLintを適用するファイルタイプを指定
"eslint.validate": [
"javascript", // .js ファイル
"javascriptreact", // .jsx ファイル
"typescript", // .ts ファイル
"typescriptreact" // .tsx ファイル
]
}
VS Code設定の効果:
- 自動化:保存するだけでフォーマット+ESLint修正が実行
- リアルタイム:コーディング中にエラーが即座に表示
- 統一性:チーム全体で同じフォーマットが適用される
推奨拡張機能
- ESLint
- Prettier - Code formatter
- Error Lens(ESLintエラーの見やすい表示)
Git Hooksとの連携
Git Hooksとは
Git Hooksは、Gitの特定のアクション(コミット、プッシュなど)が実行される前後に、自動的にスクリプトを実行する仕組みです。これを活用することで、コミット前に自動的にコード品質チェックを行えます。
Huskyとlint-stagedの役割
Husky:Git Hooksを簡単に管理
Huskyとは:
- Git Hooksを簡単に設定・管理できるツール
- package.jsonで設定を管理
- チーム全体で同じフックを共有可能
Huskyなしの場合:
# .git/hooks/pre-commit ファイルを手動で作成・管理
# チームメンバーが各自で設定する必要がある
# 設定が複雑で管理が困難
Huskyありの場合:
# package.jsonで設定を管理
# npm installで自動的に設定される
# チーム全体で統一された設定
lint-staged:効率的なファイル処理
lint-stagedとは:
- Gitでステージング(
git add
)されたファイルのみを処理 - プロジェクト全体ではなく、変更されたファイルのみをチェック
- 高速で効率的なリント・フォーマット実行
lint-stagedなしの場合:
# プロジェクト全体をチェック(時間がかかる)
npx eslint src/ # 全ファイルをチェック
# 変更していないファイルも処理される
# 大きなプロジェクトでは非常に時間がかかる
lint-stagedありの場合:
# 変更されたファイルのみをチェック(高速)
# 例:src/component.jsを変更した場合
npx eslint src/component.js # 変更されたファイルのみ
実践的な設定例
Huskyでコミット前チェック
# Huskyとlint-stagedのインストール
npm install --save-dev husky lint-staged
# Huskyの初期化
npx husky install
# pre-commitフックを作成
npx husky add .husky/pre-commit "npx lint-staged"
何が起こるか:
-
git commit
を実行 - Huskyがpre-commitフックを実行
- lint-stagedが変更されたファイルのみを処理
- ESLint + Prettierが実行される
- 問題があればコミットが中断される
package.json設定
{
// lint-stagedの設定:ステージされたファイルのみを処理
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"eslint --fix", // ESLintで修正可能なエラーを自動修正
"prettier --write", // Prettierでフォーマット
"git add" // 修正されたファイルを再度ステージング
]
},
"scripts": {
// プロジェクト全体のリント実行
"lint": "eslint src --ext .js,.jsx,.ts,.tsx",
// リント実行+自動修正
"lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
// 全ファイルのフォーマット実行
"format": "prettier --write src/**/*.{js,jsx,ts,tsx,json,css,md}"
}
}
実際の動作例
Step 1: コードを編集
// src/example.js を編集
var userName='John'; // 問題のあるコード
Step 2: ファイルをステージング
git add src/example.js
Step 3: コミット実行
git commit -m "Add user name"
Step 4: 自動実行される処理
# Huskyが以下を自動実行
npx lint-staged
# lint-stagedが以下を自動実行
eslint --fix src/example.js # ESLintで修正
prettier --write src/example.js # Prettierでフォーマット
git add src/example.js # 修正されたファイルを再ステージング
Step 5: 修正された結果
// src/example.js が自動修正される
const userName = 'John'; // 修正されたコード
設定の詳細説明
スクリプトの使い分け:
- lint: コードレビュー前のチェック用
- lint:fix: 開発中の問題修正用
- format: プロジェクト全体の整理用
lint-stagedの処理順序:
-
eslint --fix
: 自動修正可能な問題を修正 -
prettier --write
: コードフォーマットを統一 -
git add
: 修正されたファイルを再度ステージング
導入のメリット
開発効率向上:
- コミット前に自動的に品質チェック
- 手動でのリント実行を忘れる心配がない
- チーム全体で統一された品質基準
パフォーマンス向上:
- 変更されたファイルのみを処理(高速)
- 大規模プロジェクトでも快適に動作
- CI/CDの負荷軽減
品質保証:
- 問題のあるコードがリポジトリに入るのを防止
- 一貫したコードフォーマット
- チームメンバー間でのコード品質統一
CI/CDパイプラインでの活用
GitHub Actions設定例
name: Code Quality Check
on: [push, pull_request]
jobs:
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: '18'
cache: 'npm'
- run: npm ci
- run: npm run lint
- run: npm run format -- --check
パフォーマンス最適化
ESLintキャッシュの活用
# .eslintcacheファイルでキャッシュを有効化
npx eslint --cache src/
除外設定の最適化
.eslintignore
node_modules/
dist/
build/
*.min.js
coverage/
.prettierignore
node_modules/
dist/
build/
package-lock.json
*.min.js
*.min.css
トラブルシューティング
よくある問題と解決策
実際の開発現場でよく遭遇する問題と、その解決方法を詳しく解説します。
1. ESLintとPrettierの競合
問題の症状:
- 保存時にESLintとPrettierが互いにコードを修正し合う
- 同じファイルで無限にフォーマットが変更される
- 「Expected 1 space after ','」のようなフォーマット関連のエラーが頻発
解決策:
// eslint.config.js
import js from '@eslint/js';
import prettier from 'eslint-config-prettier';
// 他のインポート...
export default [
js.configs.recommended,
// 他の設定...
prettier, // 🔥 重要:必ず最後に配置
];
なぜ最後に配置するのか:
- Flat Configでは配列の順序で優先度が決まる
-
prettier
設定がESLintのフォーマット関連ルールを無効化 - これにより、フォーマットはPrettierに完全に委任される
2. TypeScriptパースエラー
問題の症状:
Parsing error: Cannot read file '***'
- TypeScript固有の構文でESLintエラーが発生
- 型情報を必要とするルールが正常に動作しない
解決策:
// eslint.config.js
import typescriptParser from '@typescript-eslint/parser';
export default [
{
files: ['**/*.{ts,tsx}'],
languageOptions: {
parser: typescriptParser,
parserOptions: {
// TypeScriptの設定ファイルを明示的に指定
project: './tsconfig.json',
// tsconfig.jsonの基準ディレクトリを指定
tsconfigRootDir: process.cwd(),
// ECMAScript設定
ecmaVersion: 2020,
sourceType: 'module',
},
},
// その他の設定...
},
];
3. React 17+でのJSX Transform対応
問題の症状:
- React 17+で
import React from 'react'
が不要なのにESLintエラー - 「'React' is not defined」エラーが発生
- 新しいJSX Transformが認識されない
解決策:
// eslint.config.js
export default [
{
files: ['**/*.{jsx,tsx}'],
settings: {
react: {
version: 'detect', // Reactバージョンを自動検出
runtime: 'automatic', // 🔥 新しいJSX Transformを使用
},
},
rules: {
// React 17+では不要なルールを無効化
'react/react-in-jsx-scope': 'off',
'react/jsx-uses-react': 'off',
},
},
];
🚀 実践ハンズオン:15分で体験するESLint/Prettier
理論だけでなく、実際に手を動かしてESLint/Prettierの効果を体験してみましょう。
Step 1: プロジェクトの準備
# 新しいプロジェクトを作成
mkdir eslint-prettier-demo
cd eslint-prettier-demo
# package.jsonを生成
npm init -y
# package.jsonにESモジュールサポートを追加
npm pkg set type="module"
# 必要なパッケージをインストール
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier @eslint/js
注意: ESLint v9以降では、設定ファイルにESモジュール形式を使用するため、package.json
に"type": "module"
を追加する必要があります。
Step 2: 問題のあるコードを作成
まず、意図的に問題のあるコードを作成して、ESLint/Prettierの効果を確認します。
src/sample.jsを作成:
// 意図的に問題のあるコード
var userName='John Doe';
const userAge=25
let isActive = true;
function getUserInfo( ){
console.log('Getting user info...');
if(isActive){
return{name:userName,age:userAge,active:isActive}
}
return null
}
const users=['Alice','Bob','Charlie',];
users.forEach(user=>{
console.log(`Hello ${user}`)
})
// 未使用の変数
const unusedVariable = 'This will not be used';
Step 3: ESLint設定を作成
eslint.config.jsを作成:
import js from '@eslint/js';
import prettier from 'eslint-config-prettier';
import prettierPlugin from 'eslint-plugin-prettier';
export default [
// JavaScript基本設定
js.configs.recommended,
// 全ファイルに適用する設定
{
files: ['**/*.js'],
plugins: {
prettier: prettierPlugin,
},
rules: {
'prettier/prettier': 'error',
'no-unused-vars': 'error',
'no-console': 'warn',
'prefer-const': 'error',
'no-var': 'error',
},
},
// Prettier設定(最後に配置)
prettier,
];
Step 4: Prettier設定を作成
.prettierrcを作成:
{
"semi": true,
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2,
"useTabs": false
}
Step 5: 問題を確認する
# ESLintでコードをチェック
npx eslint src/sample.js
# 実際に出力されるエラー例
# src/sample.js
# 1:1 error Unexpected var, use let or const instead no-var
# 1:13 error Replace `'John·Doe'` with `'John·Doe'` prettier/prettier
# 2:17 error Missing semicolon prettier/prettier
# 5:1 error 'unusedVariable' is assigned a value but never used no-unused-vars
Step 6: 自動修正を体験
# ESLintで自動修正可能な問題を修正
npx eslint src/sample.js --fix
# 修正後のコードを確認
cat src/sample.js
修正後のコード: (自動修正である程度エラーが消えますが、プログラムの構造上手動で修正しないといけないエラーが残ります)
// 自動修正された結果
const userName = 'John Doe';
const userAge = 25;
let isActive = true;
function getUserInfo() {
console.warn('Getting user info...');
if (isActive) {
return { name: userName, age: userAge, active: isActive };
}
return null;
}
const users = ['Alice', 'Bob', 'Charlie'];
users.forEach((user) => {
console.log(`Hello ${user}`);
});
// 未使用の変数(手動削除が必要)
const unusedVariable = 'This will not be used';
Step 7: package.jsonにスクリプトを追加
{
"scripts": {
"lint": "eslint src --ext .js",
"lint:fix": "eslint src --ext .js --fix",
"format": "prettier --write src/**/*.js"
}
}
Step 8: 実際の開発フローを体験
- コードを書く:
// src/newFile.js
const message="Hello World"
console.log(message)
- チェックする:
npm run lint
- 修正する:
npm run lint:fix
- 結果を確認:
// 自動修正後
const message = 'Hello World';
console.log(message);
🎯 ハンズオンで学んだこと
ESLintの効果:
- コードの潜在的な問題を発見
- 統一されたコーディング規約の適用
- 自動修正による効率化
Prettierの効果:
- 一貫したコードフォーマット
- 手動でのフォーマット調整が不要
- チーム間でのスタイルの統一
実際の開発での活用:
- 保存時の自動修正
- コミット前の品質チェック
- 継続的な品質維持
このハンズオンを通じて、ESLint/Prettierの基本的な使い方と効果を体験できました。
理解度チェッククイズ
記事の理解度を確認するクイズです。答えは記事内容を参考にしてください。
Q1. ESLintとPrettierの役割分担
問題: ESLintとPrettierの主な役割の違いを説明してください。
答えを見る
答え:
- ESLint: コードの品質管理(バグの発見、コーディング規約の統一、潜在的問題の検出)
- Prettier: コードフォーマットの統一(見た目の整形、インデント・改行・スペースの調整)
ESLintは「コードの意味や品質」を、Prettierは「コードの見た目」を管理します。
Q2. 設定ファイルの優先順位
問題: eslint.config.js
の配列で、なぜprettierConfig
を最後に配置する必要があるのでしょうか?
答えを見る
答え:
Flat Configでは配列の順序で優先度が決まるため、prettierConfig
を最後に配置することで、ESLintとPrettierの競合するルールを無効化できます。これにより、フォーマットに関するルールはPrettierに任せ、ESLintは品質管理に集中できます。
Q3. Git Hooksの活用
問題: lint-staged
を使用する利点を2つ挙げてください。
答えを見る
答え:
- パフォーマンス向上: ステージされたファイルのみを処理するため、プロジェクト全体を処理するより高速
- 品質保証: コミット前に自動的にリント・フォーマットが実行されるため、問題のあるコードがリポジトリに入るのを防げる
その他の利点:チーム全体でのコード品質統一、手動でのリント実行忘れ防止など
Q4. TypeScript設定の理解
問題: 以下の設定の意図を説明してください。
'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }]
答えを見る
答え:
この設定は「未使用変数をエラーとして扱うが、アンダースコア(_)で始まる変数は除外する」という意味です。
-
'error'
: 未使用変数をエラーレベルで検出 -
{ argsIgnorePattern: '^_' }
: 「_」で始まる変数名はチェック対象外
これにより、意図的に使用しない変数(例:const [_, setValue] = useState()
)でエラーが発生しなくなります。
Q5. 実践的な設定選択
問題: フロントエンド開発とサーバーサイド開発で、PrettierのtrailingComma
設定が異なる理由を説明してください。
- フロントエンド:
"trailingComma": "es5"
- サーバーサイド:
"trailingComma": "all"
答えを見る
答え:
- フロントエンド(es5): 古いブラウザ(IE11など)との互換性を考慮。ES5で有効な場所のみに末尾カンマを追加
- サーバーサイド(all): Node.js環境では新しいECMAScript機能が使用可能。ES2017+の末尾カンマを活用してコード変更時のdiff を見やすくする
環境の制約に応じて、適切な設定を選択することが重要です。
チャレンジ問題:
あなたの開発環境に最適なESLint/Prettier設定を考えて、実際に設定してみましょう!
まとめ
ESLintとPrettierの適切な設定により、以下の効果が期待できます:
- コード品質の向上:潜在的なバグの早期発見
- 開発効率の向上:自動フォーマットによる時間短縮
- チーム生産性の向上:統一されたコーディング規約
- メンテナンスコストの削減:可読性の高いコードベース
継続的なコード品質管理には、チーム全体での運用ルール策定と、定期的な設定見直しが重要です。プロジェクトの特性に合わせて設定をカスタマイズし、より良い開発体験を実現していきましょう。