VS Code中.vue文件常用的‘转到定义’扩展

Vue跳转到定义1

使用到的插件将支持:
1、.vue文件中通过class名跳转到当前文件的css定义
2、.vue文件中通过组件名直接跳转到该组件.vue文件
3、.vue文件中的.js文件的跳转
另外还解决了通过@指向的js和vue文件无法直接‘转到定义‘的问题

插件

  • vue-css-peek
  • Vue Peek
  • vue-helper
  • vue-jumptotag

介绍

vue-css-peek

为单页面的 vue 文件提供 css 转定义的支持

插件文档地址:https://marketplace.visualstudio.com/items?itemName=CharlesWu.vue-css-peek

快捷键: Ctrl+Left button 或F12

Vue Peek2

用于Vue快速查看组件定义以及组件跳转,具体使用见插件文档地址中的使用方法。

插件文档地址:https://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peek
在这里插入图片描述

注意:鼠标放在components上或者是MyElementCalendar,不要放在main上或者直接点击元素el-calendar
在这里插入图片描述
在这里插入图片描述

快捷键: Ctrl+Left button 或F12

vue-helper

该插件主要增强了对Element-UI,VUX,IVIEW进行写Vue和扩展的能力

插件文档地址:https://marketplace.visualstudio.com/items?itemName=shenjiaolong.vue-helper

快捷键: Ctrl+Left button 或F12

vue-jumptotag

vue跳转到标签可轻松跳转到.vue文件中的script, template和style标签。

插件文档地址:https://marketplace.visualstudio.com/items?itemName=andersonmfjr.vue-jumptotag

快捷键: Ctrl+Left button 或F12

.js文件跳转配置3

如果使用了@指向的js和vue文件无法直接‘转到定义’,需在根目录新建一个jsconfig.json的文件并配置,但是要写明后缀.js和.vue,否则也无法跳转

{
	"compilerOptions": {
			"baseUrl": ".",
			"paths": {
					"@/*": [
							"./src/*"
					]
			},
			"target": "ES6",
			"module": "commonjs",
			"allowSyntheticDefaultImports": true
	},
	"include": [
			"src/**/*"
	],
	"exclude": [
			"node_modules"
	]
}

  1. 解决Vue组件在VS Code中的跳转问题 ↩︎

  2. VsCode从零开始配置一个属于自己的Vue开发环境 ↩︎

  3. vscode中的 jsconfig.json配置介绍 ↩︎

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值