在前端开发中，我们通常需要使用 ESLint 工具来对代码进行规范检查。ESLint 可以帮助开发者在代码编写过程中捕获代码错误、与团队成员保持一致的代码风格以及规范代码结构。在实际的开发场景中，我们通常针对自己的项目定制规则，然后通过 ESlint 进行检查。这时候就需要使用到 npm 包 eslint-config-bugly，本文主要介绍 npm 包 eslint-config-bugly 的使用教程。
ESLint 配置安装
首先我们需要安装 ESLint 和 eslint-config-bugly 包，执行以下命令：
npm install eslint eslint-config-bugly --save-dev
这样就可以把 ESLint 和 eslint-config-bugly 包安装到项目的 devDependencies 中。
配置 .eslintrc.js 文件
在项目根目录下新建 .eslintrc.js 文件，配置相关规则。
module.exports = {
extends: [
'eslint-config-bugly'
],
rules: {
// 其它自定义规则
}
};我们直接使用 eslint-config-bugly 集成了 eslint-plugin-react、eslint-plugin-import、eslint-plugin-jsx-a11y 这三种插件，所以只需要在 extends 中添加 'eslint-config-bugly' 即可。
检查代码
配置好 .eslintrc.js 文件后，我们就可以使用 ESLint 检查代码了。
执行以下命令：
npx eslint **/*.js
这样 eslint 会检查 js 文件夹下的所有 js 文件。如果想要检查所有文件，可以使用以下命令：
npx eslint .
示例代码
下面是一个示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- ------- --------------- -
------------- -
--------
---------- - -
------ --
--
-
-------- -
------ -
-----
-------- ---------
----
-------------------------- -- -
--- ----------------------
---
-----
------
--
-
-
------ ------- ---------当我们执行 npx eslint test.jsx 后，ESLint 会提示以下错误：
test.jsx 1:1 error 'React' should be listed in the project's dependencies. Run 'npm i -S react' to add it as a dependency import/no-extraneous-dependencies
这表示我们需要在 package.json 文件中添加 react 依赖。
总结
通过本文，我们学习了如何使用 npm 包 eslint-config-bugly 对前端项目代码进行规范检查。使用 eslint-config-bugly 后，我们可以省去配置很多规则项的麻烦，轻松检查代码错误和编码风格问题。当然，我们也可以自定义规则，保证代码更加规范。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cbf81e8991b448da583