ESLint 之 airbnb 规范在 React 项目中的应用
ESLint 是一个 JavaScript 的代码检查工具，可以帮助我们保持代码风格的统一、规范 JavaScript 代码，避免出现一些常见的错误，提高开发效率。
在前端开发中，React 是很多人都在使用的框架，为了能够更好地配合 React，我们可以使用 eslint-config-airbnb 这个包中的规则。它是 Airbnb 公司针对 ECMAScript 6+ 和 React 编写的一套 ESlint 配置规范，包含了很多实用的规则来更好地规范 React 项目。下面我们来看一下如何在 React 项目中应用它。
一、安装配置
首先需要安装 ESLint 和 eslint-config-airbnb：
npm install --save-dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
然后在项目的根目录下创建一个 .eslintrc 文件，配置如下：
{
"extends": "airbnb",
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
}
}这里我们选择了 extends 为 airbnb，还自定义了一个规则：.jsx 文件需要以 .js 或 .jsx 结尾。另外在 React 手写 JSX 语法时，一般通过将组件名第一个字母大写的方式来标识该元素是 React 组件，我们需要在对应的规则里关闭这个处理:
"react/jsx-pascal-case": [2, { "allowAllCaps": true }]二、具体应用
接下来针对几个常用的 React API 进行讲解。
- setState，不允许直接覆盖
在 React 的生命周期函数中，我们会用到内置的 setState 方法来更新 state。在使用 setState 的时候，我们应该避免直接覆盖 state 的值，而是使用深度合并（deep merge）的方法来更新 state。下面是一组针对 setState 的规则：
"react/no-direct-mutation-state": 2, "react/no-this-in-sfc": 2, "react/no-unused-state": 2, "react/prefer-stateless-function": 1, "react/prop-types": 2, "react/react-in-jsx-scope": 2, "react/require-render-return": 2, "react/sort-comp": 0,
这些规则确保我们不会直接操作 state，并且在组件需要更新 state 的时候，我们会去使用 setState 来进行更新。另外需要注意一下，如果我们仅仅是展示性组件，可以尽可能地避免使用 state，而更多地使用 props，这样不仅更符合 React 的设计理念，也有助于更好地避免 React 的性能问题。
- 虚拟 DOM 的优化
React 的一个特性就是通过状态（state）的改变来重新渲染组件，由于渲染需要消耗大量的资源，React 也提供了一些优化技巧来减小性能瓶颈。
我们可以借助 eslint-plugin-react 中的一些规则，来避免在渲染中出现潜在的错误或问题，例如：
// javascriptcn.com 代码示例 "react/no-access-state-in-setstate": 2, "react/no-array-index-key": 2, "react/no-danger": 2, "react/no-danger-with-children": 2, "react/no-multi-comp": 2, "react/no-string-refs": 2, "react/no-unescaped-entities": 2, "react/no-unknown-property": 2, "react/prefer-es6-class": 2, "react/prop-types": 2, "react/react-in-jsx-scope": 2,
这些规则能够辅助我们减小不必要的重绘次数，提升访问体验。
- 事件处理函数以及事件绑定
React 中的事件处理方式和我们平时绑定事件的方式不太一样，我们需要通过箭头函数的方式调用 event.preventDefault() 方法来处理。另外，在绑定事件的时候，我们也需要注意这些规则：
// javascriptcn.com 代码示例
"react/button-has-type": 2,
"react/jsx-closing-bracket-location": 2,
"react/jsx-curly-brace-presence": 2,
"react/jsx-curly-newline": 2,
"react/jsx-curly-spacing": 2,
"react/jsx-equals-spacing": 2,
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"react/jsx-key": 2,
"react/jsx-max-depth": 2,
"react/jsx-no-bind": 2,
"react/jsx-no-comment-textnodes": 2,
"react/jsx-no-duplicate-props": 2,
"react/jsx-no-literals": 2,
"react/jsx-no-target-blank": 2,
"react/jsx-no-undef": 2,
"react/jsx-props-no-multi-spaces": 2,
"react/jsx-props-no-spreading": 1,
"react/jsx-sort-props": 2,
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/no-danger": 0,
"react/no-did-mount-set-state": 2,
"react/no-did-update-set-state": 2,
"react/no-find-dom-node": 2,
"react/no-is-mounted": 2,
"react/no-redundant-should-component-update": 2,
"react/no-render-return-value": 2,
"react/no-string-refs": 2,
"react/no-this-in-sfc": 2,
"react/no-unescaped-entities": 2,
"react/no-unused-prop-types": 2,
"react/no-unused-state": 2,
"react/no-will-update-set-state": 2,
"react/prefer-stateless-function": 1,
"react/prefer-es6-class": 2,
"react/prop-types": 2,
"react/react-in-jsx-scope": 2,
"react/require-render-return": 2,
"react/self-closing-comp": 2,
"react/sort-comp": 2,
"react/style-prop-object": 2,
"react/void-dom-elements-no-children": 2,这些规则能够帮助我们检查代码中是否有未处理的情况，并且可以在编码期帮助我们发现一些引起性能问题的事件处理函数。
四、总结
以上的规则只是 eslint-config-airbnb 规范中的一小部分，如果想要查看更多规则，可以去官网了解。在 React 项目中使用 ESLint 是提高代码质量和开发效率的一个好办法。结合 React 的生命周期函数、虚拟 DOM 的优化以及常用的事件处理方式，可以让代码更好地遵循 React 框架的规范，以更加高效的方式开发项目。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6583ba27d2f5e1655de8c5e6