【效率提升】vscode 中 js 无法点击 @ 资源跳转定义处

jwensh@2023.12.29

问题

这几天在帮前端项目写单元测试,调试 vscode 环境的时候,发现import formatNumber from '@/utils/tool'; 在 mac 上 command + 鼠标左击 无法跳转到 formatNumber 方法定义的地方

解决

相同的 vscode 插件环境,之前在 typescript 项目下可以成功跳转,当前项目是 javascript 项目,却不可以,应该是没有让 vscode 知道路径的映射关系

  • 确保安装了 JavaScript 语言插件
  • 确保安装了 TypeScript 和 JavaScript 的定义插件,如 JavaScript (ES6) code snippets TypeScript Importer

在项目根目录下运行 tsc --initvim jsconfig.json 来创建一个 tsconfig.json 配置文件或 jsconfig.json 配置文件

因为我们是 javascript 项目, 直接创建一个 jsconfig.json 文件即可, 这个文件用来配置 JavaScript 的编译选项和路径映射等信息

json 复制代码
{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": ["src/*"]
        }
    },
    "exclude": [
        "node_modules"
    ]
}
  • baseUrl : 设置项目的基础路径,即项目根目录
  • paths: 设置模块名到文件夹的映射。如果使用 @/* 作为模块名的前缀,将其映射到 src/* 文件夹

这样就可以在 JavaScript 文件中进行定义的跳转了(command + 鼠标左击 一个方法或变量的调用处时,VSCode 将会自动跳转到相应的定义处)

相关推荐
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
画月的亮2 小时前
element-ui 使用过程中遇到的一些问题及解决方法
javascript·vue.js·ui
m0_526119402 小时前
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
javascript·vue.js·elementui
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
lyj1689975 小时前
el-tree选中数据重组成树
javascript·vue.js·elementui
梦幻通灵6 小时前
IDEA通过Contince接入Deepseek
java·ide·intellij-idea
鸡啄米的时光机7 小时前
vscode的一些实用操作
vscode·学习
lonelyhiker7 小时前
javascript的原型链
开发语言·javascript·原型模式
MarkHD8 小时前
第十六天 HarmonyOS WebView开发实战:从加载网页到与JavaScript交互
javascript·交互·harmonyos
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js