前言
在日常的前端开发中，我们使用 ES6 的模块化语法进行组件开发，但是随着项目越来越大，我们很难保证所有的开发者代码风格是一致的。为了减少这些问题带来的影响，我们可以使用一些工具进行代码自动化处理， import-sort-cli 就是其中之一，今天我们来一起学习一下这个 npm 包。
什么是 import-sort-cli
import-sort-cli 是一个命令行工具，用于自动化处理 JavaScript 或 TypeScript 文件中的 import。
安装 import-sort-cli
使用 npm 进行全局安装：
npm install -g import-sort-cli
在项目中使用 import-sort-cli
使用 npm 全局安装 import-sort-cli 后，就可以在命令行中使用 import-sort 命令来对项目中的代码进行排序。
以下是 import-sort-cli 的用法：
import-sort [filename] [options]
其中，filename 为需要处理的文件名，支持 Glob 通配符，如果没有指定文件名，则默认读取 Stdin 中的输入；
options 是可选参数，支持以下选项：
-c,--config：指定配置文件的路径，默认为import-sort.config.js；-i,--inline-config：在当前文件夹下查找以.importsortrc,.importsortrc.json,.importsortrc.json5,.importsortrc.js, 和.importsortrc.cjs命名的配置文件，优先级依次降低，找到第一个为止；-h,--help：输出帮助信息；-v,--version：输出版本号。
配置文件
如果要使用外部配置文件对 import-sort-cli 进行配置，可以在项目根目录下创建 import-sort.config.js 文件，然后编辑该文件，为 import-sort-cli 配置相关参数。
以下是示例配置文件：
-- -------------------- ---- ------- -------------- - - ----- ------ - ------ --------- ------- -------- -------- -- -- ----- ------ - ------ --------- ------- ------------- -------- -- - -展开代码
其中，每个键值对表示一个要处理的文件，键为文件的后缀名，值为一个对象，包含以下参数：
style：表示排序的方式，有module和react两种，分别表示将所有导入语句按照模块和 React 组件进行排序；parser：用于解析代码的语法类型，有babel和typescript两种；options：一个对象，包含排序时的额外配置。
示例代码
以下是示例代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ --- ---- -------- ------ -------------- ---------------- ------------------ ---- -- -------------------- ------------------------------- --展开代码
使用 import-sort-cli 对该代码进行排序，可以得到以下新代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ --- ---- -------- ------ -------------- ---------------- ------------------ ---- -- -------------------- ------------------------------- --展开代码
可以看到，import-sort-cli 自动将导入语句按照规定的先后顺序进行了排序。
总结
import-sort-cli 是一款非常实用的 npm 包，可以帮助我们规范团队在编写 JavaScript 和 TypeScript 代码时的导入语句的书写顺序。使用该工具可以减少代码冲突和降低代码的耦合度，提高代码的可读性和可维护性，是我们进行前端开发不可或缺的工具之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/70712
