TypeScriptプロジェクトの品質を向上させる重要なツールとして、ESLintとTSLintがあります。本記事では、これらのLintツールの導入方法と効果的な活用方法について解説します。

ESLintとは

ESLintは現在最も広く使われているJavaScript/TypeScript用の静的解析ツールです。コードの問題を早期に発見し、一貫性のあるコーディングスタイルを維持するのに役立ちます。

ESLintの導入手順

# 必要なパッケージのインストール
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

`.eslintrc.js`の基本設定：

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  rules: {
    // カスタムルールをここに記述
  }
};

TSLintについて

TSLintは以前TypeScript向けの主要なLintツールでしたが、現在はメンテナンスモードとなっており、ESLintへの移行が推奨されています。

TSLintからESLintへの移行

既存のTSLintプロジェクトを使用している場合は、以下の手順で移行できます：

1. TSLintの設定を削除

npm uninstall tslint
rm tslint.json

2. ESLintの設定を追加（上記のESLint導入手順を参照）

ESLintの効果的な設定

推奨ルールセット

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
  ]
}

よく使用するルール設定

{
  "rules": {
    "@typescript-eslint/explicit-function-return-type": "warn",
    "@typescript-eslint/no-explicit-any": "error",
    "@typescript-eslint/no-unused-vars": "error"
  }
}

VS Code との連携

VS Codeでリアルタイムにエラーを検出するには：

1. VS Code の ESLint 拡張機能をインストール

2. `settings.json`に以下を追加：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "typescript"
  ]
}

自動修正の実行

package.jsonにスクリプトを追加：

{
  "scripts": {
    "lint": "eslint . --ext .ts",
    "lint:fix": "eslint . --ext .ts --fix"
  }
}

コマンドラインから実行：

npm run lint     # エラーチェック
npm run lint:fix # 自動修正

まとめ

  • ESLintは現在のTypeScriptプロジェクトで推奨される静的解析ツール
  • TSLintからESLintへの移行が推奨される
  • VS Codeとの連携で開発効率が向上
  • 自動修正機能で一貫したコードスタイルを維持

適切なLintツールの導入により、コードの品質向上、バグの早期発見、開発効率の向上が期待できます。