在前端开发过程中，代码规范是一个必须要注意的问题。为了方便开发者使用和维护代码规范，npm 包提供了一个叫做 eslint-config-essentials 的包。本篇文章将深入介绍该包的使用教程。
简介
eslint-config-essentials 是一个基于 eslint 的插件，用于在代码中实现符合一定规范的代码风格的校验。这样的校验为开发者提供了一个清晰的代码规范和变化控制，并且可以帮助开发人员避免在团队协作中出现的代码风格不和谐的问题。
安装
要使用 eslint-config-essentials，你需要先安装 eslint 插件，然后再安装 eslint-config-essentials。
若是使用 npm，安装 babel-eslint 和 eslint-plugin-import 库，并将内部安装 eslint-config-essentials 依赖于本地 npm 包。
npm install eslint babel-eslint eslint-plugin-import --save-dev npm install eslint-config-essentials --save-dev
若是使用 yarn，可直接运行以下命令：
yarn add eslint babel-eslint eslint-plugin-import --dev yarn add eslint-config-essentials --dev
配置
安装后，需要更改 eslint 配置文件。假设你已经根据官方文档来配置过 eslint (.eslintrc.js) 配置文件了，在该文件中，你可以将 extends 属性添加到你要使用的规则配置中，示例如下：
module.exports = {
extends: [
"essentials"
],
rules: {
// 自定义的规则可以在这里添加
}
}在上面示例中，essentials 是 eslint-config-essentials 库的配置名，在 extends 块中以数组形式传递给 eslint，增加了该配置将启用 eslint-config-essentials 提供的预设规则。
eslint-config-essentials 官方文档提供了一份常见的配置项，开发者可以根据需求合理选择预设中的规则。
配置项
以下是 eslint-config-essentials 的配置项：
- essentials
- essentials/react
- essentials/vue
- essentials/node
这些配置项应该都能快速的应对大多数开发场景，但你也可以根据自己的需要进行自定义配置。下面分别来介绍预设的四个配置项。
essentials
继承了 eslint 的 base 配置项以及其他有用的 JavaScript 规则。
essentials/react
继承了 essentials 规则，同时添加了一个处理 React 代码的插件，使您可以在项目中使用 React 组件。
essentials/vue
继承了 essentials 规则，同时添加了一个处理 Vue 代码的插件，使您可以在项目中使用 Vue 组件。
essentials/node
继承了 essentials 规则，同时添加了一系列 Node.js 参数规则的插件，使您可以在写 Node.js 应用程序时更加符合规范。
示例
下面将展示一个具体的使用 eslint-config-essentials 的例子。
假设你有如下代码：
const myFunc = (arg1, arg2) => {
console.log("Hello, world!");
};使用 eslint 默认规则的话，不会发现任何问题。但如果使用 eslint-config-essentials，将会得到提示：
1:28 error Expected a space after '=>' arrow-spacing 1:31 error Extra semicolon semi
这个提示建议开发者添加" => "后的空格以及删除末尾的分号。这些建议可以有选择的采纳，组合到自定义的 eslint 配置上。
总结
eslint-config-essentials 是一个很好的工具，因其提供了代码规范性的控制和简化。安装和初级配置都很简单，开发者可以根据自己的需求自由选择任何预设或自定义的规则。使用 eslint-config-essentials 标准化代码风格后，代码更易于阅读和理解，并降低了代码维护的成本，值得开发者好好使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c481e8991b448e8e0d