本篇文章給大家談?wù)剉scode運(yùn)行vue項(xiàng)目快捷鍵，以及vscode怎樣運(yùn)行vue對(duì)應(yīng)的知識(shí)點(diǎn)，希望對(duì)各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、vscode使用ctrl+左鍵
• 2、VSCode調(diào)試vue項(xiàng)目
• 3、在 VS Code 中調(diào)試vue項(xiàng)目
• 4、vscode怎么快速查看函數(shù)定義

vscode使用ctrl+左鍵

vue項(xiàng)目中,使用ctrl+左鍵點(diǎn)擊DOM中的組件標(biāo)簽,自動(dòng)打開跳轉(zhuǎn)到對(duì)應(yīng)組件功能

在設(shè)置中打開vscode的設(shè)置選項(xiàng)(ctrl+,),輸入setting搜索,打開在setting.json中編輯,粘貼入以下選項(xiàng),即可使用此功能

VSCode調(diào)試vue項(xiàng)目

先決條件

你必須安裝好 Chrome 和 VS Code。同時(shí)請(qǐng)確保自己在 VS Code 中安裝了 Debugger for Chrome 擴(kuò)展的最新版本。

在可以從 VS Code 調(diào)試你的 Vue 組件之前，你需要更新 webpack 配置以構(gòu)建 source map。做了這件事之后，我們的調(diào)試器就有機(jī)會(huì)將一個(gè)被壓縮的文件中的代碼對(duì)應(yīng)回其源文件相應(yīng)的位置。這會(huì)確保你可以在一個(gè)應(yīng)用中調(diào)試，即便你的資源已經(jīng)被 webpack 優(yōu)化過(guò)了也沒(méi)關(guān)系。

打開 config/index.js 并找到 devtool 屬性。將其更新為：

如果使用 vue-cli3 你需要設(shè)置 vue.config.js 內(nèi)的 devtool 屬性：

進(jìn)入Debugger視圖，添加Chrome配置，將內(nèi)容替換成以下內(nèi)容

設(shè)置斷點(diǎn)

此處response返回?cái)?shù)據(jù)

啟動(dòng)調(diào)試

在終端使用如下命令開啟這個(gè)應(yīng)用

進(jìn)入Debug視圖，選擇‘vuejs:chrome’配置，然后按F5或點(diǎn)擊綠色的play按鈕

隨著一個(gè)新的 Chrome 實(shí)例打開 ，你的斷點(diǎn)現(xiàn)在應(yīng)該被命中了。

在 VS Code 中調(diào)試vue項(xiàng)目

1.VS Code 中安裝Debugger for Chrome擴(kuò)展的最新版本：

2.在config/development.config.js（官網(wǎng)描述的是config/index.js，所以需要根據(jù)具體的項(xiàng)目而定）中添加如下配置：

3.點(diǎn)擊運(yùn)行調(diào)試按鈕，再點(diǎn)擊設(shè)置按鈕，修改launch.json文件，配置如下：

4.在vue項(xiàng)目的文件中設(shè)置斷點(diǎn)

5.啟動(dòng)vue項(xiàng)目：

6.點(diǎn)擊運(yùn)行調(diào)試按鈕，再點(diǎn)擊運(yùn)行小圖標(biāo)，這時(shí)會(huì)彈出新的chrome瀏覽器頁(yè)面。

7.在彈出的瀏覽器窗口的頁(yè)面進(jìn)行操作，觸發(fā)斷點(diǎn)時(shí)會(huì)跳轉(zhuǎn)掉vscode的斷點(diǎn)處。

遇到的問(wèn)題：

官網(wǎng)中的launch.json配置中"url": " "，url的端口是8080，這樣調(diào)試時(shí)瀏覽器頁(yè)面顯示“無(wú)法顯示此網(wǎng)頁(yè)”。這里需要改成自己本地起的服務(wù)的端口號(hào)。

參考：

在 VS Code 中調(diào)試：

vscode怎么快速查看函數(shù)定義

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

快捷鍵ctrl+左鍵 （按住ctrl鍵，左鍵點(diǎn)擊函數(shù)），即可跳轉(zhuǎn)到函數(shù)定義處。

想要返回跳轉(zhuǎn)前的位置（即回退到上一個(gè)光標(biāo)處），也很簡(jiǎn)單： 快捷鍵alt+左箭頭

1.點(diǎn)擊左邊活動(dòng)欄最下邊的插件按鈕

2.輸入“ vue-helper ”

3.安裝

4.此時(shí)界面如下：

有這個(gè)插件，你還用 “ctrl+f”一個(gè)個(gè)查看來(lái)找函數(shù)定義的位置嗎，是不是很神奇？

（我之前習(xí)慣于用webstorm，尤其是做vue項(xiàng)目的時(shí)候壓根沒(méi)打開過(guò)vscode，大多是因?yàn)楹笳邇?nèi)置功能太少，尤其是沒(méi)法像前者那樣可以直接跳轉(zhuǎn)到函數(shù)定義處。但是自從打開了vscode的插件大門后，才發(fā)覺(jué)vscode是真香。）

vscode運(yùn)行vue項(xiàng)目快捷鍵的介紹就聊到這里吧，感謝你花時(shí)間閱讀本站內(nèi)容，更多關(guān)于vscode怎樣運(yùn)行vue、vscode運(yùn)行vue項(xiàng)目快捷鍵的信息別忘了在本站進(jìn)行查找喔。