ESLint 是一个开源的 JavaScript 代码检查工具，可以检测常见的代码错误和风格问题，并可以自定义规则。而 eslint-plugin-sort-imports-es6-autofix 则是一款基于 ESLint 的插件，它可以帮助我们自动排序 JavaScript 模块的导入语句，以便更好地组织代码并提高可读性。
安装与配置
在使用之前，我们需要先安装 ESLint 和 eslint-plugin-sort-imports-es6-autofix 两个包。可以通过 npm 命令进行安装：
npm install eslint eslint-plugin-sort-imports-es6-autofix --save-dev
然后在项目的根目录下新建一个 .eslintrc.js 文件，并进行如下配置：
-- -------------------- ---- -------
-------------- - -
----- -----
---- -
-------- -----
---- -----
--
-------------- -
------------ -----
----------- ---------
--
-------- -----------------------
-------- -----------------------------
------ -
-------------------------------------------- --------- -
----------- ------
---------------------- ------
----------------- ------
---------------------- -------- ------ ----------- ----------
---
--
--上述配置中，我们指定了一些基本的 ESLint 规则，同时启用了 eslint-plugin-sort-imports-es6-autofix 插件，并设置了其中的 sort-imports-es6 规则。
使用示例
随便在一个 JavaScript 文件中添加几个导入语句，然后使用 ESLint 进行代码检查，就可以看到 eslint-plugin-sort-imports-es6-autofix 插件自动为我们排序了导入语句。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ------------
------ - ------------- -- ------- ------ ---- - ---- -------------------
------ - -- ------------- ---- ------------------
------ --- ---- --------
-------
--------
------ -------- --------------- --
----------
-------------------------------
--
---------------------------ESLint 输出的结果如下：
$ eslint test.js test.js 1:0 error Imports should be sorted alphabetically. "react" should come before "react-dom" sort-imports-es6-autofix/sort-imports-es6 ✖ 1 problem (1 error, 0 warnings)
这是一个错误的示例，因为我们导入的 react 库应该排在 react-dom 库之前。我们可以手动修改代码，也可以使用 --fix 参数自动修复：
$ eslint --fix test.js
修复后的代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ------------
------ - ------------- -- ------- ------ ---- - ---- -------------------
------ --- ---- --------
------ - -- ------------- ---- ------------------
-------
--------
------ -------- --------------- --
----------
-------------------------------
--
---------------------------这就是使用 eslint-plugin-sort-imports-es6-autofix 插件的简单示例，它可以帮助我们快速地优化代码中的导入语句，提高代码质量和维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/68113