国内外画画做的好网站,盐城哪家做网站的正规,嵊州门户网站,青岛市网页设计公司我们经常会遇到项目中的import语句顺序混乱的问题。这不仅会影响代码的可读性#xff0c;还可能使我们代码在提交的时候产生不必要的冲突。
解决方案
eslint-plugin-import
开始我调研了一下eslint-plugin-import插件。这款插件的排序逻辑是这样#xff1a; builtin: 这代…我们经常会遇到项目中的import语句顺序混乱的问题。这不仅会影响代码的可读性还可能使我们代码在提交的时候产生不必要的冲突。
解决方案
eslint-plugin-import
开始我调研了一下eslint-plugin-import插件。这款插件的排序逻辑是这样 builtin: 这代表Node.js内置的模块例如fs、path等。
import fs from fs;external: 这代表外部库或框架通常是你通过npm或yarn安装的模块。
import axios from axios;internal: 这代表项目内部的模块但它们通常在项目的不同目录或子目录中。这些模块不是直接的父级或同级模块。
import { someFunction } from utils/my-helper;parent: 这代表从父目录导入的模块。
import something from ../something;sibling: 这代表与当前文件在同一目录下的其他文件。
import { siblingFunction } from ./sibling-module;index: 这代表从目录的index文件导入的模块。
import { indexFunction } from ./;object: 这代表导入的对象属性例如
import(some-module).then(({ someExport }) ...);type: 这代表从模块导入的类型或接口这在TypeScript中特别有用。 import type { MyType } from ./types;大致分为这些模块。我们可以在eslint的规则中根据这些模块进行排序。但是这并不是我想要的排序模式我更希望根据功能进行排序。组件放在一起hooks放在一起工具函数放在一起等等。
eslint-plugin-simple-import-sort
于是我找到了eslint-plugin-simple-import-sort这个插件。使用方式如下 安装插件:
npm install --save-dev eslint-plugin-simple-import-sort配置 ESLint: 在 .eslintrc.js 或你的 ESLint 配置文件中添加以下配置
module.exports {// ... 其他配置plugins: [simple-import-sort],rules: {simple-import-sort/imports: error,simple-import-sort/exports: error,},};自定义排序: simple-import-sort/imports: [error,{groups: [[^vue$, ^vue-router$, ^ant-design-vue$, ^echarts$], // 你可以根据需要添加更多的内置模块[.*\\.vue$], // .vue 文件[.*/assets/.*, ^/assets$],[.*/config/.*, ^/config$],[.*/hooks/.*, ^/hooks$],[.*/plugins/.*, ^/plugins$],[.*/router/.*, ^/router$],[^/services$, ^/services/.*],[.*/store/.*, ^/store$],[.*/utils/.*, ^/utils$],[^],[^type ],],},],
