前言
本文最新內容將在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 官網：https://code.visualstudio.com
VS Code 的安裝很簡單，直接去官網下載安裝包，然后雙擊安裝即可。
上圖中，直接點擊 download 下載安裝即可。
VS Code快捷鍵
VS Code用得熟不熟，首先就看你是否會用快捷鍵。以下列出的內容，都是常用快捷鍵，而加粗部分的快捷鍵，使用頻率則非常高。
掌握10%的內容，足矣應對90%的工作。熟練使用它們，你就已經很牛了。
移動光標
| Mac快捷鍵 | Win快捷鍵 | 作用 | 備注 |
|---|---|---|---|
| Cmd + ← | Fn + ← | 將光標定位到當前行的最左側 | 很常用 |
| Cmd + → | Fn + → | 將光標定位到當前行的最右側 | 很常用 |
| Cmd + ↑ | Ctrl + Home | 將光標定位到文章的第一行 | |
| Cmd + ↓ | Ctrl + End | 將光標定位到文章的最后一行 |
根據上面的快捷鍵，我們可以舉一反三。補充如下：
-
「方向鍵」：在單個字符之間移動光標
-
「option + 左右方向鍵」：在單詞之間移動光標（很常用）。注：Win 快捷鍵是「Ctrl + 左右方向鍵」。
-
「Cmd + 左右方向鍵」：在整行之間移動光標（很常用）。注：Win 的快捷鍵是「Fn + 左右方向鍵」
-
「
Cmd + Shift + \」：在代碼塊之間移動光標。
刪除操作
| Mac快捷鍵 | Win快捷鍵 | 作用 | 備注 |
|---|---|---|---|
| option + Backspace | Ctrl + Backspace | 刪除光標之前的一個單詞 | 英文有效，很常用 |
| option + delete | Ctrl + delete | 刪除光標之后的一個單詞 | |
| Cmd + delete | 刪除光標之前的整行內容 | 很常用 | |
| Cmd + delete | 刪除光標之后的整行內容 | ||
| 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 | Ctrl + Tab | 在已經打開的文件之間進行跳轉 | |
| Cmd + P | Ctrl + P | 在當前的項目工程里，全局搜索文件 | 很常用 |
| Ctrl + G | 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」鍵），既可在每一行的末尾都創建一個光標。
工作區快捷鍵
| Mac快捷鍵 | Win快捷鍵 | 作用 | 備注 |
|---|---|---|---|
| Cmd + B | Ctrl + B | 顯示/隱藏側邊欄 | 很實用 |
Cmd + \ |
Ctrl + \ |
創建多個編輯器 | 比較實用 |
| Cmd + Option + 左右方向鍵 | Ctrl + Pagedown/Pageup | 在已經打開的文件之間進行切換 | 非常實用 |
| Ctrl + Tab | Ctrl + Tab | 在已經打開的文件之間進行跳轉 | 不如上面的快捷鍵實用 |
| Cmd + J | Ctrl + J | 顯示/隱藏控制台 |
自定義快捷鍵
按住快捷鍵「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（Win用戶是Ctrl + F）：在當前文件中搜索，光標在搜索框里
-
Cmd + G（Win用戶是 F3）：在當前文件中搜索，光標仍在編輯器里
但是，你可能會注意到，搜索框里有很多按鈕，每個按鈕都對應着不同的功能，如下圖所示：
上圖中，你可以通過「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 管理上有很多強大的功能，比如：
-
將光標放置在代碼的當前行，可以看到這樣代碼的提交者是誰，以及提交時間。這一點，是 GitLens 最便捷的功能。
-
查看某個 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 的清單。
Bracket Pair Colorizer 2：突出顯示成對的括號【薦】
Bracket Pair Colorizer 2插件：以不同顏色顯示括號並用連線標注括號范圍。
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"
]
}
顏色主題推薦： SynthWave '84
SynthWave '84 這個主題很酷。
Live Share：實時編碼分享
Live Share這個神奇的插件是由微軟官方出品，它的作用是：實時編碼分享。也就是說，它可以實現你和你的同伴一起寫代碼。這絕對就是結對編程的神器啊。
安裝方式：
打開插件管理，搜索“live share”，安裝。安裝后重啟 VS Code，在左側會多出一個按鈕：
上圖中，點擊紅框部分，登錄后就可以分享你的工作空間了。
Settings Sync
-
作用：多台設備之間，同步 VS Code 配置。
vscode-pigments
css顏色高亮顯示。
vscode-syncing
-
作用：多台設備之間，同步 VS Code 配置。
參考鏈接
最后一段
如果你有什么推薦的 VS Code 插件，歡迎留言。
同時，你也可以關注我在 GitHub 上的 前端入門項目，超級詳細和真誠。