前言
在前端开发中，使用 ESLint 可以帮助我们保持代码质量的统一性和规范性。在实际工作中，为了避免重复造轮子，我们可以使用已经存在的配置文件。这里介绍一个使用 @uandi/eslint-config-uandi npm 包来帮助我们完成 ESLint 配置的方法。
什么是 @uandi/eslint-config-uandi
@uandi/eslint-config-uandi 是由“Weekend Programming”团队打造的一个简单易用的 ESLint 配置包。包括常见的 JavaScript、React、Vue 等语言的 ESLint 配置，支持 ES6/7、React Hooks、TypeScript 等语言特性，甚至支持 Prettier 格式化及其相关规则的校验。
如何使用 @uandi/eslint-config-uandi
安装
使用 @uandi/eslint-config-uandi 配置包之前，需要先安装 ESLint：
npm install eslint --save-dev
接着安装 @uandi/eslint-config-uandi：
npm install @uandi/eslint-config-uandi --save-dev
配置
在项目根目录下新建一个 .eslintrc.js 文件，然后将以下代码添加进去：
-- -------------------- ---- -------
-------------- - -
-------- ---------------
------ -
-- -------- ----- --- ---- -------
--
---------- -
-
------ -------- ---------
-------- ----------------------------
------ -
-- -------- ----- --- ----------
--
--
-
------ ----------
-------- ---------------------
------ -
-- -------- ----- --- ---
--
--
--
--上述配置文件中，我们设置了 extends 字段，它用于继承 @uandi/eslint-config-uandi 的规则。rules 字段可以用于添加项目特定的规则，而 overrides 字段可以用来区分不同的文件类型（如 TypeScript、Vue 等）。
添加 npm script
为了方便使用，我们可以在 package.json 中添加如下 scripts：
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
}
}使用 lint 命令会校验整个项目的代码规范，而使用 lint:fix 命令会尝试自动修复错误和警告。
示例代码
-- -------------------- ---- ------- -- ----- ------- ---------- --- - ------ ---- --------- ------ ----- ---- -------- ------ -------- ---- ------------ -- ----- -------- --- ---- -------- ----- - ------ --------- ------------ - -------------------- --- ---------------------------------
结语
通过使用 @uandi/eslint-config-uandi，我们可以避免大量的 ESLint 配置工作，同时也能保证代码的规范性和质量。希望这篇文章能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600563d481e8991b448e12c9