本篇文章给大家谈谈vscode运行vue项目快捷键，以及vscode怎样运行vue对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vscode使用ctrl+左键
• 2、VSCode调试vue项目
• 3、在 VS Code 中调试vue项目
• 4、vscode怎么快速查看函数定义

vscode使用ctrl+左键

vue项目中,使用ctrl+左键点击DOM中的组件标签,自动打开跳转到对应组件功能

在设置中打开vscode的设置选项(ctrl+,),输入setting搜索,打开在setting.json中编辑,粘贴入以下选项,即可使用此功能

VSCode调试vue项目

先决条件

你必须安装好 Chrome 和 VS Code。同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本。

在可以从 VS Code 调试你的 Vue 组件之前，你需要更新 webpack 配置以构建 source map。做了这件事之后，我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试，即便你的资源已经被 webpack 优化过了也没关系。

打开 config/index.js 并找到 devtool 属性。将其更新为：

如果使用 vue-cli3 你需要设置 vue.config.js 内的 devtool 属性：

进入Debugger视图，添加Chrome配置，将内容替换成以下内容

设置断点

此处response返回数据

启动调试

在终端使用如下命令开启这个应用

进入Debug视图，选择‘vuejs:chrome’配置，然后按F5或点击绿色的play按钮

随着一个新的 Chrome 实例打开 ，你的断点现在应该被命中了。

在 VS Code 中调试vue项目

1.VS Code 中安装Debugger for Chrome扩展的最新版本：

2.在config/development.config.js（官网描述的是config/index.js，所以需要根据具体的项目而定）中添加如下配置：

3.点击运行调试按钮，再点击设置按钮，修改launch.json文件，配置如下：

4.在vue项目的文件中设置断点

5.启动vue项目：

6.点击运行调试按钮，再点击运行小图标，这时会弹出新的chrome浏览器页面。

7.在弹出的浏览器窗口的页面进行操作，触发断点时会跳转掉vscode的断点处。

遇到的问题：

官网中的launch.json配置中"url": " "，url的端口是8080，这样调试时浏览器页面显示“无法显示此网页”。这里需要改成自己本地起的服务的端口号。

参考：

在 VS Code 中调试：

vscode怎么快速查看函数定义

使用font color=#ff000vue-helper插件/font

快捷键ctrl+左键 （按住ctrl键，左键点击函数），即可跳转到函数定义处。

想要返回跳转前的位置（即回退到上一个光标处），也很简单： 快捷键alt+左箭头

1.点击左边活动栏最下边的插件按钮

2.输入“ vue-helper ”

3.安装

4.此时界面如下：

有这个插件，你还用 “ctrl+f”一个个查看来找函数定义的位置吗，是不是很神奇？

（我之前习惯于用webstorm，尤其是做vue项目的时候压根没打开过vscode，大多是因为后者内置功能太少，尤其是没法像前者那样可以直接跳转到函数定义处。但是自从打开了vscode的插件大门后，才发觉vscode是真香。）

vscode运行vue项目快捷键的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vscode怎样运行vue、vscode运行vue项目快捷键的信息别忘了在本站进行查找喔。