likes
comments
collection
share

fast-jump插件,限时白嫖,错过后悔都不知道怎么写

作者站长头像
站长
· 阅读数 2

大家好,我是 Simon,想分享一个最近写的插件给大家,目前是可以白嫖的~

首先介绍一下这个插件解决了什么问题吧~

我相信很多人苦于ts的路径跳转已久,但是也就将就的用了,有的哥们可能都没意识到这是一个很糟糕的事情,到底是什么事情呢?

在使用vue组件,我最近是在基于vben做一些低代码的模板修改,vben相比应该用的人不少,是一个封装挺齐全的模板,可以很灵活的将json配置成组件,以及继承了api,和很丰富的钩子去自定义,但是灵活的背后就是有人默默的给你去封装处理,当你遇到问题想去排查,或者想去扩展和自定义一些属于你司的一些风格的代码时,你可能很明白,我就改一改这个就可以了,但是,当你一层层点进slot的组件啦,一系列的钩子函数,一层套一层,是真的会抱怨,这还不是重点,因为当你点击模板跳组件的时候,因为他很可能是使用defineAsyncComponent或者其他函数将原本的.vue文件处理过了,所以你跳入的是下面的页面

import { withInstall } from '@/utils';
import collapseContainer from './src/collapse/CollapseContainer.vue';
import scrollContainer from './src/ScrollContainer.vue';

export const CollapseContainer = withInstall(collapseContainer);
export const ScrollContainer = withInstall(scrollContainer);

export * from './src/typing';

然后呢,你还要再去看他引入的是什么组件再去点到对应的.vue文件,当你以为这样就结束了的时候,

fast-jump插件,限时白嫖,错过后悔都不知道怎么写 点完路径,他还会弹出类型和组件2个路径让你选择,这些其实都是多余的操作,如果你觉得这有什么大不了,不久多点2、3层罢了,如果你这样想,那我也没办法阻止你,但对于我来是很受困扰的,尤其是vscode里面跳着跳着,你可能之前的文件就突然没了,你一层层返回这样折腾,一来一回你以为只是多跳了6个文件路径,如果这个嵌套层级更深呢,你的来回都会根据嵌套的层级2n的复杂度在增加,会导致你的思路都受到影响,这还是在最新版的setup中,可能再使用早起vue版本,你组件点击会先跳到底部的components,然后再点击,会进入到import语句,然后再点from source,然后可能你还会经历之前的步骤,另外你还不排除可能会遇到在模板中动态导入组件路径的,这时候你的跳转,也是不能直达组件的

说了那么多抱怨的话,说说这个组件的功能吧,简单的来说就是能解决上述所有的问题

  1. 让你一步到位,来回都是一步,解决了2n -> 2
  2. 并且他甚至能直接跳转第三方组件库的源码,举个例子当你使用类似ant-design-vue,你如果想看一下他里面的简单实现,你正常点击完一定是跳到.d.ts的类型文件,这个组件能直接定位到源码位置
  3. 当你在vue模板中使用了模板中函数结构出来的变量,也能直接跳到真正定义的位置,举个例子

fast-jump插件,限时白嫖,错过后悔都不知道怎么写

fast-jump插件,限时白嫖,错过后悔都不知道怎么写

fast-jump插件,限时白嫖,错过后悔都不知道怎么写

  1. 提供了变量展示的效果,告诉你当前基本的初始值,变量名,类型等等的信息

fast-jump插件,限时白嫖,错过后悔都不知道怎么写

  1. 提供了类型详情,和直接跳转到类型位置的能力

fast-jump插件,限时白嫖,错过后悔都不知道怎么写