【TypeScript】ESLint & Prettier - コード品質維持ガイド

概要

TypeScriptプロジェクトにおいて、ESLintとPrettierを組み合わせて使用することで、コード品質の維持や開発効率が向上します。ESLintはコードの静的解析を通じてエラーや規約違反を検出し、Prettierはフォーマットを自動で整えるツールです。TypeScriptプロジェクトに適した設定方法や、両ツールを効率的に活用するためのベストプラクティスについて解説します。

ESLintとPrettierの概要

ESLintとは

ESLintは、JavaScriptやTypeScriptのコードを静的に解析し、エラーや規約違反を検出するためのツールです。TypeScriptコードに対しても有効で、コードの一貫性や品質向上に役立ちます。

Prettierとは

Prettierは、コードのフォーマット（改行、インデント、空白など）を自動的に整えるツールです。Prettierを使うことで、開発者がコードスタイルに悩む必要がなくなり、プロジェクト全体で統一されたスタイルが保たれます。

ESLintとPrettierの違いと共存の利点

ESLintはコードのエラーやベストプラクティス違反を検出し、Prettierはコードのフォーマットを整えるために使用されます。両者を組み合わせることで、コードのエラー検出とスタイル統一を同時に行い、コードの保守性を高めることが可能です。

TypeScriptでのESLintとPrettierの導入手順

TypeScriptプロジェクトにESLintとPrettierを追加し、互いの設定を調整する方法を紹介します。

必要なパッケージのインストール

まず、プロジェクトに必要なパッケージをインストールします。

# ESLintとその`TypeScript`用プラグイン
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
# PrettierとESLint-Prettier連携用プラグイン
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

上記でインストールしたeslint-config-prettierはESLintとPrettierの競合を解消し、eslint-plugin-prettierはPrettierのフォーマットをESLint経由で実行できるようにします。

ESLintの設定ファイルを作成

プロジェクトのルートに.eslintrc.jsonファイルを作成し、設定を追加します。

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "prettier/prettier": "error",
    "@typescript-eslint/no-unused-vars": "warn",
    "@typescript-eslint/explicit-function-return-type": "off"
  }
}

• extendsには、plugin:prettier/recommendedを追加することでPrettierの設定を有効化します。
• prettier/prettierルールをerrorに設定することで、Prettierのフォーマットに沿っていないコードがエラーとして検出されます。

Prettierの設定ファイルを作成

.prettierrcというファイルをプロジェクトのルートに作成し、コードのスタイル設定を記述します。

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80
}

これにより、セミコロンを付ける、シングルクォートを使用するなどのスタイルが適用され、Prettierのフォーマットが一貫します。

eslintignoreとprettierignoreファイルの作成

ESLintとPrettierによる解析を除外したいファイルやフォルダがある場合、.eslintignoreと.prettierignoreファイルを作成します。

# .eslintignore
node_modules
dist
# .prettierignore
node_modules
dist

これにより、生成物や外部パッケージなどのフォーマット対象外のフォルダが指定できます。

実践的な活用方法

コードフォーマットとLintの自動化

コーディング規約を守りつつ、コードの自動フォーマットを行うには、package.jsonに以下のスクリプトを追加します。

"scripts": {
  "lint": "eslint 'src//*.{js,ts}'",
  "format": "prettier --write 'src//*.{js,ts}'"
}

• lintはESLintを実行し、コード規約に違反する箇所をチェックします。
• formatはPrettierを実行し、コードのフォーマットを整えます。

GitのフックでLintとフォーマットを強制

コードレビュー前に必ずLintとフォーマットを行うために、Huskyやlint-stagedを使用してGitのコミット前に自動でスクリプトを実行させます。

# Huskyとlint-stagedのインストール
npm install --save-dev husky lint-staged
# Huskyの初期化
npx husky install
# Huskyにlint-stagedを設定
npx husky add .husky/pre-commit "npx lint-staged"

package.jsonに以下を追加します。

"lint-staged": {
  "src//*.{js,ts}": ["eslint --fix", "prettier --write"]
}

これにより、コミット時にESLintとPrettierが実行され、規約やスタイルに沿ったコードのみがコミットされます。

IDEとの統合

VSCodeなどのエディタには、ESLintとPrettierの拡張機能があり、保存時に自動でLintやフォーマットを実行できます。これにより、開発中のエラー検出とフォーマットがリアルタイムで行われ、効率的なコーディングが可能です。

ESLintとPrettierの設定ベストプラクティス

• コードベースに合った設定の選択
  プロジェクトやチームのコーディングスタイルに応じて、PrettierやESLintのルールを調整し、柔軟に適用します。

• 競合の解消
  eslint-config-prettierを利用することで、ESLintとPrettierのルールが競合しないように 調整できます。Prettierによるフォーマットが優先される設定にすることで、競合を減らせます。

• 一貫性を重視する
  プロジェクト全体でルールを一貫させ、チーム内でのコードレビューや保守がしやすくなるようにします。

まとめ

TypeScriptプロジェクトにおいて、ESLintとPrettierを活用することで、コードの品質を保ちながら効率的な開発が可能です。ESLintはエラーの検出やコードのクリーンさを保ち、Prettierはコードのフォーマットを自動で行うことで、統一感のあるコードスタイルを実現します。適切な設定や自動化の仕組みを導入することで、メンテナンス性の高いコードベースを築いていきましょう。