React プロジェクトに ESLint を追加する方法

コードの品質を向上させ、コードの一貫性を高め、バグを回避するには、React プロジェクトに Lint ルールを追加することが必須です。

この記事は MyDevPa.ge ブログで初めて公開されました。ソフトウェア開発者向けの役立つチュートリアルとしてチェックしてください。

ESLint と呼ばれる人気のあるオープンソース JavaScript lint ツールがあります。これは、JavaScript コード内で見つかった不正なパターンを自動的に検出するために使用されます。

React プロジェクトに lint ルールを追加する手順を段階的に説明します。

ESLint のインストール

まず、実稼働環境では ESLint が必要ないため、React プロジェクトに devDependency として ESLint をインストールする必要があります。

インストールするには、以下のコマンドを使用します。

npm i -D eslint

ESLintの初期化

次に、プロジェクトのルート フォルダーに構成ファイル .eslintrc.json を追加して、ESLint 構成を初期化する必要があります。

これはサンプル構成例です。

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": ["react", "import", "jsx-a11y"],
  "rules": {
    // Here we can add our custom rules.
  },
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

.eslintrc.json 内に extends と plugin プロパティを追加します。

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": ["react", "import", "jsx-a11y"]
}

さまざまなプラグインを追加したため、最初に以下のコマンドを実行してそれらを devDependency としてインストールする必要があります。

npm install -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

ルールの追加

ルールは構成目的で使用されます。ルールのエラー レベルは 3 つの異なる方法で設定できます。

• オフ または 0: これによりルールがオフになります。
• warn または 1: これにより、ルールが警告としてオンになります。
• error または 2: これにより、ルールがエラーとしてオンになります。

? JavaScript 文字列のすべてのメソッドのチートシート

設定ファイルにいくつかのルールを追加しましょう。上記のすべてのルールのリストから選択した他のルールを追加できます。

"rules": {
  "react/prop-types": 0,
  "indent": ["error", 2],
  "linebreak-style": 1,
  "quotes": ["error", "double"]
}

リンティング用のスクリプトの追加

最後になりましたが、ESLint を実行するためのコマンドを package.json の「scripts」プロパティに追加しましょう。

"scripts": {
  "lint": "eslint \"src/**/*.{js,jsx}\"",
  "lint:fix": "eslint \"src/**/*.{js,jsx}\" --fix"
}

おめでとうございます。これらのコマンドのいずれかを実行しようとすると、うまくいくはずです。

この後、コードの一貫性と品質を確保するために、引き続き lint ルールを好みに合わせてカスタマイズできます。

MyDevPa.ge にアクセスして、無料のポートフォリオ Web サイトを 1 分で作成できます!

以上がReact プロジェクトに ESLint を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。