前言VS Code 是一款十分強大的代碼編輯器，雖然出來時間比較短，但是使用頻率和受歡迎率已經遠遠超過了其他的編輯器 ， VS code適用于幾乎所有的編程與和開發任務，包含了非常豐富的應用插件，非常方便，越來越多的新生代互聯網青年正在使用它 。
其實VS Code 這款軟件本身，是用 JavaScript 語言編寫的，是一款基于Electron框架編寫的客戶端編輯器，如果喜歡研究源碼可以去Github下載源碼進行研究，Electron使用和學習在以后章節中介紹（具體請自行查閱基于 JS 的 PC 客戶端開發框架 Electron） 。Jeff Atwood 在 2007 年提出了著名的 Atwood 定律：
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 C6.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等等 ?！?br /> 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 不僅非常占內存 ， 而且還非?？D 。如果你想換個既輕量級、又不占內存的編輯器，最好還是使用「Sublime Text」編輯器 。使用比例：當然是 VS Code 更勝一籌 。先不說別的，我就拿數據說話，我目前所在的研發團隊有 200 人左右（120個后臺、80個前端），他們絕大部分人都在用 VS Code 編碼，妥妥的 。如果想快速輕量級開發可以選擇sublime Text3. 也有很多豐富的插件可以使用 。【code開發工具的使用教程 vs code主要功能】所以，首選是VS code，其次是sublime Text3 ， 再其次可以選擇其他自己喜歡的編輯器 。
VS Code 的安裝VS Code 官網：https://code.visualstudio.comVS Code 的安裝很簡單，直接去官網下載安裝包 ， 然后雙擊安裝即可 。

文章插圖
上圖中，直接點擊 download，一鍵下載安裝即可 。
二、嶄露鋒芒：VS Code 快捷鍵VS Code 用得熟不熟，首先就看你是否會用快捷鍵 。以下列出的內容 ， 都是常用快捷鍵，而加粗部分的快捷鍵，使用頻率則非常高 。
任何工具，掌握 20%的技能 ， 足以應對 80% 的工作 。既然如此，你可能會問：那就只保留 20% 的特性，不久可以滿足 80%的用戶了嗎？
但我想說的是：那從來都不是同樣的 20%，每個人都會用到不同的功能 。
掌握下面這些高頻核心快捷鍵，你和你的工具 ， 足矣露出鋒芒 。
1、工作區快捷鍵

文章插圖
2、跳轉操作

文章插圖
3、移動光標

文章插圖
4、編輯操作

文章插圖
5、多光標編輯

文章插圖
6、刪除操作

文章插圖
7、編程語言相關

文章插圖
8、搜索相關

文章插圖
9、自定義快捷鍵按住快捷鍵「CmdShiftP」，彈出命令面板，在命令面板中輸入“快捷鍵”，可以進入快捷鍵的設置 。
當然，你也可以選擇菜單欄「偏好設置 --> 鍵盤快捷方式」，進入快捷鍵的設置：

文章插圖
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）輸入快捷鍵「CmdShiftP 」，選擇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\，即可同時打開多個編輯器窗口，效果如下：

文章插圖
按快捷鍵「Cmd1 」切換到左邊的窗口，按快捷鍵「Cmd2 」切換到右邊的窗口 。隨時隨地，想切就切 。
學會了這一招，以后抄代碼的時候 ， 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、新建文件后的默認文件類型當我們按下快捷鍵「CmdN」新建文件時，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()函數上） ， 然后按住快捷鍵「ShiftF12」，就能看到 foo()函數在哪些地方被調用了，比較實用 。
14、鼠標操作在當前行的位置，鼠標三擊，可以選中當前行 。用鼠標單擊文件的行號，可以選中當前行 。在某個行號的位置，上下移動鼠標，可以選中多行 。15、重構重構分很多種 ， 我們來舉幾個例子 。
命名重構：
當我們嘗試去修改某個函數（或者變量名）時，我們可以把光標放在上面，然后按下「F2」鍵，那么，這個函數（或者變量名）出現的地方都會被修改 。
方法重構：
選中某一段代碼，這個時候，代碼的左側會出現一個「燈泡圖標」，點擊這個圖標 ， 就可以把這段代碼提取為一個單獨的函數 。
16、在當前文件中搜索在上面的快捷鍵列表中，我們已經知道如下快捷鍵：
CmdF（Win 用戶是 CtrlF）：在當前文件中搜索，光標在搜索框里CmdG（Win 用戶是 F3）：在當前文件中搜索 ， 光標仍停留在編輯器里另外，你可能會注意到，搜索框里有很多按鈕 ， 每個按鈕都對應著不同的功能，如下圖所示：

文章插圖
上圖中，你可以通過「Tab」鍵和「ShiftTab」鍵在輸入框和替換框之間進行切換 。
「在選定內容中查找」這個功能還是比較實用的 。你也可以在設置項里搜索 editor.find.autoFindInSelection，勾選該設置項后，那么，當你選中指定內容后，然后按住「CmdF」，就可以自動只在這些內容里進行查找 。該設置項如下圖所示：

文章插圖
17、全局搜索在上面的快捷鍵列表中，我們已經知道如下快捷鍵：
CmdShiftF（Win 用戶是 CtrlShiftF）：在全局的文件夾中進行搜索 。效果如下：

文章插圖
上圖中，你可以點擊紅框部分，展開更多的配置項 。
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 CodeEmmet可以極大的提高 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）使用快捷鍵 「CommandShiftP」，在彈出的命令框中輸入 sync，并選擇「更新/上傳配置」，這樣就可以把最新的配置上傳到 GitHub 。
換另外一個電腦時，從云端同步配置到本地：
（1）當我們換另外一臺電腦時，可以先在 VS Code 中安裝 settings-sync 插件 。
（2）安裝完插件后，在插件里使用 GitHub 賬號登錄 。
（3）登錄之后，插件的界面上 ， 會自動出現之前的同步記錄：

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

文章插圖
如果你遠程的配置沒有成功同步到本地，那可能是網絡的問題，此時 ， 可以使用快捷鍵 「CommandShiftP」，在彈出的命令框中輸入 sync，并選擇「下載配置」，多試幾次 。
使用其他人的配置：
如果我們想使用別人的配置，首先需要對方提供給你 gist 。具體步驟如下：
（1）安裝插件 settings-sync 。
（2）使用快捷鍵 「CommandShiftP」 ， 在彈出的命令框中輸入 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-iconsvscode-icons 會根據文件的后綴名來顯示不同的圖標，讓你更直觀地知道每種文件是什么類型的 。
10、Project Manager工作中，我們經常會來回切換多個項目，每次都要找到對應項目的目錄再打開，比較麻煩 。Project Manager 插件可以解決這樣的煩惱，它提供了專門的視圖來展示你的項目，我們可以把常用的項目保存在這里，需要時一鍵切換，十分方便 。
11、TODO Highlight寫代碼過程中，突然發現一個 Bug，但是又不想停下來手中的活，以免打斷思路，怎么辦？按照代碼規范，我們一般是在代碼中加個 TODO 注釋 。比如：（注意，一定要寫成大寫TODO，而不是小寫的todo）
//TODO:這里有個bug，我一會兒再收拾你
或者：
//FIXME:我也不知道為啥，but it works only that way.
安裝了插件 TODO Highlight之后 ， 按住「CmdShiftP」打開命令面板，輸入「Todohighlist」，選擇相關的命令，我們就可以看到一個 todoList 的清單 。
12、WakaTime 【薦】統計在 VS Code 里寫代碼的時間 。統計效果如下：

文章插圖
13、Code TimeCode 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、VeturVue 多功能集成插件，包括：語法高亮，智能提示，emmet，錯誤提示 ， 格式化，自動補全，debugger 。VS Code 官方欽定 Vue 插件，Vue 開發者必備 。
19、ES7 React/Redux/GraphQL/React-Native snippetsReact/Redux/react-router 的語法智能提示 。
20、minapp：小程序支持小程序開發必備插件 。
21、Prettier：代碼格式化Prettier 是一個代碼格式化工具，只關注格式化，但不具備校驗功能 。在一個多人協同開發的團隊中，統一的代碼編寫規范非常重要 。一套規范可以讓我們編寫的代碼達到一致的風格，提高代碼的可讀性和統一性 。自然維護性也會有所提高 。
22、ESLint：代碼格式校驗日常開發中，建議用可以用 Prettier 做代碼格式化 ， 然后用 eslint 做校驗 。
23、Beautify代碼格式化工具 。
備注：相比之下，Prettier 是當前最流行的代碼格式化工具 ， 比 Beautify 用得更多 。
24、JavaScript(ES6) code snippetsES6 語法智能提示，支持快速輸入 。
25、Search node_modules 【薦】node_modules模塊里面的文件夾和模塊實在是太多了，根本不好找 。好在安裝 Search node_modules 這個插件后，輸入快捷鍵「CmdShiftP」，然后輸入 node_modules，在彈出的選項中選擇 Search node_modules，即可搜索 node_modules 里的模塊 。

文章插圖
26、indent-rainbow：突出顯示代碼縮進indent-rainbow插件：突出顯示代碼縮進 。
安裝完成后，效果如下圖所示：

文章插圖
27、javascript console utils：快速打印 log 日志【薦】安裝這個插件后，當我們按住快捷鍵「CmdShiftL」后，即可自動出現日志 console.log() 。簡直是日志黨福音 。
當我們選中某個變量 name，然后按住快捷鍵「CmdShiftL」，即可自動出現這個變量的日志 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 PeekCSS 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 ThemeMaterial ThemeNebula ThemeOne Dark ProOne Monokai ThemeMonokai ProAyuSnazzy PlusDaintySynthWave '84GitHub Plus Theme：白色主題Horizon Theme：紅色主題,

• OPPO云服務為用戶的手機數據保駕護航 oppo手機服務官網首頁
• iPhone15仍是科技奇跡將會有5大升級 iphone15已經確定的改動
• 李玖哲資料_李玖哲的《解脫》 歌詞
• 李時珍的資料_李時珍的事跡
• 李慧珍的歌_李慧珍 張學友合唱的歌是什么
• 李慧珍習慣_求李慧珍的 習慣 的歌曲鏈接。
• 李慧珍 習慣_跪求李慧珍的習慣 無損版的
• 腳臭腳指甲都是臭的怎么辦 腳甲臭怎么回事
• 李強感恩父母_可以提供李強感恩父母心靈動力的所有背景音樂嗎？
• 李開復自傳讀后感_求幫寫讀后感，2000字以上，有關經濟學的