前言
在前端开发中，通过npm来管理项目中的依赖包已经成为一种非常普遍的方法。由于前端技术更新迭代速度非常快，所以npm中也有越来越多的包。
如何管理一份庞杂的依赖包呢？除了通过npm管理工具来帮助实现，还可以使用一些工具来进一步辅助。在本文中，将会介绍一款叫做import-sort-parser-typescript的npm包，它能够对引入的模块进行自动排序。
import-sort-parser-typescript是什么？
import-sort-parser-typescript是一个npm包，它提供一个能够对引入的模块进行自动排序的函数。而排序方式，可以通过导入的其它插件进行配置。
这个包使用TypeScript解析项目文件，因此只能在TypeScript项目中使用。
在使用之前，首先需要安装import-sort-parser-typescript：
npm install --save-dev import-sort-parser-typescript
如何使用import-sort-parser-typescript？
安装并配合ide使用
在 VS Code 中配置 ESLint 的 .eslintrc.js 和 .prettierrc.js 文件，可以实现自动格式化的功能。
首先，需要在项目中安装两个扩展：ESLint 和 Prettier。
- 安装ESLint：
npm install --save-dev eslint
- 安装prettier：
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
- 添加.eslintrc.js：
-- -------------------- ---- -------
-------------- - -
------- ----------------------------
-------- -----------------------
-------- -
---------------------
----------------------------------------
------------------------------
------------------------------
--
------ ---
--- 添加.prettierrc.js：
module.exports = {
trailingComma: 'es5',
tabWidth: 2,
semi: true,
singleQuote: true,
};- 配置 VS Code 插件：
使用 VS Code 插件 ESLint 完成 ESLint 以及自动格式化的配置。打开 VS Code 设置界面，搜索 "ESLint"，将 "ESLint: Auto Fix On Save" 选项打开。
配合import-sort使用
按照上述方式配置完毕后，还需要配合 import-sort 来使用 import-sort-parser-typescript。具体步骤如下：
- 安装import-sort：
npm install --save-dev import-sort
- 安装import-sort-parser-typescript：
npm install --save-dev import-sort-parser-typescript
- 安装import-sort-style-module：
npm install --save-dev import-sort-style-module
- 添加配置文件importSortConfig.json：
-- -------------------- ---- -------
-
------ -
--------- --------------------------------
-------- ---------
---------- -
---------------------- -
--------- ------------
--------- --
-
-
-
-- 添加脚本命令：
{
"prettier": "prettier --ignore-path .gitignore --write '**/*.{ts,tsx,js,jsx,css,md,json,html}'",
"sort": "npx import-sort --write '**/*.{ts,tsx}' --config importSortConfig.json",
"lint": "eslint --ext .ts,.tsx --cache --fix --quiet .",
"format": "npm run prettier && npm run sort",
"precommit-hook": "npm run format && npm run lint"
}这样就配置完成了, package.json 中 script 配置项增加了：
- "sort"：对 TypeScript 代码进行 import 排序。
- "format"：自动格式化代码。
- "precommit-hook"：对 TypeScript 代码进行 format 和 lint 检查。
总结
通过npm包import-sort-parser-typescript的使用，我们可以大大提升我们的开发效率，让代码更加规范和易于维护。值得一提的是，这里所提供的仅是一种使用方式和配置，期待读者在日后的开发过程中自行探索更多的方法和技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/70709