在前端开发中，代码质量的保障非常重要。最常见的做法是使用代码检查工具，在代码编写过程中及时发现问题并修复。
而 eslint 就是非常著名的 JavaScript 代码检查工具之一。他可以提供一些代码风格的检查规则，比如代码缩进、逗号、变量声明等等。
在这篇文章中，我们会介绍 eslint 的一个插件包——eslint-config-button-platform的使用方法。
什么是 eslint-config-button-platform
eslint-config-button-platform 是一个 eslint 扩展插件，提供了一套符合 Button 平台开发规范的代码检查规则。
这个插件的好处是：一劳永逸。使用 eslint-config-button-platform 可以将一整套的规范都写入到 ESLint 配置文件中，从此就可以在编写代码过程中借助 eslint 进行风格检查，不需要再手动写好多 eslint 规则。
当前 eslint-config-button-platform 的规范主要包含以下内容：
- eslint-plugin-react 规范
- eslint-plugin-import 规范
- eslint-plugin-jsx-a11y 规范
- eslint-config-prettier 规范
- 官方规范（可以理解为 eslint 原始规范）
如何使用
首先，确认你已经安装好了 eslint 工具，如果没安装可以通过 npm 安装：
npm install eslint --global
接着，安装 eslint-config-button-platform：
npm install eslint-config-button-platform
然后在你的 ESLint 配置文件里面，添加如下内容：
{
"extends": "button-platform"
}你可以在你的工程目录下，创建一个名为 .eslintrc.json 的文件，将以上内容放置其中。
这样一来，就可以直接使用 eslint 来进行代码检查了。
代码检查示例
下面，我们就用具体的代码来看一下，eslint-config-button-platform 如何能够优化我们的 JavaScript 编写。
验证 JSX 属性
在 React 项目中，我们需要注意 JSX 属性规范。比如在一个按钮组件里面，需要为每个按钮定义一个独立的 key，避免出现上下文关系不同导致出问题。
<Button key={item.id}>{item.name}</Button>如果我们在编写中忘记添加 key 属性的话，eslint-config-button-platform 就会帮我们发现并且提示错误。
禁止使用隐式的全局变量
在 JavaScript 编写过程中，有时我们会直接去使用全局变量。在需要重构代码的时候，就会变得比较麻烦。
所以我们需要做一个检查，禁止使用隐式的全局变量。eslint-config-button-platform 就提供了一组规则来实现这个检查。
// 禁止使用全局变量
const f = () => {
console.log(g)
}上面的代码中，eslint-config-button-platform 会提示 “g is not defined”，从而让我们意识到这里有问题。
格式化代码
在工程中，如果每个人都按照自己的喜好去编写代码，那么项目代码的格式就会出现可能严重不一致的情况。
那么代码的格式问题就需要用到格式化工具了，这里我们推荐使用 Prettier 工具。
eslint-config-button-platform 也提供了 Prettier 规范，并且定义在他的插件包中。这样我们一来就不需要再安装 prettier，它就可以被默认识别和使用了。
总结
eslint-config-button-platform 对于代码风格检查的工作和规范提供了很大的帮助。
通过这篇文章，我们希望大家能够明白，如何通过配置 eslint-config-button-platform 进行代码风格检查工作，如何提高前端代码的规范性、可维护性以及可减少 BUG 的发生率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb581e8991b448dc60f