前端项目如何自定义页面import排序？ |
您所在的位置：网站首页 › js如何排序 › 前端项目如何自定义页面import排序？ |
前端项目如何自定义页面import排序？
|
现在前端开发项目一般都会用 ES Module 模块化开发方式，这就少不了用 import 去加载相关依赖包或组件等。随着 import 语句使用量增加，就迫切需要某种规则约束当前页面的 import 语句的排序，从而提高代码的可读性和可维护性，避免出错。 问题缘由在最近的开发中因为项目缺少约束 import 语句的规范，导致在打包时因为 import 语句中因为包含了一个无效的引用。导致打包出错，从而不得不重新打包。这严重影响了打包发版效率，因此希望能在开发时 eslint 能自动移除未用到的引用，并且所有 import 语句能按自定义的规则排序而不是随便追加排列 提出问腿 如何自定义 import 排序? 如何自动删除未用到的引用？ 解决办法方法一： 修改 vscode 配置 "editor.codeActionsOnSave": { "source.organizeImports": true, "source.fixAll": true },用上面的配置可以在保存时自动排序 import 语句，而且能移除未用到的引用，可以解决当前问题。
方法二：用方法一的配置再加上 eslint-plugin-simple-import-sort插件 使用方法： 安装插件 yarn add eslint-plugin-simple-import-sort -D 在.eslintrc.js 文件中增加配置 module.export = { // ... plugins: ["simple-import-sort"], rules: { "sort-imports": "off", "import/order": "off", "simple-import-sort/imports": "error", "simple-import-sort/exports": "error", }, };配置好后重启 vscode 后，保存后可以发现 import 语句排序变了
这次 import 语句自动排序后基本达到我们的要求，并且排序规则也比较合适。 优点： 配置简单 使用方便 缺点： 不支持更加详细的自定义排序 我个人觉得这也不算是插件的缺点吧，毕竟在 README 上也说明了这插件不是适合所有人Not for everyone，只是作者个人在小项目中用 This plugin is not for everyone. I made this plugin for myself. I use it in many little projects and I like it. 由于我们是多人开发项目，且希望 import 语句能按照自定义规则排序，因此有了方法三 方法三：用方法一的配置再加上eslint-plugin-import插件 安装插件 yarn add eslint-plugin-import -D 在.eslintrc.js 文件中增加配置 module.export = { // ... extends: [ // ... "plugin:import/recommended", ], rules: { //... "import/order": [ "error", { // 对导入模块进行分组，分组排序规则如下 groups: [ "builtin", // 内置模块 "external", // 外部模块 [ "parent", //父节点依赖 "sibling", //兄弟依赖 ], "internal", //内部引用 "index", // index文件 "type", //类型文件 "unknown", ], //通过路径自定义分组 pathGroups: [ { pattern: "@/**", // 把@开头的应用放在internal分组后面 group: "external", position: "after", }, ], // 是否开启独特组，用于区分自定义规则分组和其他规则分组 distinctGroup: true, // 每个分组之间换行 "newlines-between": "always", // 相同分组排列规则 按字母升序排序 alphabetize: { order: "asc" }, }, ], }, };这个插件的配置就比较全面一点，在 import/order 中增加自己需要的排序规则，具体的排序规则可以参考import/order 上面的配置中也解释了各种排序规则的意义和作用 因为我们是使用 Typescript,配置完后发现含有别名的路径不能被解析
查询资料后发现要增加@typescript-eslint/parser和 eslint-import-resolver-typescript插件和以下配置 module.export = { extends: [ // ... "plugin:import/typescript", ], settings: { "import/resolver": { typescript: true, node: true, }, }, };这样用 vscode 的配置加上方法三中的插件可以完美解决前文中提到的两个问题 参考文章： eslint-plugin-simple-import-sort eslint-plugin-import |
【本文地址】
今日新闻 |
推荐新闻 |