简介
在前端的开发中，我们常常需要通过 import 或者 require 引入依赖的模块。当项目较大时，很容易出现导入顺序乱的情况。为了解决这个问题，我们可以使用 import-sort-style-eslint 这个 npm 包来统一代码的导入顺序，避免代码可读性下降。
安装
使用 npm 来安装 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 文件并添加如下配置：
-
--------------------------- -
----------------------- ----
-
-这个配置表示在保存文件时自动修复不符合 Eslint 规范的错误。
２. 在命令行使用
我们可以在项目的 package.json 文件中添加如下 script：
-
---------- -
-------------- ------- ----- ------- ---------- ---------- ---------------------------------
-
-然后，在命令行执行 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