leiwuhen-67's blog leiwuhen-67's blog
首页
    • 《Vue》笔记
    • 《React》笔记
    • 《NodeJs》笔记
    • 《CSS》笔记
    • 《Redis》笔记
    • 基础入门
    • 《Mock》笔记
    • 《MySQL》笔记
    • 《Git》相关
影音视听
收藏
关于
GitHub (opens new window)

我的公众号

首页
    • 《Vue》笔记
    • 《React》笔记
    • 《NodeJs》笔记
    • 《CSS》笔记
    • 《Redis》笔记
    • 基础入门
    • 《Mock》笔记
    • 《MySQL》笔记
    • 《Git》相关
影音视听
收藏
关于
GitHub (opens new window)
  • 随性之笔

    • 《Mock》
    • 《MySQL》
    • 《Git相关》
    • 在TypeScript中,import type和import的区别
    • vscode之代码跳转到定义(vue文件和js文件)
    • vscode之vue项目中实现@路径提示
    • 使用vite构建js库并发布到npm
    • vite构建js库兼容传统浏览器
  • 随笔
  • 随性之笔
心欲无痕
2023-12-19

vscode之代码跳转到定义(vue文件和js文件)

在项目中经常遇到这种需求,点击某一个方法、api 或者某一个变量或组件,需要快速跳转到其定义的地方,然而在 vscode 中本身并不自带这种功能,需要自行配置。相比而言,webstorm 就强大得多。

以前一直都很头大,也不知道 vscode 其实通过配置也能实现,最近无意间发现原来是可以的。配置好后,开发起来也能得心应手了。特此记录下:

1、安装插件 Vue Peek,该插件扩展了 vue 代码编辑,支持转到定义,支持扩展名为.vue 的单文件组件和文件名,允许快速跳转到从模块或模块导入引用的文件。

2、在项目根目录下创建 jsconfig.json 或者 tsconfig.json(取决于你是否使用 ts 开发的),配置如下:

{
  "compilerOptions": {
      "allowJs": true,
      "baseUrl": ".",
      "paths": {
          "@/*": [
              "src/*"
          ]
      }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
  • baseUrl:设置项目的基础路径,即项目根目录。
  • paths:设置模块名到文件夹的映射。这里我们使用了 @/* 作为模块名的前缀,并将其映射到 src/* 文件夹。你可以根据你的项目具体配置来设置别名。

至此,就可以愉快的玩耍了,在需要进行代码跳转地方,按下 control 或 option 键的同时,点击需要跳转的地方,即可进行代码跳转了,有的是可以直接跳转到新窗口,有的则是以弹窗的形式来展现,想跳转到新窗口则需要二次点击。

编辑 (opens new window)
上次更新: 7/1/2024, 4:56:33 PM
在TypeScript中,import type和import的区别
vscode之vue项目中实现@路径提示

← 在TypeScript中,import type和import的区别 vscode之vue项目中实现@路径提示→

Theme by Vdoing
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式