在 React 專案中加入 Linting 規則對於提高程式碼品質、使程式碼更一致並避免錯誤是必須的。
本文首次發佈於 MyDevPa.ge 博客，請查看對軟體開發人員有用的教學。
有一個流行的開源 JavaScript linting 工具，稱為 ESLint，它用於自動檢測 JavaScript 程式碼中發現的不正確模式。
以下是為 React 項目新增 linting 規則的逐步方法：
首先，我們需要在 React 專案中安裝 ESLint 作為 devDependency，因為我們在生產中不需要它們。
要安裝，我們將使用以下命令。
npm i -D 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
規則用於配置目的。我們可以透過三種不同的方式來設定規則的錯誤等級。
？ JavaScript 字串備忘單所有方法
讓我們在設定檔中加入一些規則，我們可以根據我們從上述所有規則清單中的選擇添加任何其他規則。
"rules": {
"react/prop-types": 0,
"indent": ["error", 2],
"linebreak-style": 1,
"quotes": ["error", "double"]
}
最後但並非最不重要的一點是，讓我們在 package.json “scripts” 屬性中加入一些指令來執行 ESLint。
"scripts": {
"lint": "eslint \"src/**/*.{js,jsx}\"",
"lint:fix": "eslint \"src/**/*.{js,jsx}\" --fix"
}
恭喜，現在如果您嘗試執行這些命令中的任何一個，它應該可以成功！
此後您可以繼續根據自己的喜好自訂 linting 規則，以確保程式碼的一致性和品質。
造訪 MyDevPa.ge，在一分鐘內免費建立您的免費作品集網站！
以上是如何在 React 專案中新增 ESLint的詳細內容。更多資訊請關注PHP中文網其他相關文章！
