将 ESLint 集成到 Create React App 中

前言

在前端团队中，代码风格的一致性和代码质量的保障是非常重要的。ESLint 是一个强大的统一代码风格工具，并且可以发现代码错误和安全问题。Create React App 是一个流行的 React 应用程序构建工具，让我们可以快速创建一个 React 应用程序初始模板。本文将解释如何集成 ESLint 到 Create React App 中，帮助我们确保代码风格的一致性和代码质量。

安装

要将 ESLint 集成到 Create React App 中，需要安装两个 NPM 包：

• eslint: ESLint 核心包。
• eslint-config-react-app: Create React App 官方推荐的 ESLint 配置包。

使用以下命令进行安装：

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

配置

Create React App 提供了一种简单的方式来集成 ESLint。只需要在项目根目录下创建一个 .eslintrc 文件，并将以下代码添加到文件中：

{
  "extends": "react-app"
}

这里的 react-app 是在安装 ESLint 配置包 eslint-config-react-app 时添加的。这些包提供了一组基本的规则，用于保持代码风格一致性，并使用 ES6 和 React 特定环境中的变量。

启用

要启用 ESLint，在 package.json 文件的 scripts 中添加以下行：

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
+   "lint": "eslint src/",
  }
}

这个新的 lint 脚本将启动 ESLint 并检查 src 目录下的所有 JavaScript 代码。要运行它，请使用以下命令：

npm run lint

你也可以在 npm start 命令中添加 npm run lint && 来检查代码是否符合规范。

配置自定义规则

我们可以在 .eslintrc 文件中部分添加一些自定义规则，例如限制最大行数、禁用 console 等，对于需要私人定制风格的团队非常有用。下面是一个示例规则：

{
  "extends": "react-app",
  "rules": {
    "no-console": "warn",
    "max-lines": ["error", 300],
    "react/no-unescaped-entities": 0
  }
}

结论

通过集成 ESLint 到 Create React App 中，我们可以保持代码风格的一致性和代码质量。希望这篇文章能给你们带来一些思路和实践经验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67186e10ad1e889fe22b257d