简介
在前端的开发中，我们常常需要通过 import 或者 require 引入依赖的模块。当项目较大时，很容易出现导入顺序乱的情况。为了解决这个问题，我们可以使用 import-sort-style-eslint 这个 npm 包来统一代码的导入顺序，避免代码可读性下降。
安装
使用 npm 来安装 import-sort-style-eslint：
npm install --save-dev import-sort-style-eslint
配置
通常情况下，我们需要将 import-sort-style-eslint 作为 import-sort 的插件，然后通过 .eslintrc 文件来配置它。
假如我们的项目中使用了 Vue.js 和 Sass，那么我们可以使用如下配置：
-- -------------------- ---- ------- - ---------- ------------- ---------- ----------- -------- - --------------- - -------- - --------- - ----------- ------------ ----------- ---------- ----------- ------- -- ------------------- --------------------------- -------------- - -------- ------ ------------------ ---- -- ------------- - - ---------- ------- -------- --------- - -- -------------------------------- ------------ ----------------- ---- - -- --------------- - -------- - --------- ----------- ----------- ------------ ------------------- --------------------------- -------------- - -------- ------ ------------------ ---- - -- -------------------------- - - -展开代码
其中，import/order 是一个用于设置 import 导入顺序的 eslint 规则，我们可以定义自己的 import 导入规则。如果直接用 eslint-plugin-import 的默认规则，很容易有冲突并且有大量没有用到的配置。
常用的导入顺序分为几个组：
- 内置导入模块：如
fs,path等 - 第三方导入的模块：如
Vue,Vuex等 - 项目内部导入的模块：如
api,store,utils等 - 主入口：如
main.js，app.vue等
我们可以根据具体需求，自定义配置中的 groups，或者使用别人已经定义好的配置，例如：
-- -------------------- ---- ------- - --------------- - -------- - --------- ----------- ----------- ------------ ------------------- --------- -------------- - -------- ------ ------------------ ---- - -- -------------------------- - -展开代码
更多详情可以查看 import-sort-style-eslint 的 Github 页面。
使用方法
在使用 import-sort-style-eslint 这个 npm 包时，通常我们有两种方式：
１. 在 VS Code 中使用
我们可以在 VS Code 中通过安装 ESLint 插件来使用 import-sort-style-eslint，安装完插件后，需要在项目中新建 .vscode/settings.json 文件并添加如下配置：
{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }
这个配置表示在保存文件时自动修复不符合 Eslint 规范的错误。
２. 在命令行使用
我们可以在项目的 package.json 文件中添加如下 script：
{ "scripts": { "fix:imports": "eslint --fix --cache --fix-type suggestion '**/*.+(js|jsx|tsx|ts|vue|json)'" } }
然后，在命令行执行 npm run fix:imports 即可对项目中的所有文件进行校验和修复不符合 Eslint 规范的导入顺序。
示例代码
-- -------------------- ---- ------- ------ --- ---- ------ ------ ---- ---- ------- ------ - ------------- - ---- ---------------- ------ - ---------- - ---- -------------------- ------ --- ---- ------------ ------ ------ ---- ----------- ------ ----- ---- ---------- ------ --------------------------------------- ------ --------- ---- ------------- ------------------ - ----- -------- --- -------------- ------------------------ - ------ ------------------------- - ----------- --- ----- ------- ------ ------- --- -- ------- ------------------展开代码
结果
-- -------------------- ---- ------- ------ --- ---- ------ ------ ---- ---- ------- ------ --------- ---- ------------- ------ --------------------------------------- ------ - ------------- - ---- ---------------- ------ - ---------- - ---- -------------------- ------ --- ---- ------------ ------ ------ ---- ----------- ------ ----- ---- ---------- ------------------ - ----- -------- --- -------------- ------------------------ - ------ ------------------------- - ----------- --- ----- ------- ------ ------- --- -- ------- ------------------展开代码
指导意义
使用 import-sort-style-eslint 可以规范化项目中的导入顺序，使得项目更易于维护和阅读。它能够自动生成 import 导入语句，也能够自动按照规定的顺序排序现有的导入语句。
在实际使用中，我们可以通过自定义规则，来调整导入顺序。这些自定义规则需要尊重一些基本约定，比如:
- 通常内部导入会放在第三方导入前面，且按字母排序
- 第三方导入会放在内部导入和应用程序导入之间
此外，我们要注意一点，代码格式的规范并不是策略性的，而是为了使开发效率更高。因此，我们可以根据实际需要来判断是否使用 import-sort-style-eslint 来规范我们的项目。
总之，在团队协作开发的过程中，使用 import-sort-style-eslint 能够使代码风格更加统一，避免出现排版错误及不一致的问题，从而提高代码的可读性，更好地管理代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/70713
