第一次使用VS Code時你應該知道的一切配置

前言

本文最新內容將在GitHub上實時更新。

VS Code 本來是前端人員專用，但由於它實在是太好用了，於是，各種開發方向的碼農也正在用 VS Code 作為他們的主力程式設計工具。甚至是一些寫作的同學，也把 VS Code 作為 markdown 寫作工具。

寫下這篇文章，是順勢而為。

VS Code 的介紹

VS Code 的全稱是 Visual Studio Code，是一款開源的、免費的、跨平臺的、高效能的、輕量級的程式碼編輯器。它在效能、語言支援、開源社群方面，都做的很不錯。

編輯器 與 IDE

IDE和編輯器是有區別的：

• IDE ：對程式碼會有較好的智慧提示，同時側重於工程專案，對專案的開發、除錯工作有較好的影像化介面的支援，因此比較笨重。比如 Eclipse 的定位就是 IDE。

• 編輯器：要相對輕量許多，側重於文字的編輯。比如 Sublime Text 的定位就是編輯器。再比如 Windows 系統自帶的「記事本」就是最簡單的編輯器。

需要注意的是，VS Code 的定位是編輯器，而非IDE。但 VS Code 又比一般的編輯器的功能要豐富許多。

VS Code的一些補充

• VS Code 的使命，是讓開發者在編輯器裡擁有 IDE 那樣的開發體驗，比如程式碼的智慧提示、語法檢查、圖形化的除錯工具、外掛擴充套件、版本管理等。

• VS Code 的原始碼以MIT協議開源。

• VS Code 自帶了 TypeScript 和 Node.js 的支援。也就是說，你在書寫 JS 和 TS 時，是自帶智慧提示的。

• 有一點你可能不知道，VS Code 這個客戶端軟體是用 js 語言開發出來的（具體請自行查閱關鍵字Electron）。有句話說得好：能用 js 實現的功能，最終一定會用 js 實現。

前端利器之爭： VS Code 與 WebStorm

前端小白最喜歡問的一個問題是：哪個編輯器/IDE 好用？是VS Code還是 WebStorm （WebStorm 其實是 IntelliJ IDEA的定製版）？我來做個對比：

• 哪個更酷：顯然 VS Code 更酷。

• 記憶體佔用情況：根據我的觀察，VS Code是很佔記憶體的（尤其是當你開啟多個視窗的時候），但如果你的記憶體條夠用的話，使用起來是不會有任何卡頓的感覺的。相比之下，IDEA 不僅非常佔記憶體，而且還非常卡頓。

• 使用比例：當然是 VS Code 更勝一籌。先不說別的，我就拿資料說話，我目前所在的前端團隊有100人左右，絕大部分前端同學都在用 VS Code，妥妥的。

所以，如果你以後還問這個問題，那就真有些掉底了。

VS Code 的安裝

• VS Code 官網：code.visualstudio.com

VS Code 的安裝很簡單，直接去官網下載安裝包，然後雙擊安裝即可。

上圖中，直接點選 download 下載安裝即可。

VS Code快捷鍵

VS Code用得熟不熟，首先就看你是否會用快捷鍵。以下列出的內容，都是常用快捷鍵，而加粗部分的快捷鍵，使用頻率則非常高。

掌握10%的內容，足矣應對90%的工作。熟練使用它們，你就已經很牛了。

移動游標

Mac快捷鍵	Win快捷鍵	作用	備註
Cmd + ←		將游標定位到當前行的最左側	很常用
Cmd + →		將游標定位到當前行的最右側	很常用
Cmd + ↑	Ctrl + Home	將游標定位到文章的第一行
Cmd + ↓	Ctrl + End	將游標定位到文章的最後一行

根據上面的快捷鍵，我們可以舉一反三。補充如下：

• 「方向鍵」：在單個字元之間移動游標

• 「option + 左右方向鍵」：在單詞之間移動游標 。（很常用）

• 「Cmd + 左右方向鍵」：在整行之間移動游標。（很常用）

• 「Cmd + Shift + \」：在程式碼塊之間移動游標。

刪除操作

Mac快捷鍵	Win快捷鍵	作用	備註
option + delete		刪除游標之前的一個單詞	英文有效，很常用
option + backspace		刪除游標之後的一個單詞
Cmd + delete		刪除游標之前的整行內容	很常用
Cmd + backspace		刪除游標之後的整行內容
Cmd + shift + K	Ctrl + Shift + K	刪除整行	按「Cmd + X」也可以刪除整行，雖然它的作用是剪下

備註：上面所講到的移動游標、刪除操作的快捷鍵，在其他編輯器裡，也是同樣的操作。

編輯操作

Mac快捷鍵	Win快捷鍵	作用	備註
Cmd + Enter	Ctrl + Enter	在當前行下面新增一行，然後跳至該行	即使游標不在行尾，也能快速向下插入一行
Option + ↑	Alt + ↑	將程式碼向上移動	很常用
Option + ↓	Alt + ↓	將程式碼向下移動	很常用

JS語言相關

Mac快捷鍵	Win快捷鍵	作用	備註
Cmd + /	Ctrl + /	新增單行註釋	很常用
Option + Shift + F	Alt + shift + F	程式碼格式化	很常用
Ctrl + J		將多行程式碼合併為一行	Win 使用者可在命令皮膚搜尋”合併行“
Cmd +
Cmd + U	Ctrl + U	將游標的移動回退到上一個位置	撤銷游標的移動和選擇

跳轉操作

Mac快捷鍵	Win快捷鍵	作用	備註
Ctrl + Tab		在已經開啟的檔案之間進行跳轉
Cmd + P	Ctrl + P	在當前的專案工程裡，全域性搜尋檔案	很常用
Ctrl + G		跳轉到指定行
Cmd + Shift + O	Ctrl + shift + O	在當前檔案的各種方法之間進行跳轉

搜尋

Mac快捷鍵	Win快捷鍵	作用	備註
Cmd + F	Ctrl + F	在當前檔案中搜尋，游標在搜尋框裡
Cmd + G	F3	在當前檔案中搜尋，游標仍在編輯器裡
Cmd + Shift + F	Ctrl + Shift +F	全域性搜尋	很常用

多游標的使用

技巧1：按住 「Option」鍵（windows 使用者是按住「Alt」鍵） ，然後在頁面中希望中現游標的位置點選滑鼠。

技巧2：選中某個文字，然後反覆按住快捷鍵「 Cmd + D 」鍵（windows 使用者是按住「Ctrl + D」鍵）， 即可將全文中與游標當前所在位置的詞相同的詞逐一加入選擇。

技巧3：選中一堆文字後，按住「Option + Shift + i」鍵（windows 使用者是按住「Alt + Shift + I」鍵），既可在每一行的末尾都建立一個游標。

自定義快捷鍵

按住快捷鍵「Cmd + Shift + P」，彈出命令皮膚，在命令皮膚中輸入“快捷鍵”，可以進入快捷鍵的設定。

當然，你也可以選擇選單欄「偏好設定 --> 鍵盤快捷方式」，進入快捷鍵的設定：

快捷鍵列表

你可以點選 VS Code 左下角的齒輪按鈕，效果如下：

上圖中，在展開的選單中選擇「鍵盤快捷方式」，就可以檢視和修改所有的快捷鍵列表了：

VS Code 的常見設定項

麵包屑（Breadcrumb）

開啟 VS Code 的設定項，選擇「使用者設定 -> 工作臺 -> 導航路徑」，如下圖所示：

上圖中，將紅框部分打鉤即可。

設定成功後，我們就可以檢視到當前檔案的「層級結構」，非常方便。如下圖所示：

是否顯示程式碼的行號

VS Code 預設顯示程式碼的行號。你可以在設定項裡搜尋 editor.lineNumbers修改設定，配置項如下：

我建議保留這個設定項，無需修改。

右側是否顯示程式碼的縮圖

VS Code 會在程式碼的右側，預設顯示縮圖。你可以在設定項裡搜尋 editor.minimap進行設定，配置項如下：

將當前行程式碼高亮顯示

當我們把游標放在某一行時，這一行的背景色並沒有發生變化。如果想高亮顯示當前行的程式碼，你可以在設定項裡搜尋editor.renderLineHighlight進行設定。配置項如下：

我設定完之後，發現效果不是很明顯。有待優化。

空格 or 製表符

VS Code 會根據你所開啟的檔案來決定該使用空格還是製表。也就是說，如果你的專案中使用的都是製表符，那麼，當你在寫新的程式碼時，按下tab 鍵後，編輯器就會識別成製表符。

常見的設定項如下：

• editor.detectIndentation：自動檢測（預設開啟）。截圖如下：

• editor.insertSpaces：按 Tab 鍵時插入空格（預設）。截圖如下：

• editor.tabSize：一個製表符預設等於四個空格。截圖如下：

改完程式碼後立即自動儲存

改完程式碼後，預設不會自動儲存。你可以在設定項裡搜尋files.autoSave，修改配置項如下：

上圖中，我們將配置項修改為onFocusChange之後，那麼，當游標離開該檔案後，這個檔案就會自動儲存了。非常方便。

儲存程式碼後，是否立即格式化

儲存程式碼後，預設不會立即進行程式碼的格式化。你可以在設定項裡搜尋editor.formatOnSave檢視該配置項：

我覺得這個配置項保持預設就好，不用打鉤。

新建檔案後的預設檔案型別

當我們按下快捷鍵「Cmd + N」新建檔案時，VS Code 預設無法識別這個檔案到底是什麼型別的，因此也就無法識別相應的語法高亮。如果你想修改預設的檔案型別，可以在設定項裡搜尋files.defaultLanguage，設定項如下：

上圖中的紅框部分，填入你期望的預設檔案型別。我填的是html型別，你也可以填寫成 javascript 或者 markdown，或者其他的語言型別。

刪除檔案時，是否彈出確認框

當我們在 VS Code 中刪除檔案時，預設會彈出確認框。如果你想修改設定，可以在設定項裡搜尋xplorer.confirmDelete。截圖如下：

我建議這個設定項保持預設的打鉤就好，不用修改。刪除檔案前的彈窗提示，也是為了安全考慮，萬一手賤不小心刪了呢？

命令皮膚的使用

Mac使用者按住快捷鍵 Cmd+Shift+P （Windows使用者按住快捷鍵Ctrl+Shift+P），可以開啟命令皮膚。效果如下：

如果們需要修改一些設定項，可以通過「命令皮膚」來操作，效率會更高。這裡列舉一些。

字型設定

在命令皮膚輸入“字型”，可以進行字型的設定，效果如下：

當然，你也可以在選單欄，選擇「首選項-設定-常用設定」，在這個設定項裡修改字型大小。

快捷鍵設定

在命令皮膚輸入“快捷鍵”，就可以進入快捷鍵的設定。

大小寫轉換

選中文字後，在命令皮膚中輸入transfrom，就可以修改文字的大小寫了。

VS Code 的常用技巧

檔案對比

VS Code 預設支援對比兩個檔案的內容。選中兩個檔案，然後右鍵選擇「將已選項進行比較」即可，效果如下：

VS Code自帶的對比功能並不夠強大，我們可以安裝外掛compareit，進行更豐富的對比。比如說，安裝完外掛compareit之後，我們可以將「當前檔案」與「剪下板」裡的內容進行對比：

查詢某個函式在哪些地方被呼叫了

比如我已經在a.js檔案裡呼叫了 foo()函式。那麼，如果我想知道foo()函式在其他檔案中是否也被呼叫了，該怎麼做呢？

做法如下：在 a.js 檔案裡，選中foo()函式（或者將游標放置在foo()函式上），然後按住快捷鍵「Shift + F12」，就能看到 foo()函式在哪些地方被呼叫了，比較實用。

滑鼠操作

• 在當前行的位置，滑鼠三擊，可以選中當前行。

• 用滑鼠單擊檔案的行號，可以選中當前行。

• 在某個行號的位置，上下移動滑鼠，可以選中多行。

重構

重構分很多種，我們來舉幾個例子。

1、命名重構：

當我們嘗試去修改某個函式（或者變數名）時，我們可以把游標放在上面，然後按下「F2」鍵，那麼，這個函式（或者變數名）出現的地方都會被修改。

2、方法重構：

選中某一段程式碼，這個時候，程式碼的左側會出現一個「燈泡圖示」，點選這個圖示，就可以把這段程式碼提取為一個單獨的函式。

在當前檔案中搜尋

在上面的快捷鍵列表中，我們已經知道如下快捷鍵：

• Cmd + F：在當前檔案中搜尋，游標在搜尋框裡

• Cmd + G：在當前檔案中搜尋，游標仍在編輯器裡

但是，你可能會注意到，搜尋框裡有很多按鈕，每個按鈕都對應著不同的功能，如下圖所示：

上圖中，你可以通過「Tab」鍵和「Shift + Tab」鍵在輸入框和替換框之間進行切換。

「在選定內容中查詢」這個功能還是比較實用的。你也可以在設定項裡搜尋 editor.find.autoFindInSelection，勾選該設定項後，那麼，當你選中指定內容後，然後按住「Cmd + F」，就可以自動只在這些內容裡進行查詢。該設定項如下圖所示：

正常情況下，我建議這個設定項不用勾選。

全域性搜尋

在上面的快捷鍵列表中，我們已經知道如下快捷鍵：

• Cmd + Shift + F（Win使用者是Ctrl + Shift +F）：在全域性的資料夾中進行搜尋。效果如下：

上圖中，你可以點選紅框部分，展開更多的配置項。

Git版本管理

VS Code 自帶了 Git 版本管理，如下圖所示：

上圖中，我們可以在這裡進行常見的git 命令操作。如果你還不熟悉 Git版本管理，先去補補課吧。

與此同時，我建議安裝外掛GitLens，它是 VS Code 中我最推薦的一個外掛，簡直是Git神器，碼農必備。

將工作區放大/縮小

我們在上面的設定項裡修改字型大小後，僅僅只是修改了程式碼的字型大小。

如果你想要縮放整個工作區（包括程式碼的字型、左側導航欄的字型等），可以按下快捷鍵「cmd +/-」。windows使用者是按下「ctrl +/-」

當我們在給別人演示程式碼的時候，這一招十分管用。

如果你想恢復預設的工作區大小，可以在命令皮膚輸入重置縮放（英文是reset zoom）

建立多層子資料夾

我們可以在新建資料夾的時候，如果直接輸入aa/bb/cc，比如：

那麼，就可以建立多層子資料夾，效果如下：

.vscode 資料夾的作用

如果你發現專案的根目錄下有一個.vscode資料夾，說明這個資料夾代表的是當前專案的配置。

這個資料夾裡可能包含以下集中檔案：

• settings.json：工作空間設定。只針對當前專案有效。比如說，我可以在這裡面要求當前專案的程式碼統一使用製表符，而不需要要求每一位碼農去修改各自的配置檔案。

• sftp.json：ftp檔案傳輸的配置。

自帶終端

我們可以按下「Ctrl + `」開啟 VS Code 自帶的終端。我認為內建終端並沒有那麼好用，我更建議你使用第三方的終端 item2。

markdown語法支援

VS Code自帶 markdown 語法高亮，寫完 md 檔案之後，你可以點選右上角的按鈕進行預覽，如下圖所示：

你也可以在控制皮膚輸入Markdown: 開啟預覽，直接全屏預覽 markdown檔案。

Emmet in VS Code

Emmet可以極大的提高 html 和 css 的編寫效率，它提供了一種非常簡練的語法規則。

舉個例子，我們在編輯器中輸入縮寫程式碼：ul>li*6 ，然後按下 Tab 鍵，即可得到如下程式碼片段：

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
複製程式碼

VS Code 預設支援 Emmet。更多 Emmet 語法規則，請自行查閱。

外掛擴充套件 / 外掛推薦

VS Code 有一個很強大的功能就是支援外掛擴充套件。

上圖中，點選紅框部分，即可在輸入框裡，查詢你想要的外掛名，然後進行安裝。

我來列舉幾個常見的外掛，這些外掛都很實用。

GitLens

我強烈建議你安裝外掛GitLens，它是 VS Code 中我最推薦的一個外掛，簡直是Git神器，碼農必備。如果你不知道，那真是out了。

GitLens 在 Git 管理上有很多強大的功能，比如：

• 檢視某個 commit 的程式碼改動記錄

• 檢視不同的分支

• 可以將兩個 commit 進行程式碼對比，甚至可以將兩個 branch 分支進行程式碼比對。這一點，簡直是 GitLens 最強大的功能。

RemoteHub

不要驚訝，RemoteHub 和 GitLens 是同一個作者開發出來的。

RemoteHub外掛的作用是：可以在本地檢視 GitHub 網站上的程式碼，而不需要將程式碼下載到本地。

這個外掛目前使用的人還不多，趕緊安裝起來嚐嚐鮮吧。

TODO Highlight

寫程式碼過程中，突然發現一個Bug，但是又不想停下來手中的活，以免打斷思路，怎麼辦？按照程式碼規範，我們一般是在程式碼中加個TODO註釋。比如：（注意，一定要寫成大寫TODO，而不是小寫的todo）

//TODO:這裡有個bug，我一會兒再收拾你
複製程式碼

或者：

//FIXME:我也不知道為啥， but it works only that way.
複製程式碼

安裝了外掛 TODO Highlight之後，按住「Cmd + Shift + P」開啟命令皮膚，輸入「Todohighlist」，選擇相關的命令，我們就可以看到一個 todoList 的清單。

Rainbow Brackets：突出顯示成對的括號

Rainbow Brackets外掛：突出顯示成對的括號。

indent-rainbow：突出顯示縮排

indent-rainbow外掛：突出顯示縮排。

安裝完成後，效果如下圖所示：

sftp：檔案傳輸

如果你需要將本地檔案通過 ftp 的形式上傳到區域網的伺服器，可以安裝sftp這個外掛，很好用。在公司會經常用到。

安裝完成後，輸入快捷鍵「cmd+shift+P」彈出命令皮膚，然後輸入sftp:config，回車，當前工程的.vscode資料夾下就會自動生成一個sftp.json檔案，我們需要在這個檔案裡配置的內容可以是：

• host：伺服器的IP地址

• username：工作站自己的使用者名稱

• privateKeyPath：存放在本地的已配置好的用於登入工作站的金鑰檔案（也可以是ppk檔案）

• remotePath：工作站上與本地工程同步的資料夾路徑，需要和本地工程檔案根目錄同名，且在使用sftp上傳檔案之前，要手動在工作站上mkdir生成這個根目錄

• ignore：指定在使用sftp: sync to remote的時候忽略的檔案及資料夾，注意每一行後面有逗號，最後一行沒有逗號

舉例如下：(注意，其中的註釋需要去掉)

{
    "host": "",     //伺服器ip
    "port": 22,     //埠，sftp模式是22
    "username": "", //使用者名稱
    "password": "", //密碼
    "protocol": "sftp", //模式
    "agent": null,
    "privateKeyPath": null,
    "passphrase": null,
    "passive": false,
    "interactiveAuth": false,
    "remotePath": "/root/node/build/",  //伺服器上的檔案地址
    "context": "./server/build",        //本地的檔案地址

    "uploadOnSave": true,   //監聽儲存並上傳
    "syncMode": "update",
    "watcher": {            //監聽外部檔案
        "files": false,     //外部檔案的絕對路徑
        "autoUpload": false,
        "autoDelete": false
    },
    "ignore": [             //忽略項
        "**/.vscode/**",
        "**/.git/**",
        "**/.DS_Store"
    ]
}
複製程式碼

Live Share：實時編碼分享

Live Share這個神奇的外掛是由微軟官方出品，它的作用是：實時編碼分享。也就是說，它可以實現你和你的同伴一起寫程式碼。這絕對就是結對程式設計的神器啊。

安裝方式：

開啟外掛管理，搜尋“live share”，安裝。安裝後重啟 VS Code，在左側會多出一個按鈕：

上圖中，點選紅框部分，登入後就可以分享你的工作空間了。

Settings Sync

• 地址：github.com/shanalikhan…

• 作用：多臺裝置之間，同步 VS Code 配置。

vscode-pigments

css顏色高亮顯示。

vscode-syncing

• 地址：github.com/nonoroazoro…

• 作用：多臺裝置之間，同步 VS Code 配置。

最後一段

如果你有什麼推薦的 VS Code 外掛，歡迎留言。

同時，你也可以關注我在 GitHub 上的 前端入門專案，超級詳細和真誠。