在前端开发中，React 已经成为了很多团队首选的框架，而 Babel 则是使用最广泛的编译工具。虽然使用 Babel 能够使我们编写时使用最新的 ECMAScript 语法，同时也能够使用一些实验性质的语言特性，但是这也会导致在使用 ESLint 进行代码检查时产生很多错误提示信息。本篇文章将会介绍如何使用 ESLint 对 Babel 编写的 React 代码进行检查，并且解决常见的错误提示信息。
配置 ESLint
在开始前，需要确保项目中已经安装了 ESLint，并且安装了相应的插件用于支持 Babel，比如 babel-eslint。在项目根目录下新建一个 .eslintrc 的文件，并添加以下内容：
-- -------------------- ---- ------- - ---------- ---------------------- ---------------------------- --------- --------------- ------ - ---------- ----- ----------- ----- ------ ---- -- -------- - ------------------- - - -展开代码
这份配置文件中，extends 中除了默认的推荐规则，还包含了 plugin:react/recommended，这个插件配置了一些针对 React 的规则。parser 指定了使用 babel-eslint 作为解析器，env 中指定了代码运行的环境，这里我们指定了浏览器、CommonJS 和 ES6 环境。rules 则是我们配置的规则，这里我们关闭了一个 react/prop-types 的规则，这是因为我们的 React 项目中有使用 PropTypes 检查 props 类型的代码，但是这个规则默认是开启的，所以我们需要手动关闭。
解决常见的错误提示信息
'React' is defined but never used
这个错误提示信息表明我们使用了 React，但是却没有在代码中使用到。由于我们使用了 Babel，所以需要在代码中手动引入 React。使用以下方式从 React 中导出需要使用的组件或者函数：
import React, { Component } from 'react';
这样我们就可以在代码中使用 React，同时也不会再出现这个错误提示信息了。
'setState' is a method, but invoking it looks like a function
Babel 允许我们使用最新的 ECMAScript 语法，包括箭头函数，但是在使用箭头函数时可能会出现 TypeError: Cannot read property 'setState' of undefined 错误。这是因为箭头函数中的 this 不是组件实例，而是指向了词法作用域的 this。我们可以使用 Class Properties 和箭头函数来绑定函数内部的 this，比如：
-- -------------------- ---- ------- ----- ----------- ------- --------- - ----- - - ------ - -- ----------- - -- -- - --------------- ------ ---------------- - - --- -- -------- - ------ - ----- ------- -------------------------------- ------------ ------------------------- ------ -- - -展开代码
这里我们使用了 Class Properties 来初始化 state，同时也使用了箭头函数来定义 handleClick，这样就可以在箭头函数中正确地使用 this.setState 了。
JSX not allowed in files with extension '.js'
如果你不想在文件名后添加 .jsx 扩展名，那么你需要在 Babel 配置文件中将 babel-plugin-transform-react-jsx 的 pragma 选项改成 'h'，如下所示：
-- -------------------- ---- ------- - ---------- - -------------------- --------------------- -- ---------- - - ------------------------------------ - --------- --- - - - -展开代码
然后你需要在代码中使用 h() 而不是 <div> 和 <p> 这样的 JSX 语法。如果你使用了其他的模板库，比如 Preact，那么你需要将 pragma 修改成 'h'。
结束语
本文介绍了如何使用 ESLint 对 Babel 编写的 React 代码进行检查，并且解决了常见的错误提示信息。虽然这些操作可能需要花费一些时间去完成，但是在团队协作中使用 ESLint 能够帮助代码风格保持一致，同时也能够提升代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c2796e314edc2684bc4752
