vscode配置使用教程

來源 https://zhuanlan.zhihu.com/p/62913725

參考 https://zhuanlan.zhihu.com/p/113222681

 

一、VS Code 的介紹

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

微軟有兩種軟件：一種是 VS Code，一種是其他軟件。

IDE 與 編輯器的對比

IDE 和編輯器是有區別的：

• IDE（Integrated Development Environment，集成開發環境）：對代碼有較好的智能提示和相互跳轉，同時側重於工程項目，對項目的開發、調試工作有較好的圖像化界面的支持，因此比較笨重。比如 Eclipse 的定位就是 IDE。
• 編輯器：要相對輕量許多，側重於文本的編輯。比如 Sublime Text 的定位就是編輯器。再比如 Windows 系統自帶的「記事本」就是最簡單的編輯器。

需要注意的是，VS Code 的定位是編輯器，而非 IDE ，但 VS Code 又比一般的編輯器的功能要豐富許多。可以這樣理解：VS Code 的體量是介於編輯器和 IDE 之間。

VS Code 的特點

• VS Code 的使命，是讓開發者在編輯器里擁有 IDE 那樣的開發體驗，比如代碼的智能提示、語法檢查、圖形化的調試工具、插件擴展、版本管理等。
• 跨平台支持 MacOS、Windows 和 Linux 等多個平台。
• VS Code 的源代碼以 MIT 協議開源。
• 支持第三方插件，功能強大，生態系統完善。
• VS Code 自帶了 JavaScript、TypeScript 和 Node.js 的支持。也就是說，你在書寫 JS 和 TS 時，是自帶智能提示的。當然，其他的語言，你可以安裝相應的擴展包插件，也會有智能提示。

前端利器之爭： VS Code 與 WebStorm

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

• 哪個更酷：顯然 VS Code 更酷。
• 內存占用情況：根據我的觀察，VS Code 是很占內存的（尤其是當你打開多個窗口的時候），但如果你的內存條夠用，使用起來是不會有任何卡頓的感覺的。相比之下，IntelliJ IDEA 不僅非常占內存，而且還非常卡頓。如果你想換個既輕量級、又不占內存的編輯器，最好還是使用「Sublime Text」編輯器。
• 使用比例：當然是 VS Code 更勝一籌。先不說別的，我就拿數據說話，我目前所在的研發團隊有 200 人左右（120個后台、80個前端），他們絕大部分人都在用 VS Code 編碼，妥妥的。

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

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 換個皮膚吧，免費的那種。

• 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 上的前端入門項目，項目地址是：

https://github.com/qianguyihao/Web

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

 

=============== End