VS code開發工具的使用教程

前言

工欲善其事必先利其器，提高程式員的開發效率必須要有一個好的開發工具，當前最好的前端開發工具主要有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 官網：https://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 左下角的齒輪按鈕，效果如下：

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

快捷鍵參考鏈接

• 快捷鍵速查表[官方]：https://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）進入 https://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
}

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

更多配置，可以參考官方檔案：https://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【薦】

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

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

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

17、vscode-syncing

• 地址：https://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，我們也可以通過 https://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：紅色主題

參考鏈接

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

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

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

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

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

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

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

• https://segmentfault.com/a/1190000012811886

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

• Mac Vscode 快捷鍵

• 使用 VSCode 的一些技巧

標籤：其他

上一篇：短視頻批量決議下載工具，批量下載抖音短視頻，短視頻去水印工具，去水印神器吧

下一篇：冷月手撕408之作業系統(23)-輸入輸出管理IO的控制方式