在 React 项目中配置 ESLint-JavaScript中文网-JavaScript教程资源分享门户

在 React 项目中配置 ESLint

随着前端技术的日新月异，React 作为一个非常流行的前端框架，已经成为了许多开发者的首选。然而，在开发大型项目时，代码风格与规范化的问题也越来越受到重视。这时候，ESLint 就成为了开发者们的朋友，它可以帮助我们编写出更加规范化的代码，并避免一些常见的错误。

ESLint 是一个开源的 JavaScript Lint 工具，可让开发者根据自己的代码规则，获得代码优化提示和错误信息。利用 ESLint 来检验代码符合特定的规范，在代码实现的风格上得到保证，项目的可维护性也会得到有效提高。在 React 项目中，配置 ESLint 非常重要，让我们来学习如何实现。

一、安装 ESLint

使用 ESLint 需要先全局安装，运行如下命令：

npm install -g eslint

这里我们以 React Create App 创建的项目为例。在项目中运行如下命令，安装 eslint 和相关依赖：

npm install eslint eslint-plugin-react eslint-config-react-app -D

二、eslint 配置

在项目根目录下创建 .eslintrc.js 文件，填充以下内容：

// www.javascriptcn.com code example
module.exports = {
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": [
    "plugin:react/recommended",
    "eslint:recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "indent": [
      "error",
      2
    ],
    "linebreak-style": [
      "error",
      "windows"
    ],
    "quotes": [
      "error",
      "single"
    ],
    "semi": [
      "error",
      "always"
    ]
  }
};

在这个配置文件中，我们指定了代码的运行环境（browser 和 es6）以及 parserOptions。同时，我们配置了错误校验规则，比如设置了缩进为两个空格（indent），以及每行末尾必须加分号（semi）。

三、集成到编辑器中

使用 ESLint 是为了在开发过程中及时的发现代码错误，并及时对代码进行调整，所以我们需要将 ESLint 集成到开发过程中。

1.安装编辑器相关插件

针对不同编辑器，需要安装不同的 ESLint 插件才能进行集成。比如我们可以利用 ESLint 将代码错误信息直接显示到编辑器中，从而进行修复。这里我们以 Visual Studio Code 为例，建议使用 ESLint 插件，在 VSCode 应用商店中搜索 ESLint 插件后进行安装。

2.开启自动保存

我们在编辑代码的过程中，可能无时无刻都在对代码进行修改。为了尽量提高我们的代码质量，在代码保存时，我们需要及时的检查是否符合规范。

设置自动保存，在 vscode 中选择文件 > 首选项 > 设置中，进行配置：

"editor.formatOnSave": true

四、lint 录入 npm 包命令

为了在代码提交时，发现错误或者不符合规范的代码，我们可以增加代码提交之前自动检查。同时，客户端使用包的时候也可以进行检验，为了达到这个目的，我们可以在 package.json 中增加 lint 检查命令：

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

这里我们使用了 Eslint 对 src 目录下的所有文件进行检查，lint 命令可以用于校验代码。

最后，在提交代码时，增加 Git Hook 对代码进行检验，防止错误代码进入代码库：

"husky": {
  "hooks": {
    "pre-commit": "npm run lint"
  }
}

五、结语

通过以上步骤，我们已经成功的为开发的 React 项目增加整洁而规范的代码检查。我们可以在编辑器中获取到关于代码规范的实时反馈，为我们代码的升级和维护提供了更高的效率。阅读本篇文章，相信您已经了解了如何在 React 项目中配置 ESLint，并且将其集成到开发者的工作流程中。

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

在 React 项目中配置 ESLint

接着读