在 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中文网其他相关文章！
