如何在 React 專案中新增 ESLint

在 React 專案中加入 Linting 規則對於提高程式碼品質、使程式碼更一致並避免錯誤是必須的。

本文首次發佈於 MyDevPa.ge 博客，請查看對軟體開發人員有用的教學。

有一個流行的開源 JavaScript linting 工具，稱為 ESLint，它用於自動檢測 JavaScript 程式碼中發現的不正確模式。

以下是為 React 項目新增 linting 規則的逐步方法：

安裝 ESLint

首先，我們需要在 React 專案中安裝 ESLint 作為 devDependency，因為我們在生產中不需要它們。

要安裝，我們將使用以下命令。

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": [
    "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

新增規則

規則用於配置目的。我們可以透過三種不同的方式來設定規則的錯誤等級。

• 關閉或0：這將關閉規則。
• 警告 或 1：這會將規則開啟為警告。
• 錯誤或2：這會將規則打開為錯誤。

？ JavaScript 字串備忘單所有方法

讓我們在設定檔中加入一些規則，我們可以根據我們從上述所有規則清單中的選擇添加任何其他規則。

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

新增 Linting 腳本

最後但並非最不重要的一點是，讓我們在 package.json “scripts” 屬性中加入一些指令來執行 ESLint。

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

恭喜，現在如果您嘗試執行這些命令中的任何一個，它應該可以成功！

此後您可以繼續根據自己的喜好自訂 linting 規則，以確保程式碼的一致性和品質。

造訪 MyDevPa.ge，在一分鐘內免費建立您的免費作品集網站！

以上是如何在 React 專案中新增 ESLint的詳細內容。更多資訊請關注PHP中文網其他相關文章！