宇宙最強vscode教程

零、快速入門

有經驗的可以跳過快速入門或者大致瀏覽一遍

1. 命令面板

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

在命令面板中你可以輸入命令進行搜索(中英文都可以)，然後執行。

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

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

2. 界面介紹

剛上手使用vscode時，建議要先把它當做一個文件編輯器(可以打字然後保存)，等到有了一定經驗再去熟悉那些快捷鍵

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

3. 在命令行中使用vscode

如果你是 Windows用戶，安裝並重啓系統後，你就可以在命令行中使用 code 或者 code-insiders了，如果你希望立刻而不是等待重啓後使用，可以將 VS Code 的安裝目錄添加到系統環境變量 PATH中

如果你是mac用戶，安裝後打開命名面板Cmd+Shift+P,搜索shell命令,點擊在PAth中安裝code命令，然後重啓終端就ok了

最基礎的使用就是使用code命令打開文件或文件夾

code 文件夾地址,vscode 就會在新窗口中打開該文件夾

如果你希望在已經打開的窗口打開文件，可以使用-r參數

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

注意：

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

一、代碼編輯

windows下的快捷鍵放在括號裏

光標的移動

基礎

移動到行首 Cmd+左方向鍵 (win Home)
移動到行尾 Cmd+右方向鍵 (win End)
移動到文檔的開頭和末尾 Cmd+上下方向鍵（win Ctrl+Home/End）
在花括號{}左邊右邊之間跳轉 Cmd+Shift+ (win Ctrl+Shift+)

進階

回到上一個光標的位置，Cmd+U(win Ctrl+U) 非常有用，有時候vue文件，你改了html，需要去下面改js，改完js又需要回去，這時候Cmd+U直接回
在不同的文件之間回到上一個光標的位置 Control+- (win 沒測試，不知道)，你改了a文件，改了b文件之後想回到a文件繼續編輯，mac使用controls+-

文本選擇

你只需要多按一個shift鍵就可以在光標移動的時候選中文本
選中單詞 Cmd+D 下面要講的多光標也會講到Cmd+D
對於代碼塊的選擇沒有快捷鍵，可以使用cmd+shift+p打開命令面板，輸入選擇括號所有內容,待會說下如何添加快捷鍵

刪除

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

代碼移動

Option+上下方向鍵(win Alt+上下)

代碼移動的同時按住shift就可以實現代碼複製 Option+Shift+上下

添加註釋

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

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

注意：不同語言使用的註釋不同

二、代碼格式

代碼格式化

對整個文檔進行格式化：Option+Shift+F (win Alt+Shift+F),vscode會根據你使用的語言，使用不同的插件進行格式化，記得要下載相應格式化的插件
對選中代碼進行格式化： Cmd+K Cmk+F win(Ctrl+K Ctrl+F)

代碼縮進

真個文檔進行縮進調節，使用Cmd+Shift+P打開命令面板，輸入縮進,然後選擇相應的命令
選中代碼縮進調節：Cmd+] Cmd+[ 分別是減小和增加縮進(win 下不知道，自行百度)

三、一些小技巧

調整字符的大小寫，選中，然後在命令面板輸入轉化爲大寫或者轉化爲小寫
合併代碼行，多行代碼合併爲一行，Cmd+J(win下未綁定)
行排序，將代碼行按照字母順序進行排序，無快捷鍵，調出命令面板，輸入按升序排序或者按降序排序

四、多光標特性

使用鼠標：

按住Option(win Alt),然後用鼠標點，鼠標點在哪裏哪裏就會出現一個光標

注意：有的mac電腦上是按住Cmd，然後用鼠標點纔可以

快捷命令

Cmd+D (win Ctrl+D) 第一次按下時，它會選中光標附近的單詞；第二次按下時，它會找到這個單詞第二次出現的位置，創建一個新的光標，並且選中它。(注：cmd-k cmd-d 跳過當前的選擇)
Option+Shift+i (win Alt+Shift+i) 首先你要選中多行代碼，然後按Option+Shift+i,這樣做的結果是：每一行後面都會多出來一個光標

撤銷多光標

使用Esc 撤銷多光標
鼠標點一下撤銷

五、快速跳轉(文件、行、符號)

快速打開文件

Cmd+P （win Ctrl+P）輸入你要打開的文件名,回車打開

這裏有個小技巧，選中你要打開的文件後，按Cmd+Enter,就會在一個新的編輯器窗口打開(窗口管理，見下文)

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

行跳轉

加入瀏覽器報了個錯，錯誤在53行，如何快速跳轉到53行

Ctrl+g 輸入行號

如果你想跳轉到某個文件的某一行，你只需要先按下 “Cmd + P”，輸入文件名，然後在這之後加上 “:”和指定行號即可。

符號跳轉

符號可以是文件名、函數名，可以是css的類名

Cmd+Shift+O(win Ctrl+Shift+o) 輸入你要跳轉的符號，回車進行跳轉

win下輸入Ctrl+T，可以在不同文件的符號間進行搜索跳轉

定義(definition)和實現(implementation)處

f12跳到函數的定義處

Cmd+f12(win Ctrl+f12)跳轉到函數的實現處

引用跳轉

很多時候，除了要知道一個函數或者類的定義和實現以外，你可能還希望知道它們被誰引用了，以及在哪裏被引用了。這時你只需要將光標移動到函數或者類上面，然後按下 Shift + F12，VS Code 就會打開一個引用列表和一個內嵌的編輯器。在這個引用列表裏，你選中某個引用，VS Code 就會把這個引用附近的代碼展示在這個內嵌的編輯器裏。

六、代碼重構

當我們想修改一個函數或者變量的名字時候，我們只需把光標放到函數或者變量名上，然後按下 F2，這樣這個函數或者變量出現的地方就都會被修改。