Node.js Linting & Formatting
1. コード品質 (Code Quality)
一貫したコード品質とスタイルを維持することは、特にチーム開発における Node.js プロジェクトにおいて極めて重要です。
これにより、以下のメリットが得られます。
- コードの可読性とメンテナンス性の向上
- バグの早期発見と防止
- チーム内での一貫したコーディングスタイルの確立
- コードレビューの自動化
- 開発者エクスペリエンス（DX）の改善
注意： このガイドでは、リンティングとフォーマットの共通エコシステムを共有している JavaScript と TypeScript の両方のツールセットについて解説します。
2. ESLint: JavaScript/TypeScript のリンティング
ESLint は、JavaScript および TypeScript のコード内のパターンを特定して報告する、もっともポピュラーなリンティングツールです。高度なカスタマイズが可能で、以下の機能をサポートしています。
- カスタムルールと設定の作成
@typescript-eslint/parserによる TypeScript サポート- フレームワーク固有のルールのためのプラグインエコシステム
- 一般的な問題の自動修正（Auto-fixing）
2.1 インストール
npm install --save-dev eslint2.2 包括的な ESLint 設定例
以下は、TypeScript をサポートする Node.js プロジェクト向けの標準的な .eslintrc.json 設定ファイルです。
{
"env": {
"node": true,
"es2021": true,
"browser": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["@typescript-eslint"],
"rules": {
"semi": ["error", "always"], // セミコロンを必須にする
"quotes": ["error", "single"], // シングルクォートを使用する
"indent": ["error", 2], // インデントはスペース2つ
"no-console": "warn", // console.log は警告を表示
"no-unused-vars": "warn" // 未使用の変数は警告を表示
}
}2.3 ESLint の高度な活用
基本的なリンティング以外にも、ESLint はコード品質を維持するための強力な機能を提供します。
よく使うコマンド:
# すべての JavaScript/TypeScript ファイルをリンティング
npx eslint .
# 自動修正可能な問題を修正
npx eslint --fix .
# 特定のファイルをリンティング
npx eslint src/index.js3. Prettier: コードフォーマッター
Prettier は、コードをパースし、独自のルールで再出力することで一貫したスタイルを強制する「Opinionated（強いこだわりを持つ）」なコードフォーマッターです。
- JavaScript、TypeScript、JSX、CSS、SCSS、JSON などをサポート
- 最小限の設定で済む強力なデフォルト設定
- ESLint やその他のツールとの統合
- エディタとの統合サポート
ヒント： フォーマット（整形）には Prettier を、潜在的なエラーの検出やコードパターンの強制には ESLint を使用するのがベストプラクティスです。
3.1 インストール
npm install --save-dev --save-exact prettier3.2 包括的な Prettier 設定例
以下は、一般的なオプションを含めた .prettierrc 設定ファイルです。
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 100,
"bracketSpacing": true,
"arrowParens": "avoid"
}3.3 Prettier の高度な活用
Prettier はワークフローに合わせてカスタマイズや統合が可能です。
よく使うコマンド:
# すべてのファイルを整形
npx prettier --write .
# 変更を加えずにフォーマットをチェック
npx prettier --check .
# 特定のファイルを整形
npx prettier --write src/index.js4. ESLint + Prettier のシームレスな統合
ESLint と Prettier のルールが衝突するのを防ぐために、適切な統合設定を行う必要があります。
重要： ルールの競合を防ぐために、以下のパッケージをインストールしてください。
npm install --save-dev eslint-config-prettier eslint-plugin-prettierその後、ESLint の設定を更新します：
{
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended" // Prettier 統合を最後に追加
]
}5. エディタの高度な統合
プロのヒント： 生産性を最大化するために、ファイルを保存する際に自動で修正とフォーマットが行われるようエディタを設定しましょう。
5.1 VS Code: 究極のセットアップ
VS Code で最高の開発体験を得るには、以下の手順に従ってください。
- 以下の拡張機能をインストールします。
- ESLint
- Prettier - Code formatter
- EditorConfig for VS Code
- Error Lens (インラインでのエラーハイライト用)
- VS Code の
settings.jsonに以下の設定を追加します。
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
"prettier.requireConfig": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}5.2 その他のエディタの設定
- WebStorm/IntelliJ: ESLint と Prettier のサポートが組み込まれています。
- Atom:
linter-eslintとprettier-atomパッケージをインストールしてください。 - Sublime Text:
SublimeLinterとSublimeLinter-eslintをインストールしてください。
6. Husky と lint-staged による Git フック
コミット前に自動でフォーマットとリンティングを実行する Pre-commit フックを設定することで、不適切なコードがリポジトリに混入するのを防ぎます。
なぜ Pre-commit フックを使うのか？ コミット前に自動的にスタイル上の問題を修正することで、チーム全体で一貫したコード品質を保証できるからです。
6.1 インストール
npm install --save-dev husky lint-staged6.2 設定 (package.json)
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"eslint --fix",
"prettier --write"
],
"*.{json,md,yml}": [
"prettier --write"
]
}
}7. 高度なベストプラクティス
7.1 モノリポジトリ (Monorepo) でのセットアップ
モノリポジトリ構造を使用するプロジェクトの場合：
// ルートの package.json
{
"workspaces": ["packages/*"],
"scripts": {
"lint": "yarn workspaces run lint",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\""
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.0.0",
"@typescript-eslint/parser": "^5.0.0",
"eslint": "^8.0.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"husky": "^7.0.4",
"lint-staged": "^12.0.0",
"prettier": "^2.5.0",
"typescript": "^4.5.0"
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"eslint --fix",
"prettier --write"
],
"*.{json,md,yml,yaml}": [
"prettier --write"
]
}
}7.2 パフォーマンスの最適化
大規模プロジェクトでは、ESLint のパフォーマンスを最適化しましょう。
// .eslintrc.js
module.exports = {
cache: true, // キャッシュを有効化
cacheLocation: '.eslintcache', // キャッシュファイルの場所
ignorePatterns: ['**/node_modules/**', '**/dist/**'], // 無視するパターン
parserOptions: {
project: './tsconfig.json', // TypeScript の場合のみ
projectFolderIgnoreList: ['**/node_modules/**']
}
};7.3 エディタ間の一貫性を保つ EditorConfig
異なるエディタや IDE 間でコーディングスタイルを維持するために、.editorconfig ファイルを追加します。
# EditorConfig の詳細: https://EditorConfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false
[*.{json,yml}]
indent_style = space
indent_size = 2
[*.{cmd,sh}]
indent_style = tab7.4 CI/CD への統合
CI/CD パイプラインにリンティングとフォーマットのチェックを追加します。
# .github/workflows/ci.yml
name: CI
on: [push, pull_request]
jobs:
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: '16'
- run: npm ci
- run: npm run lint
- run: npm run format:check8. リンティングのベストプラクティス
- ベースとなる設定（
eslint:recommendedなど）から始め、必要に応じて拡張する - ルールの重要度（
error、warn、off）を一貫させる - 例外的なルールがある場合は、コメントでその理由をドキュメント化する
- ESLint とプラグインのバージョンを定期的にアップデートする
- TypeScript を使用している場合は、TypeScript 固有のルールを活用する
9. フォーマットのベストプラクティス
- 1行の長さを適切に保つ（80〜120文字程度）
- 引用符（シングルまたはダブル）のスタイルを一貫させる
- セミコロンの使用を一貫させる
- Diff を綺麗にするために、オブジェクトや配列には末尾のカンマ（Trailing commas）を使用する
- 保存時に自動フォーマットされるようエディタを設定する
10. チームでのワークフロー
- ESLint と Prettier の設定をチーム全体で共有する
- CI/CD パイプラインにリンティングとフォーマットのチェックを組み込む
- Git フック（Husky）を使用して、問題を早期に発見する
- コードスタイルの決定事項をドキュメント化する
- コードスタイルガイドを定期的に見直し、更新する