简介
在前端开发过程中，为了规范代码风格、提高代码质量和降低维护成本，我们通常会使用 ESLint 工具来检查和修复代码。但是，如何配置 ESLint 可能会让初学者感到困惑，尤其是配置较为复杂的项目。这时，npm 包 @smartshallot/eslint-config 可能会帮到你。
@smartshallot/eslint-config 是一个基于 eslint-config-airbnb 的 ESLint 配置包，它包含了许多常见的前端代码规范，并为你的项目提供了一套可扩展的配置方案。
安装
在使用之前，你需要确认已经安装了 ESLint。如果尚未安装，你可以通过以下命令进行安装：
npm install eslint --save-dev
安装完成后，你可以通过以下命令安装 @smartshallot/eslint-config：
npm install @smartshallot/eslint-config --save-dev
配置
安装完成后，你需要在项目根目录下的 .eslintrc.js 文件中引入 @smartshallot/eslint-config，以便使用它提供的 ESLint 配置规则。配置文件如下所示：
module.exports = {
extends: '@smartshallot/eslint-config'
};你也可以根据实际需求进行扩展或覆盖规则，只需要在 .eslintrc.js 文件中进行自定义配置，并在 extends 配置中引用扩展名称。例如：
module.exports = {
extends: ['@smartshallot/eslint-config', 'plugin:prettier/recommended'],
rules: {
'func-names': ['error', 'never'],
'no-console': 'warn',
'no-unused-vars': ['error', { argsIgnorePattern: '^_' }]
}
};上述配置：
- extends 指定了 eslint-config-airbnb 和 @smartshallot/eslint-config ，并加入了 Prettier 插件。
- rules 中自定义了 func-names、no-console 和 no-unused-vars 的规则。
具体详细的规则可参考 eslint-plugin-prettier 、eslint-plugin-react 、eslint-plugin-import 以及 eslint-plugin-jsx-a11y。
使用
配置完成后，你可以在项目根目录下的 .eslintrc.js 文件中定义 匹配运行的目录和配置规则。例如，我们定义了如下的目录：
-- -------------------- ---- -------
-------------- - -
-------- ------------------------------
----- -----
---- -
-------- -----
----- -----
---- -----
--
-------------- -
------------ ---
----------- ---------
------------- -
---- ----
-
--
--------- -
------ -
-------- --------
-
--
--------------- ----------------- ----------
---------- -
-
------ ----------- ------------
------ -
----------------------- ------
-------------------- ------
------------------------------- --------- - ----------- -------- ------- --
-
-
-
--接下来，你可以直接在项目目录下运行 eslint 命令，并指定需要检测的目录或文件，例如：
eslint src/
结论
通过使用 @smartshallot/eslint-config，在一个规范和高质量的代码风格中编写前端代码变得更简单。你可以根据实际需求进行扩展或覆盖规则，并在项目开发中使用这些规则来提高代码质量、降低维护成本。祝你写出更好的代码！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d630d0927023822c77