随着前端技术的进步，我们的项目越来越庞大，代码量也越来越多。在处理大量代码的时候，正确地组织和排序 import 语句变得至关重要。这时候 import-sort-config 这个 npm 包就可以帮助我们解决问题。
import-sort-config 简介
import-sort-config 是一个 npm 包，它提供了一个统一的 import 排序配置文件。借助于这个配置文件，我们可以自动化地对我们代码中的 import 语句进行排序，从而使得代码更加清晰易读，提高开发效率。
使用 import-sort-config，你不再需要手动排序 import 语句，而是可以通过定义排序规则来让配置文件自动排序你的 import 语句。
安装和使用
在使用 import-sort-config 之前，我们需要先安装它。
npm install import-sort-config --save-dev
接下来，我们需要在我们的项目中创建一个 .importsortrc.json 文件，这个文件是我们的 import 排序配置文件，它定义了 import 语句的排序规则。
-- -------------------- ---- ------- - ----- ----- ---- ------ - --------- ---------- -------- --------- ------- - ---------- - - -------- ----------------- ------- ------- -- - -------- -------- -- - ------------ ---- -- - -------- ----------- ------ -- - ------------ ---- -- - -------- ------ - - - - -展开代码
文件中的 parser 属性指定了解析器的类型，style 属性指定了 import 语句的风格，sort 属性定义了 import 语句的排序规则。
我们可以根据自己的需求对 .importsortrc.json 进行调整。例如，我们可以修改 "^\\." 的位置，让从 ./ 或 ../ 引入的模块排在最后。如果你要让所有的本地文件排在非本地文件之前，可以删除 separator 之后的 match。
一旦我们定义好了排序规则，我们可以使用 import-sort 命令对项目的 import 语句进行排序。
npx import-sort ./src/**/*.js
以上命令会对 ./src/ 下所有的 .js 文件进行 import 排序。
示例代码
比如，我们的项目目录结构如下：
-- -------------------- ---- ------- ------- -- ---- - -- ----------- - - -- --------- - - -- -------- - -- ------ - - -- ------ - - -- -------- - - -- ------------ - -- -------- -- ------------展开代码
我们的 index.js 文件中引入了其他两个模块：
import React from 'react'; import ReactDOM from 'react-dom'; import Button from './components/Button';
我们需要按照上面的步骤，安装和配置 import-sort-config，然后在控制台输入以下命令：
npx import-sort ./src/index.js
排序后的 index.js 文件如下：
import React from 'react'; import ReactDOM from 'react-dom'; import Button from './components/Button';
从上面的示例中，我们可以发现，按照规则排序之后，代码更加清晰易读。
总结
使用 import-sort-config 可以大大提高我们代码的可读性并且减少犯错的概率。通过定义自己的排序规则，我们可以自动化地进行 import 排序。在具体的使用中，我们还可以根据项目需要继续调整 import 排序规则，使得我们的代码更加清晰易读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/70716
