在React项目中使用Eslint代码检查工具及常见问题

在在React项目中使用项目中使用Eslint代码检查工具及常见问题代码检查工具及常见问题

主要介绍了在React项目中使用Eslint代码检查工具及常见问题，小编觉得挺不错的，现在分享给大家，也给大

家做个参考。一起跟随小编过来看看吧

背景背景

最近使用 create-react-app 创建了一个项目。但是众所周知的是，这个脚手架创建的项目并没有默认加入 Eslint 等 lint 插件来

规范代码。

考虑到项目中很多项目没有使用类似的代码检查工具，为了规范开发。这次有必要记录一下流程。

使用使用 Eslint 流程流程

? How would you like to configure ESLint? (Use arrow keys)

Use a popular style guide

❯ Answer questions about your style

Inspect your JavaScript file(s)

选择“Answer questions about your style”，后面有一些问题，根据实际进行选择。

上述操作完成之后，会帮我们创建一个基础的 .eslintrc.yml 文件。我们也可以使用 touch .eslintrc.yml 自行创建。

2. 安装安装 babel-eslint

由于项目中需要使用到 ES2015 的语言规范，因此需要安装 babel-eslint ：

npm install --save-dev babel-eslint

安装完成之后，我们需要在 .eslintrc.yml 中修改配置

plugins:

- react

特别提醒：YML语法规则中表示数组格式：- 开头，后面为数组元素，如此处的 react。属性值中若不含特殊字符，可以不加

上双引号。

4. 安装安装 Airbnb

到现在为止，我们只使用了一些默认创建的校验规则，为了避免我们自己按照 Eslint 的规则一个一个来个性化定制规则，很是

麻烦。这里我们使用 GitHub - airbnb/javascript: JavaScript Style Guide 规范来定义规则。这就需要安装如下插件：

npm i --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y

接着，我们修改 .eslintrc.yml 配置，将扩展插件变更为 Airbnb ：

extends: "airbnb"