全網(wǎng)最詳細(xì)的vscode基礎(chǔ)教程

本文主要介紹vscode在工作中常用的快捷鍵及插件，目標(biāo)在于提高工作效率

本文的快捷鍵是基于mac的，windows下的快捷鍵放在括號(hào)里 Cmd+Shift+P(win Ctrl+Shift+P)

[TOC]

零、快速入門(mén)

有經(jīng)驗(yàn)的可以跳過(guò)快速入門(mén)或者大致瀏覽一遍

1. 命令面板

命令面板是vscode快捷鍵的主要交互界面，可以使用f1或者Cmd+Shift+P(win Ctrl+Shift+P)打開(kāi)。

在命令面板中你可以輸入命令進(jìn)行搜索(中英文都可以)，然后執(zhí)行。

命名面板中可以執(zhí)行各種命令，包括編輯器自帶的功能和插件提供的功能。

所以一定要記住它的快捷鍵Cmd+Shift+P

2. 界面介紹

剛上手使用vscode時(shí)，建議要先把它當(dāng)做一個(gè)文件編輯器(可以打字然后保存)，等到有了一定經(jīng)驗(yàn)再去熟悉那些快捷鍵

先來(lái)熟悉一下界面及快捷命令(不用記)

3. 在命令行中使用vscode

如果你是 Windows用戶(hù)，安裝并重啟系統(tǒng)后，你就可以在命令行中使用 code 或者 code-insiders了，如果你希望立刻而不是等待重啟后使用，可以將 VS Code 的安裝目錄添加到系統(tǒng)環(huán)境變量 PATH中

如果你是mac用戶(hù)，安裝后打開(kāi)命名面板Cmd+Shift+P,搜索shell命令,點(diǎn)擊在PAth中安裝code命令，然后重啟終端就ok了

最基礎(chǔ)的使用就是使用code命令打開(kāi)文件或文件夾

code 文件夾地址,vscode 就會(huì)在新窗口中打開(kāi)該文件夾

如果你希望在已經(jīng)打開(kāi)的窗口打開(kāi)文件，可以使用-r參數(shù)

vscode命令還有其他功能，比如文件比較，打開(kāi)文件跳轉(zhuǎn)到指定的行和列，如有需要自行百度:bowing_woman:

注意：

在繼續(xù)看文章之前記住記住打開(kāi)命令面板的快捷鍵Cmd+shift+P(win下是Ctrl+shift+p)

一、代碼編輯

windows下的快捷鍵放在括號(hào)里

光標(biāo)的移動(dòng)基礎(chǔ) 移動(dòng)到行首 Cmd+左方向鍵 (win Home) 移動(dòng)到行尾 Cmd+右方向鍵 (win End) 移動(dòng)到文檔的開(kāi)頭和末尾 Cmd+上下方向鍵 （win Ctrl+Home/End）在花括號(hào){}左邊右邊之間跳轉(zhuǎn) Cmd+Shift+ (win Ctrl+Shift+) 進(jìn)階 回到上一個(gè)光標(biāo)的位置，Cmd+U(win Ctrl+U) 非常有用，有時(shí)候vue文件，你改了html，需要去下面改js，改完js又需要回去，這時(shí)候Cmd+U直接回在不同的文件之間回到上一個(gè)光標(biāo)的位置 Control+- (win 沒(méi)測(cè)試，不知道)，你改了a文件，改了b文件之后想回到a文件繼續(xù)編輯，mac使用controls+- 文本選擇 你只需要多按一個(gè)shift鍵就可以在光標(biāo)移動(dòng)的時(shí)候選中文本選中單詞 Cmd+D 下面要講的多光標(biāo)也會(huì)講到Cmd+D 對(duì)于代碼塊的選擇沒(méi)有快捷鍵，可以使用cmd+shift+p打開(kāi)命令面板，輸入選擇括號(hào)所有內(nèi)容,待會(huì)說(shuō)下如何添加快捷鍵

刪除 你可以選中了代碼之后再刪除，再按Backpack(是backpack嗎)或者delete刪除,但是那樣做太low了所以，最Geek的刪除方式是Cmd+Shift+K (win Ctrl+Shift+K),想刪多少刪多少，當(dāng)前你可以使用ctrl+x剪切，效果一樣的

代碼移動(dòng) Option+上下方向鍵(win Alt+上下)

代碼移動(dòng)的同時(shí)按住shift就可以實(shí)現(xiàn)代碼復(fù)制 Option+Shift+上下 添加注釋

注釋有兩種形式，單行注釋和塊注釋(在js中，單行注釋//,塊注釋/**/)

單行注釋 Cmd+/ （win Ctrl +/）塊注釋 Option+Shift+A

注意：不同語(yǔ)言使用的注釋不同

二、代碼格式代碼格式化

對(duì)整個(gè)文檔進(jìn)行格式化：Option+Shift+F (win Alt+Shift+F),vscode會(huì)根據(jù)你使用的語(yǔ)言，使用不同的插件進(jìn)行格式化，記得要下載相應(yīng)格式化的插件對(duì)選中代碼進(jìn)行格式化： Cmd+K Cmk+F win(Ctrl+K Ctrl+F) 代碼縮進(jìn) 真?zhèn)€文檔進(jìn)行縮進(jìn)調(diào)節(jié)，使用Cmd+Shift+P打開(kāi)命令面板，輸入縮進(jìn),然后選擇相應(yīng)的命令選中代碼縮進(jìn)調(diào)節(jié)：Cmd+] Cmd+[ 分別是減小和增加縮進(jìn)(win 下不知道，自行百度)

三、一些小技巧

調(diào)整字符的大小寫(xiě)，選中，然后在命令面板輸入轉(zhuǎn)化為大寫(xiě)或者轉(zhuǎn)化為小寫(xiě)

合并代碼行，多行代碼合并為一行，Cmd+J(win下未綁定)

行排序，將代碼行按照字母順序進(jìn)行排序，無(wú)快捷鍵，調(diào)出命令面板，輸入按升序排序或者按降序排序

四、多光標(biāo)特性使用鼠標(biāo)：

按住Option(win Alt),然后用鼠標(biāo)點(diǎn)，鼠標(biāo)點(diǎn)在哪里哪里就會(huì)出現(xiàn)一個(gè)光標(biāo)

注意：有的mac電腦上是按住Cmd，然后用鼠標(biāo)點(diǎn)才可以

快捷命令 Cmd+D (win Ctrl+D) 第一次按下時(shí)，它會(huì)選中光標(biāo)附近的單詞；第二次按下時(shí)，它會(huì)找到這個(gè)單詞第二次出現(xiàn)的位置，創(chuàng)建一個(gè)新的光標(biāo)，并且選中它。(注：cmd-k cmd-d 跳過(guò)當(dāng)前的選擇)

Option+Shift+i (win Alt+Shift+i) 首先你要選中多行代碼，然后按Option+Shift+i,這樣做的結(jié)果是：每一行后面都會(huì)多出來(lái)一個(gè)光標(biāo)

撤銷(xiāo)多光標(biāo) 使用Esc 撤銷(xiāo)多光標(biāo)鼠標(biāo)點(diǎn)一下撤銷(xiāo)

五、快速跳轉(zhuǎn)(文件、行、符號(hào)) 快速打開(kāi)文件

Cmd+P （win Ctrl+P）輸入你要打開(kāi)的文件名,回車(chē)打開(kāi)

這里有個(gè)小技巧，選中你要打開(kāi)的文件后，按Cmd+Enter,就會(huì)在一個(gè)新的編輯器窗口打開(kāi)(窗口管理，見(jiàn)下文)

在tab不同的文件間切換，cmd+shift+[]

行跳轉(zhuǎn)

加入瀏覽器報(bào)了個(gè)錯(cuò)，錯(cuò)誤在53行，如何快速跳轉(zhuǎn)到53行

Ctrl+g 輸入行號(hào)

如果你想跳轉(zhuǎn)到某個(gè)文件的某一行，你只需要先按下 “Cmd + P”，輸入文件名，然后在這之后加上 “:”和指定行號(hào)即可。

符號(hào)跳轉(zhuǎn)

符號(hào)可以是文件名、函數(shù)名，可以是css的類(lèi)名

Cmd+Shift+O(win Ctrl+Shift+o) 輸入你要跳轉(zhuǎn)的符號(hào)，回車(chē)進(jìn)行跳轉(zhuǎn)

win下輸入Ctrl+T，可以在不同文件的符號(hào)間進(jìn)行搜索跳轉(zhuǎn)

定義(definition)和實(shí)現(xiàn)(implementation)處

f12跳到函數(shù)的定義處

Cmd+f12(win Ctrl+f12)跳轉(zhuǎn)到函數(shù)的實(shí)現(xiàn)處

引用跳轉(zhuǎn)

很多時(shí)候，除了要知道一個(gè)函數(shù)或者類(lèi)的定義和實(shí)現(xiàn)以外，你可能還希望知道它們被誰(shuí)引用了，以及在哪里被引用了。這時(shí)你只需要將光標(biāo)移動(dòng)到函數(shù)或者類(lèi)上面，然后按下 Shift + F12，VS Code 就會(huì)打開(kāi)一個(gè)引用列表和一個(gè)內(nèi)嵌的編輯器。在這個(gè)引用列表里，你選中某個(gè)引用，VS Code 就會(huì)把這個(gè)引用附近的代碼展示在這個(gè)內(nèi)嵌的編輯器里。

六、代碼重構(gòu)

當(dāng)我們想修改一個(gè)函數(shù)或者變量的名字時(shí)候，我們只需把光標(biāo)放到函數(shù)或者變量名上，然后按下 F2，這樣這個(gè)函數(shù)或者變量出現(xiàn)的地方就都會(huì)被修改。