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

Vue跳转到定义¹

使用到的插件将支持：
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 Peek²

用于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文件跳转配置³

如果使用了@指向的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配置介绍 ↩︎