メインコンテンツまでスキップ

Eslint

link: https://eslint.org/

ESLint は人気のある JavaScript リンター、またはコード分析ツールで、JavaScript コードに潜在するエラー、バグ、その他の問題をチェックします。事前に定義されたルールやガイドラインを実施することで、開発者が一貫性のある高品質なコードを書けるように設計されています。

ESLint は、以下のような様々な問題をチェックするように設定することができます。​

  • JavaScript の言語仕様に関連する構文エラーやその他の問題
  • コードの書式やスタイルに関する問題（インデントや命名規則の統一など
  • コーディングスタイルと構造に関するベストプラクティスやその他のガイドライン
  • パフォーマンスに関する潜在的な問題
  • 異なる環境やフレームワークとの互換性に関連する問題

ESLint は、コマンドラインから実行したり、コードエディタや統合開発環境（IDE）に統合して、開発者がコードを書く際にリアルタイムにフィードバックを提供することができます。また、開発者がカスタムルールやプラグインを書いて、その機能を拡張することもできます。

ESLint の主な利点の一つは、高度に設定可能であることです。開発者は、あらかじめ設定されたルールセットを使用するか、特定のニーズに基づいて独自の設定を作成することを選択することができます。さらに、ルールやプラグインを作成・管理することでプロジェクトに貢献する開発者の大規模で活発なコミュニティがあります。

Installation​

npm install --save-dev eslint eslint-config-react-app

Configuration​

ヒント

React の設定を使用する場合は、eslint-config-react-app をインストールします。

.eslintrc
{
  "env": {
    "node": true
  },
  "ignorePatterns": ["!.storybook", "build", "coverage", "public"],
  "extends": [
    "react-app",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "overrides": [
    {
      "files": ["**/*.tsx", "**/*.ts"],
      "rules": {
        "react/prop-types": "off",
        "@typescript-eslint/explicit-module-boundary-types": "off",
        "@typescript-eslint/naming-convention": [
          "error",
          {
            "selector": "typeAlias",
            "format": ["PascalCase", "UPPER_CASE"]
          }
        ]
      }
    }
  ]
}