大厂技术 高级前端 Node进阶
点击上方 程序员成长指北,关注公众号
回复1,加入高级Node交流群
我们经常会遇到项目中的 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 `],
],
},
],
这样就会按照我们系统中的功能模块排序了!
作者:热心市民王某
链接:https://juejin.cn/post/7281474941257220152
来源:稀土掘金
Node 社群
我组建了一个氛围特别好的 Node.js 社群,里面有很多 Node.js小伙伴,如果你对Node.js学习感兴趣的话(后续有计划也可以),我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
“分享、点赞、在看” 支持一下