VS code開發工具的使用教程

• 2020 年 10 月 18 日
• 筆記
• VS Code, web開發技術

前言

工欲善其事必先利其器，提高程式設計師的開發效率必須要有一個好的開發工具，當前最好的前端開發工具主要有VS code、sublime Text、Atom、Webstorm、Notepad++。

VS Code 是一款十分強大的程式碼編輯器，雖然出來時間比較短，但是使用頻率和受歡迎率已經遠遠超過了其他的編輯器，VS code適用於幾乎所有的編程與和開發任務，包含了非常豐富的應用插件，非常方便，越來越多的新生代互聯網青年正在使用它。

其實VS Code 這款軟體本身，是用 JavaScript 語言編寫的，是一款基於Electron框架編寫的客戶端編輯器，如果喜歡研究源碼可以去github下載源碼進行研究，Electron使用和學習在以後章節中介紹（具體請自行查閱基於 JS 的 PC 客戶端開發框架 Electron）。Jeff Atwood 在 2007 年提出了著名的 Atwood 定律：

任何能夠用 JavaScript 實現的應用系統，最終都必將用 JavaScript 實現。

Jeff Atwood 這個人是誰不重要（他是 Stack Overflow 網站的聯合創始人），重要的是這條定律。

前端目前是處在春秋戰國時代，各路英雄豪傑成為後浪，各種框架工具層出不窮，VS Code 軟體無疑是大前端時代最驕傲的工具。

如果你是做前端開發（JavaScript 程式語言為主），則完全可以將 VS Code 作為「主力開發工具」。這款軟體是為前端同學量身訂製的。

如果你是做其他語言方向的開發，並且不需要太複雜的集成開發環境，那麼，你可以把 VS Code 作為「程式碼編輯器」來使用，縱享絲滑。

甚至是一些寫文檔、寫作的同學，也經常把 VS Code 作為 markdown 寫作工具，毫無違和感。

退而求其次，即便你不屬於以上任何範疇，你還可以把 VS Code 當作最簡單的文本編輯器來使用，完勝 Windows 系統自帶的記事本。

以下是對VS Code基本使用的介紹：

一、VS Code 的介紹

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

微軟有兩種軟體：一種是 VS Code，一種是VS IDE。
VS Code是一款開發者的程式碼編輯器，提供了各種隨身的插件使用；VS IDE是微軟的重量級IDE工具，裡面集成了各種開發環境的編譯工具，特別是開發後端伺服器編程，提供了完整的C/C++、Java、Python、Go、Android等集成開發工具。類似於Eclipse IDE，只需要一鍵安裝即可。

IDE 與 編輯器的對比

IDE 和編輯器是有區別的：

• IDE（Integrated Development Environment，集成開發環境）：對程式碼有較好的智慧提示和相互跳轉，同時側重於工程項目，對項目的開發、調試工作有較好的影像化介面的支援，因此比較笨重。比如 Eclipse 的定位就是 IDE。還有很多優秀的IDE工具，例如：
  Visual Basic 6.0：
  

Visual C++ 6.0：

Dev C++：

Visual Studio 2015-2019：

QT Creator：

Eclipse：

IDEA：

PyCharm：

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

需要注意的是，VS Code 的定位是編輯器，而非 IDE ，但 VS Code 又比一般的編輯器的功能要豐富許多。可以這樣理解：VS Code 的體量是介於編輯器和 IDE 之間。程式設計師常用的一些優秀的編輯器例如：
VS Code、Sublime Text、Editplus、Notepad++、vim、Atom、Webstorm、chocolatapp、textpad等等。』

VS Code 的特點

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

• VS Code是一款免費的、開源的、高性能的、跨平台的、輕量級的程式碼編輯器，同時，在性能，語言支援、開源社區方面也做的很不錯！

• 跨平台支援 MacOS、Windows 和 Linux 等多個平台。

• VS Code 的源程式碼以 MIT 協議開源。

• 支援第三方插件，功能強大，生態系統完善。

• VS Code 自帶了 JavaScript、TypeScript 和 Node.js 的支援。也就是說，你在書寫 JS 和 TS 時，是自帶智慧提示的。當然，其他的語言，你可以安裝相應的擴展包插件，也會有智慧提示。

前端編輯器： VS Code 與 WebStorm、Sublime Text

經常看到這樣的問題：哪個編輯器/IDE 好用？是 VS Code 還是 WebStorm （WebStorm 其實是 IntelliJ IDEA 的訂製版）？我來做個對比：

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

• 記憶體佔用情況：根據我的觀察，VS Code 是很占記憶體的（尤其是當你打開多個窗口的時候），但如果你的記憶體條夠用，使用起來是不會有任何卡頓的感覺的。相比之下，IntelliJ IDEA 不僅非常占記憶體，而且還非常卡頓。如果你想換個既輕量級、又不佔記憶體的編輯器，最好還是使用「Sublime Text」編輯器。

• 使用比例：當然是 VS Code 更勝一籌。先不說別的，我就拿數據說話，我目前所在的研發團隊有 200 人左右（120個後台、80個前端），他們絕大部分人都在用 VS Code 編碼，妥妥的。如果想快速輕量級開發可以選擇sublime Text3. 也有很多豐富的插件可以使用。

所以，首選是VS code，其次是sublime Text3，再其次可以選擇其他自己喜歡的編輯器。

VS Code 的安裝

• VS Code 官網：//code.visualstudio.com

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

上圖中，直接點擊 download，一鍵下載安裝即可。

二、嶄露鋒芒：VS Code 快捷鍵

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

任何工具，掌握 20%的技能，足矣應對 80% 的工作。既然如此，你可能會問：那就只保留 20% 的特性，不久可以滿足 80%的用戶了嗎？

但我想說的是：那從來都不是同樣的 20%，每個人都會用到不同的功能。

掌握下面這些高頻核心快捷鍵，你和你的工具，足矣露出鋒芒。

1、工作區快捷鍵

2、跳轉操作

3、移動游標

4、編輯操作

5、多游標編輯

其他的多游標編輯操作：（很重要）

• 選中某個文本，然後反覆按住快捷鍵「 Cmd + D 」鍵（windows 用戶是按住「Ctrl + D」鍵）， 即可將全文中相同的詞逐一加入選擇。

• 選中一堆文本後，按住「Option + Shift + i」鍵（windows 用戶是按住「Alt + Shift + I」鍵），既可在每一行的末尾都創建一個游標。

6、刪除操作

備註：上面所講到的移動游標、編輯操作、刪除操作的快捷鍵，在其他編輯器里，大部分都適用。

7、程式語言相關

8、搜索相關

9、自定義快捷鍵

按住快捷鍵「Cmd + Shift + P」，彈出命令面板，在命令面板中輸入「快捷鍵」，可以進入快捷鍵的設置。

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

10、快捷鍵列表

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

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

快捷鍵參考鏈接

• 快捷鍵速查表[官方]：//code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

三、命令面板的使用

Mac 用戶按住快捷鍵 Cmd+Shift+P （Windows 用戶按住快捷鍵Ctrl+Shift+P），可以打開命令面板。效果如下：

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

1、設置字體大小

在命令面板輸入「字體」，可以進行字體的設置，效果如下：

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

2、快捷鍵設置

在命令面板輸入「快捷鍵」，就可以進入快捷鍵的設置。

3、大小寫轉換

選中文本後，在命令面板中輸入transfrom，就可以修改文本的大小寫了。

4、使用命令行啟動 VS Code

（1）輸入快捷鍵「Cmd + Shift + P 」，選擇install code command：

（2）使用命令行：

• code命令：啟動 VS Code 軟體

• code pathName/fileName命令：通過 VS Code 軟體打開指定目錄/指定文件。

四、私人訂製：VS Code 的常見配置

1、VS Code 設置為中文語言

Mac 用戶按住快捷鍵 Cmd+Shift+P （Windows 用戶按住快捷鍵Ctrl+Shift+P），打開命令面板。

在命令面板中，輸入Configure Display Language，選擇Install additional languages，然後安裝插件Chinese (Simplified) Language Pack for Visual Studio Code即可。

或者，我們可以直接安裝插件Chinese (Simplified) Language Pack for Visual Studio Code，是一樣的。

安裝完成後，重啟 VS Code。

2、麵包屑（Breadcrumb）

打開 VS Code 的設置項，選擇「用戶設置 -> 工作台 -> 導航路徑」，如下圖所示：

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

設置成功後，我們就可以查看到當前文件的「層級結構」，非常方便。如下圖所示：

有了這個麵包屑導航，我們可以在任意目錄、任意文件之間隨意跳轉。

3、左右顯示多個編輯器窗口（抄程式碼利器）

Mac 用戶按住快捷鍵 Cmd + \， Windows 用戶按住快捷鍵Ctrl + \，即可同時打開多個編輯器窗口，效果如下：

按快捷鍵「Cmd + 1 」切換到左邊的窗口，按快捷鍵「Cmd + 2 」切換到右邊的窗口。隨時隨地，想切就切。

學會了這一招，以後抄程式碼的時候，leader 再也不用擔心我抄得慢了，一天工資到手。

4、是否顯示程式碼的行號

VS Code 默認顯示程式碼的行號。你可以在設置項里搜索 editor.lineNumbers修改設置，配置項如下：

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

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

VS Code 會在程式碼的右側，默認顯示縮略圖。你可以在設置項里搜索 editor.minimap進行設置，配置項如下：

6、將當前行程式碼高亮顯示（更改游標所在行的背景色）

當我們把游標放在某一行時，這一行的背景色並沒有發生變化。如果想高亮顯示當前行的程式碼，需要設置兩步：

（1）在設置項里搜索editor.renderLineHighlight，將選項值設置為all或者line。

（2）在設置項里增加如下內容：

"workbench.colorCustomizations": {
    "editor.lineHighlightBackground": "#00000090",
    "editor.lineHighlightBorder": "#ffffff30"
}

上方程式碼，第一行程式碼的意思是：修改游標所在行的背景色（背景色設置為全黑，不透明度 90%）；第二行程式碼的意思是：修改游標所在行的邊框色。

7、改完程式碼後立即自動保存

方式一：

改完程式碼後，默認不會自動保存。你可以在設置項里搜索files.autoSave，修改配置項如下：

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

方式二：

當然，你也可以直接在菜單欄選擇「文件-自動保存」。勾選後，當你寫完程式碼後，文件會立即實時保存。

8、保存程式碼後，是否立即格式化

保存程式碼後，默認不會立即進行程式碼的格式化。你可以在設置項里搜索editor.formatOnSave查看該配置項：

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

9、空格 or 製表符

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

常見的設置項如下：

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

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

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

10、新建文件後的默認文件類型

當我們按下快捷鍵「Cmd + N」新建文件時，VS Code 默認無法識別這個文件到底是什麼類型的，因此也就無法識別相應的語法高亮。

如果你想修改默認的文件類型，可以在設置項里搜索files.defaultLanguage，設置項如下：

上圖中的紅框部分，填入你期望的默認文件類型。我填的是html類型，你也可以填寫成 javascript 或者 markdown，或者其他的語言類型。

11、刪除文件時，是否彈出確認框

當我們在 VS Code 中刪除文件時，默認會彈出確認框。如果你想修改設置，可以在設置項里搜索xplorer.confirmDelete。截圖如下：

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

接下來，我們來講一些更高級的配置。

12、文件對比

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

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

13、查找某個函數在哪些地方被調用了

比如我已經在a.js文件里調用了 foo()函數。那麼，如果我想知道foo()函數在其他文件中是否也被調用了，該怎麼做呢？

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

14、滑鼠操作

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

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

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

15、重構

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

命名重構：

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

方法重構：

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

16、在當前文件中搜索

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

• Cmd + F（Win 用戶是 Ctrl + F）：在當前文件中搜索，游標在搜索框里

• Cmd + G（Win 用戶是 F3）：在當前文件中搜索，游標仍停留在編輯器里

另外，你可能會注意到，搜索框里有很多按鈕，每個按鈕都對應著不同的功能，如下圖所示：

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

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

17、全局搜索

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

• Cmd + Shift + F（Win 用戶是 Ctrl + Shift +F）：在全局的文件夾中進行搜索。效果如下：

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

18、Git 版本管理

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

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

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

19、將工作區放大/縮小

我們在上面的設置項里修改字體大小後，僅僅只是修改了程式碼的字體大小。

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

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

如果你想恢復默認的工作區大小，可以在命令面板輸入重置縮放（英文是reset zoom）

20、創建多層子文件夾

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

那麼，就可以創建多層子文件夾，效果如下：

21、.vscode 文件夾的作用

為了統一團隊的 vscode 配置，我們可以在項目的根目錄下建立.vscode目錄，在裡面放置一些配置內容，比如：

• settings.json：工作空間設置、程式碼格式化配置、插件配置。

• sftp.json：ftp 文件傳輸的配置。

.vscode目錄里的配置只針對當前項目範圍內生效。將.vscode提交到程式碼倉庫，大家統一配置時，會非常方便。

22、自帶終端

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

23、markdown 語法支援

VS Code 自帶 markdown 語法高亮。也就是說，如果你是用 markdown 格式寫文章，則完全可以用 VS Code 進行寫作。

寫完 md 文件之後，你可以點擊右上角的按鈕進行預覽，如下圖所示：

我一般是安裝「Markdown Preview Github Styling」插件，以 GitHub 風格預覽 Markdown 樣式。樣式十分簡潔美觀。

你也可以在控制面板輸入Markdown: 打開預覽，直接全螢幕預覽 markdown 文件。

24、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 語法規則，請自行查閱。

25、修改字體，使用「Fira Code」字體

這款字體很漂亮，很適合用來寫程式碼：

安裝步驟如下：

（1）進入 //github.com/tonsky/FiraCode 網站，下載並安裝「Fira Code」字體。

（2）打開 VS Code 的「設置」，搜索font，修改相關配置為如下內容：

"editor.fontFamily": "'Fira Code',Menlo, Monaco, 'Courier New', monospace", // 設置字體顯示
"editor.fontLigatures": false,//控制是否啟用字體連字，true啟用，false不啟用

上方的第二行配置，取決於個人習慣，我是直接設置為"editor.fontLigatures": null，因為我不太習慣連字。

26、程式碼格式化：Prettier

我們可以使用 Prettier進行程式碼格式化，會讓程式碼的展示更加美觀。步驟如下：

（1）安裝插件 Prettier。

（2）在項目的根路徑下，新建文件.prettierrc，並在文件中添加如下內容：

{
  "printWidth": 150,
  "tabWidth": 4,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "tslintIntegration": true,
  "insertSpaceBeforeFunctionParenthesis": false
}

上面的內容，是我自己的配置，你可以參考。

更多配置，可以參考官方文檔：//prettier.io/docs/en/options.html

27、文件傳輸：sftp

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

步驟如下：

（1）安裝插件sftp。

（2）配置 sftp.json文件。 插件安裝完成後，輸入快捷鍵「cmd+shift+P」彈出命令面板，然後輸入sftp:config，回車，當前工程的.vscode文件夾下就會自動生成一個sftp.json文件，我們需要在這個文件里配置的內容可以是：

• host：伺服器的 IP 地址

• username：用戶名

• privateKeyPath：存放在本地的已配置好的用於登錄工作站的密鑰文件（也可以是 ppk 文件）

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

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

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

{
  "host": "192.168.xxx.xxx", //伺服器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"
  ]
}

（3）在 VS Code 的當前文件里，選擇「右鍵 -> upload」，就可以將本地的程式碼上傳到 指定的 ftp 伺服器上（也就是在上方 host 中配置的伺服器 ip）。

我們還可以選擇「右鍵 -> Diff with Remote」，就可以將本地的程式碼和 ftp 伺服器上的程式碼做對比。

七、VS Code 配置雲同步

我們可以將配置雲同步，這樣的話，當我們換個電腦時，即可將配置一鍵同步到本地，就不需要重新安裝插件了，也不需要重新配置軟體。

我們還可以把配置分享其他用戶，也可以把其他用戶的配置給自己用。

將自己本地的配置雲同步到 GitHub：

（1）安裝插件 settings-sync。

（2）安裝完插件後，在插件里使用 GitHub 帳號登錄。

（3）登錄後在 vscode 的介面中，可以選擇一個別人的 gist；也可以忽略掉，然後創建一個屬於自己的 gist。

（4）使用快捷鍵 「Command + Shift + P」，在彈出的命令框中輸入 sync，並選擇「更新/上傳配置」，這樣就可以把最新的配置上傳到 GitHub。

換另外一個電腦時，從雲端同步配置到本地：

（1）當我們換另外一台電腦時，可以先在 VS Code 中安裝 settings-sync 插件。

（2）安裝完插件後，在插件里使用 GitHub 帳號登錄。

（3）登錄之後，插件的介面上，會自動出現之前的同步記錄：

上圖中，我們點擊最新的那條記錄，就可將雲端的最新配置同步到本地：

如果你遠程的配置沒有成功同步到本地，那可能是網路的問題，此時，可以使用快捷鍵 「Command + Shift + P」，在彈出的命令框中輸入 sync，並選擇「下載配置」，多試幾次。

使用其他人的配置：

如果我們想使用別人的配置，首先需要對方提供給你 gist。具體步驟如下：

（1）安裝插件 settings-sync。

（2）使用快捷鍵 「Command + Shift + P」，在彈出的命令框中輸入 sync，並選擇「下載配置」

（3）在彈出的介面中，選擇「Download Public Gist」，然後輸入別人分享給你的 gist。注意，這一步不需要登錄 GitHub 帳號。

八、三頭六臂：VS Code 插件推薦

VS Code 有一個很強大的功能就是支援插件擴展，讓你的編輯器彷彿擁有了三頭六臂。

上圖中，點擊紅框部分，即可在輸入框里，查找你想要的插件名，然後進行安裝。

我來列舉幾個常見的插件，這些插件都很實用。注意：順序越靠前，越實用。

1、GitLens 【薦】

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

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

• 將游標放置在程式碼的當前行，可以看到這樣程式碼的提交者是誰，以及提交時間。這一點，是 GitLens 最便捷的功能。

• 查看某個 commit 的程式碼改動記錄

• 查看不同的分支

• 可以將兩個 commit 進行程式碼對比

• 甚至可以將兩個 branch 分支進行整體的程式碼對比。這一點，簡直是 GitLens 最強大的功能。當我們在不同分支 review 程式碼的時候，就可以用到這一招。

2、Git History

有些同學習慣使用編輯器中的 Git 管理工具，而不太喜歡要打開另外一個 Git UI 工具的同學，這一款插件滿足你查詢所有 Git 記錄的需求。

3、Live Server 【薦】

在本地啟動一個伺服器，程式碼寫完後可以實現「熱更新」，實時地在網頁中看到運行效果。就不需要每次都得手動刷新頁面了。

使用方式：安裝插件後，開始寫程式碼；程式碼寫完後，右鍵選擇「Open with Live Server」。

4、Chinese (Simplified) Language Pack for Visual Studio Code

讓軟體顯示為簡體中文語言。

5、Bracket Pair Colorizer 2：突出顯示成對的括弧【薦】

Bracket Pair Colorizer 2插件：以不同顏色顯示成對的括弧，並用連線標註括弧範圍。簡稱彩虹括弧。

另外，還有個Rainbow Brackets插件，也可以突出顯示成對的括弧。

6、sftp：文件傳輸 【薦】

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

詳細配置已經在上面講過。

7、open in browser

安裝open in browser插件後，在 HTML 文件中「右鍵選擇 –> Open in Default Browser」，即可在瀏覽器中預覽網頁。

8、highlight-icemode：選中相同的程式碼時，讓高亮顯示更加明顯【薦】

VSCode 自帶的高亮顯示，實在是不夠顯眼。用插件支援一下吧。

所用了這個插件之後，VS Code 自帶的高亮就可以關掉了：

在用戶設置里添加"editor.selectionHighlight": false即可。

參考鏈接：vscode 選中後相同內容高亮插件推薦

9、vscode-icons

vscode-icons 會根據文件的後綴名來顯示不同的圖標，讓你更直觀地知道每種文件是什麼類型的。

10、Project Manager

工作中，我們經常會來回切換多個項目，每次都要找到對應項目的目錄再打開，比較麻煩。Project Manager 插件可以解決這樣的煩惱，它提供了專門的視圖來展示你的項目，我們可以把常用的項目保存在這裡，需要時一鍵切換，十分方便。

11、TODO Highlight

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

//TODO:這裡有個bug，我一會兒再收拾你

或者：

//FIXME:我也不知道為啥， but it works only that way.

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

12、WakaTime 【薦】

統計在 VS Code 里寫程式碼的時間。統計效果如下：

13、Code Time

Code Time插件：記錄編程時間，統計程式碼行數。

安裝該插件後，VS Code 底部的狀態欄右下角可以看到時間統計。點擊那個位置之後，選擇「Code Time Dashboard」，即可查看統計結果。

備註：團長試了一下這個 code time 插件，發現統計結果不是很准。

14、Markdown Preview Github Styling 【薦】

以 GitHub 風格預覽 Markdown 樣式，十分簡潔優雅。就像下面這樣，左側書寫 Markdown 文本，右側預覽 Markdown 的渲染效果：

15、Markdown Preview Enhanced

預覽 Markdown 樣式。

Markdown All in One

這個插件將幫助你更高效地在 Markdown 中編寫文檔。

16、Settings Sync【薦】

• 地址：//github.com/shanalikhan/code-settings-sync

• 作用：多台設備之間，同步 VS Code 配置。通過登錄 GitHub 帳號來使用這個同步工具。

同步的詳細操作已在上面講過。

17、vscode-syncing

• 地址：//github.com/nonoroazoro/vscode-syncing

• 作用：多台設備之間，同步 VS Code 配置。

18、Vetur

Vue 多功能集成插件，包括：語法高亮，智慧提示，emmet，錯誤提示，格式化，自動補全，debugger。VS Code 官方欽定 Vue 插件，Vue 開發者必備。

19、ES7 React/Redux/GraphQL/React-Native snippets

React/Redux/react-router 的語法智慧提示。

20、minapp：小程式支援

小程式開發必備插件。

21、Prettier：程式碼格式化

Prettier 是一個程式碼格式化工具，只關注格式化，但不具備校驗功能。在一個多人協同開發的團隊中，統一的程式碼編寫規範非常重要。一套規範可以讓我們編寫的程式碼達到一致的風格，提高程式碼的可讀性和統一性。自然維護性也會有所提高。

22、ESLint：程式碼格式校驗

日常開發中，建議用可以用 Prettier 做程式碼格式化，然後用 eslint 做校驗。

23、Beautify

程式碼格式化工具。

備註：相比之下，Prettier 是當前最流行的程式碼格式化工具，比 Beautify 用得更多。

24、JavaScript(ES6) code snippets

ES6 語法智慧提示，支援快速輸入。

25、Search node_modules 【薦】

node_modules模組裡面的文件夾和模組實在是太多了，根本不好找。好在安裝 Search node_modules 這個插件後，輸入快捷鍵「Cmd + Shift + P」，然後輸入 node_modules，在彈出的選項中選擇 Search node_modules，即可搜索 node_modules 里的模組。

26、indent-rainbow：突出顯示程式碼縮進

indent-rainbow插件：突出顯示程式碼縮進。

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

27、javascript console utils：快速列印 log 日誌【薦】

安裝這個插件後，當我們按住快捷鍵「Cmd + Shift + L」後，即可自動出現日誌 console.log()。簡直是日誌黨福音。

當我們選中某個變數 name，然後按住快捷鍵「Cmd + Shift + L」，即可自動出現這個變數的日誌 console.log(name)。

其他的同類插件還有：Turbo Console Log。

不過，生產環境的程式碼，還是盡量少打日誌比較好，避免出現一些異常。

編程有三等境界：

• 第三等境界是打日誌，這是最簡單、便捷的方式，略顯低級，一般新手或資深程式設計師偷懶時會用。

• 第二等境界是斷點調試，在前端、Java、PHP、iOS 開發時非常常用，通過斷點調試可以很直觀地跟蹤程式碼執行邏輯、調用棧、變數等，是非常實用的技巧。

• 第一等境界是測試驅動開發，在寫程式碼之前先寫測試。與第二等的斷點調試剛好相反，大部分人不是很習慣這種方式，但在國外開發者或者敏捷愛好者看來，這是最高效的開發方式，在保證程式碼品質、重構等方面非常有幫助，是現代編程開發必不可少的一部分。

28、Code Spell Checker：單詞拼寫錯誤檢查

這個拼寫檢查程式的目標是幫助捕獲常見的單詞拼寫錯誤，可以檢測駝峰命名。從此告別 Chinglish.

29、Local History 【薦】

維護文件的本地歷史記錄，強烈建議安裝。程式碼意外丟失時，有時可以救命。

30、Polacode-2020：生成程式碼截圖 【薦】

可以把程式碼片段保存成美觀的圖片，主題不同，程式碼的配色方案也不同，也也可以自定義設置圖片的邊框顏色、大小、陰影。

尤其是在我們做 PPT 分享時需要用到程式碼片段時，或者需要在網路上優雅地分享程式碼片段時，這一招很有用。

生成的效果如下：

其他同類插件：CodeSnap。我們也可以通過 //carbon.now.sh/這個網站生成程式碼圖片

有人可能會說：直接用 QQ 截圖不行嗎？可以是可以，但不夠美觀、不夠乾淨。

31、Image Preview 【薦】

圖片預覽。滑鼠移動到圖片 url 上的時候，會自動顯示圖片的預覽和圖片尺寸。

32、Auto Close Tag、Auto Rename Tag

自動閉合標籤、自動對標籤重命名。

33、Better Comments

為注釋添加更醒目、帶分類的色彩。

34、CSS Peek

增強 HTML 和 CSS 之間的關聯，快速查看該元素上的 CSS 樣式。

35、Vue CSS Peek

CSS Peek 對 Vue 沒有支援，該插件提供了對 Vue 文件的支援。

36、Color Info

這個便捷的插件，將為你提供你在 CSS 中使用顏色的相關資訊。你只需在顏色上懸停游標，就可以預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關資訊了。

37、RemoteHub

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

RemoteHub插件的作用是：可以在本地查看 GitHub 網站上的程式碼，而不需要將程式碼下載到本地。

這個插件目前使用的人還不多，趕緊安裝起來嘗嘗鮮吧。

38、Live Share：實時編碼分享

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

安裝方式：

打開插件管理，搜索「live share」，安裝。安裝後重啟 VS Code，在左側會多出一個按鈕：

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

39、Import Cost

在項目開發過程中，我們會引入很多 npm 包，有時候可能只用到了某個包里的一個方法，卻引入了整個包，導致程式碼體積增大很多。Import Cost插件可以在程式碼中友好的提示我們，當前引入的包會增加多少體積，這很有助於幫我們優化程式碼的體積。

Paste JSON as Code

此插件可以將剪貼板中的 JSON 字元串轉換成工作程式碼。支援多種語言。

八、常見主題插件

給你的 VS Code 換個皮膚吧，免費的那種。
　操作：File（文件）- Preferences（首選項）- Color-Theme （顏色主題）

• Dracula Theme

• Material Theme

• Nebula Theme

• One Dark Pro

• One Monokai Theme

• Monokai Pro

• Ayu

• Snazzy Plus

• Dainty

• SynthWave '84

• GitHub Plus Theme：白色主題

• Horizon Theme：紅色主題

最後一段

如果你還有什麼推薦的 VS Code 插件，歡迎留言。

大家完全不用擔心這篇文章會過時，隨著 VS Code 的版本更新和插件更新，本文也會隨之更新。關於 VS Code 內容的後續更新，你可以關注我在 GitHub 上的前端入門項目，項目地址是：

//github.com/qianguyihao/Web

一個超級詳細和真誠的前端入門項目。

參考鏈接

• VSCode 插件大全｜ VSCode 高級玩家之第二篇

• //www.supuwoerc.xyz/tools/vscode/plugins.html

• 如何讓 VS Code 更好用 10 倍？這裡有一份 VS Code 新手指南

• 那些你應該考慮卸載的 VSCode 擴展

• VS Code 折騰記 – (16) 推薦一波實用的插件集

• VSCode 前端必備插件，有可能你裝了卻不知道如何使用？

• 能讓你開發效率翻倍的 VSCode 插件配置（上）

• //segmentfault.com/a/1190000012811886

• 「Vscode」打造類 sublime 的高顏值編輯器

• Mac Vscode 快捷鍵

• 使用 VSCode 的一些技巧