ESLint 是一个广泛使用的 JavaScript 代码检查工具，它可以帮助我们发现代码中的潜在问题并提供一些最佳实践。ESLint 通过插件机制提供了许多功能，其中一个非常有用的功能是自动修复。本文将介绍如何开启 ESLint 的自动修复功能，让你的代码更加规范和可读。
安装和配置 ESLint
在开始使用 ESLint 的自动修复功能之前，我们需要先安装和配置 ESLint。可以使用 npm 安装 ESLint：
npm install eslint --save-dev
安装完成后，我们需要在项目根目录下创建一个 .eslintrc.js 或 .eslintrc.json 配置文件，并在其中配置 ESLint 的规则。以下是一个简单的 .eslintrc.js 示例：
-- -------------------- ---- -------
-------------- - -
------ -
---------- -----
------ ----
--
---------- ---------------------
---------------- -
-------------- -----
------------- --------
--
-------- -
--------- -
--------
-
--
------------------ -
--------
------
--
--------- -
--------
--------
--
------- -
--------
--------
-
-
--上面的配置文件中，我们开启了 browser 和 es6 环境，并且使用了 eslint:recommended 插件作为基础规则。我们还配置了一些规则，如缩进、换行符、引号和分号等。
开启自动修复功能
在安装和配置 ESLint 后，我们可以使用以下命令来检查项目中的代码：
npx eslint .
该命令将在项目根目录下检查所有的 JavaScript 文件，并输出检查结果。如果有错误或警告，我们可以手动修复它们，但是这样会很费时间。
幸运的是，ESLint 提供了自动修复功能，可以自动修复大部分问题。我们可以使用以下命令来开启自动修复功能：
npx eslint --fix .
该命令将自动修复所有可以自动修复的问题，例如缩进、换行符、引号和分号等。
集成自动修复功能到编辑器
手动运行 npx eslint --fix . 命令可能会很麻烦，因此我们可以将自动修复功能集成到我们的编辑器中。下面是一些常用编辑器的集成方法：
Visual Studio Code
在 Visual Studio Code 中，我们可以安装 ESLint 插件，并在用户或工作区设置中添加以下配置：
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}该配置将在保存文件时自动运行 npx eslint --fix . 命令，并自动修复所有可以自动修复的问题。
Sublime Text
在 Sublime Text 中，我们可以安装 SublimeLinter 和 SublimeLinter-contrib-eslint 插件，并在用户或项目设置中添加以下配置：
-- -------------------- ---- -------
-
---------------- -----
------------------------ -
--------- -
----------- ------
------- -
----------
-------------------
--------
-----------
------
--
------------- ---------
------------ -------------
-------------------- ---------------------------
-
--
--------------------------- -
----------- --------- -------------
----------- ------- -------------
---- ----------- -----
-
-该配置将在保存文件时自动运行 npx eslint --fix . 命令，并自动修复所有可以自动修复的问题。
Atom
在 Atom 中，我们可以安装 linter 和 linter-eslint 插件，并在用户或项目设置中添加以下配置：
-- -------------------- ---- -------
-
------- -
------------------- ---
-------------- -----
----------------------- ----
--
--------- -
----------- ---
------------------ -----
----------------- -----
------------ -
--
---------------- -
---------------------------- ------
--------------------------- -----
------------ -----
------------- ---
--------------- -----
---------- -
-------
--
----------- ---
------------------ -----
-
-该配置将在保存文件时自动运行 npx eslint --fix . 命令，并自动修复所有可以自动修复的问题。
结论
ESLint 的自动修复功能可以帮助我们自动修复大部分问题，让我们的代码更加规范和可读。我们可以在命令行中手动运行 npx eslint --fix . 命令来使用自动修复功能，也可以将自动修复功能集成到我们的编辑器中，使得我们可以更加方便地使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673f30925ade33eb722e74da