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

本文目錄一覽：

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

vscode使用ctrl+左鍵

vue項目中,使用ctrl+左鍵點擊DOM中的組件標簽,自動打開跳轉(zhuǎn)到對應(yīng)組件功能

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

VSCode調(diào)試vue項目

先決條件

你必須安裝好 Chrome 和 VS Code。同時請確保自己在 VS Code 中安裝了 Debugger for Chrome 擴展的最新版本。

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

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

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

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

設(shè)置斷點

此處response返回數(shù)據(jù)

啟動調(diào)試

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

進入Debug視圖，選擇‘vuejs:chrome’配置，然后按F5或點擊綠色的play按鈕

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

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

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

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

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

4.在vue項目的文件中設(shè)置斷點

5.啟動vue項目：

6.點擊運行調(diào)試按鈕，再點擊運行小圖標，這時會彈出新的chrome瀏覽器頁面。

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

遇到的問題：

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

參考：

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

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

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

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

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

1.點擊左邊活動欄最下邊的插件按鈕

2.輸入“ vue-helper ”

3.安裝

4.此時界面如下：

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

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

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