在编写 JavaScript 代码时，代码风格的一致性至关重要。而 eslint 是目前最流行的 JavaScript 代码风格和错误检测工具之一。通过 eslint 工具，可以快速发现代码中的潜在错误和不一致之处，并帮助我们按照一致的规范编写代码。
针对某些团队或者项目来说，可能需要根据自己的特定需求来配置 eslint 规则。此时，eslint-config-urbica 这个 npm 包就有极大的用处了。它提供了一个默认的 eslint 规则配置，使开发者无需手动设置以及自定义 lint 规则。
本篇文章将详细介绍如何在项目中使用 eslint-config-urbica npm 包，既适用于前端初学者，也适用于有一定经验的前端工程师。
安装
安装 eslint-config-urbica 很简单，只需要通过 npm 安装即可。打开终端，输入以下命令：
npm install eslint-config-urbica --save-dev
这里使用 --save-dev 参数将其安装到开发环境中。安装完成后，我们可以在项目的 package.json 文件中看到类似如下的配置：
{
"devDependencies": {
"eslint-config-urbica": "^0.1.1"
}
}使用
基本使用
安装完成 eslint-config-urbica 后，我们需要将该配置添加到项目所使用的 eslintrc 配置文件中。
首先在项目文件夹下创建一个名为 .eslintrc 的文件。接着添加以下内容：
{
"extends": "urbica"
}这样，我们就将 eslint-config-urbica 的预设规则添加到项目的 eslint 配置文件中，项目中的 JavaScript 代码规范执行的就是这一套预设规则了。
拓展规则
如果需要在 eslint-config-urbica 的基础上修改或者添加一些规则，只需要在 .eslintrc 文件中添加一个 rules 对象即可。
例如，我们想要修改 eslint 对字符串的强制使用反引号进行引用的规则，我们可以在 .eslintrc 文件中添加以下代码：
{
"extends": "urbica",
"rules": {
"quotes": ["error", "single"]
}
}这样，我们就覆盖了 eslint-config-urbica 的 quotes 规则，将其修改为强制使用单引号。
除了修改规则外，我们还可以添加自己的规则。例如，在某个项目中，可能会要求所有代码在文件末尾添加必要的注释。我们可以添加一个新的规则如下：
{
"extends": "urbica",
"rules": {
"no-eval": 2,
"no-console": ["error", { "allow": ["warn", "error"] }],
"file-end-with-comment": ["error", { "requireExisting": true }],
}
}其中，file-end-with-comment 是我们新添加的规则名，对应的是一个自定义的 eslint 规则插件。我们可以通过 npm 来安装这个插件：
npm i eslint-plugin-file-end-with-comment --save-dev
安装完成后就能够使用这个规则插件了。
快捷指令
在上述介绍中，我们需要手动创建 .eslintrc 文件，并添加预设规则和自定义规则。而有时候，我们可能会忘记添加某些规则，反复修改 .eslintrc 文件，导致出现一些意外错误。
针对这种情况，eslint-config-urbica 提供了一些快捷指令，用于一键配置 eslint 规则。在终端输入以下命令即可：
npx @urbica/create-react-app your-app-name
其中，your-app-name 是项目名称，也可以换成其他的名字。
这个命令会自动创建一个 react 项目，并将 eslint-config-urbica 添加到项目中。此时，在项目中查看 .eslintrc 文件，就会看到包含 eslint-config-urbica 以及一些自定义规则的 eslint 配置文件了。
示例代码
最后，我们给出一个示例代码来体现 eslint-config-urbica 的具体用法。以下代码片段演示了如何在 React 组件中定义并使用 ref。
-- -------------------- ---- -------
------ ------ - ------ - ---- --------
-------- ------------------ -
----- -------- - -------------
----- ----------------- - -- -- -
----- ---------- - -----------------------
------------------ ----- --- ----------------
--
------ -
-----
------ ----------- -------------- ---------------------------- --
------
--
-
------ ------- -----------------在这个代码片段中，我们定义了一个名为 ExampleComponent 的 React 组件，并在其中使用了 useRef 钩子来引用 input 标签。
由于使用了 eslint-config-urbica，同时添加了一些自定义的 eslint 配置，我们可以看到代码中的一些规范化错误已被检测出来：
- 变量需要使用 const 或 let 关键字进行声明。
- 使用单引号而非双引号引用字符串。
- 在函数调用后需要添加分号以结束该语句。
这些规则都符合 eslint 预设规则，同时也是 eslint-config-urbica 所内置的规则。
总结
通过本篇文章的介绍，我们了解了如何在项目中使用 eslint-config-urbica npm 包。在对项目进行代码检查、格式检查的同时，我们也学习了如何使用 npm 包来修改和扩展 lint 规则。使用 eslint-config-urbica，开发者可以在保持代码风格一致的同时，更加方便地发布代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672673660cf7123b36539