轉載原創 千古信徒
前言
VS Code 軟體實在是太酷、太好用了，越來越多的新生代網際網路青年正在使用它。
前端男神
尤雨溪
大大這樣評價 VS Code：
有一點你可能會感到驚訝：VS Code 這款軟體本身，是用 JavaScript 語言編寫的（具體請自行查閱基於 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 的全稱是 Visual Studio 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、工作區快捷鍵
Mac 快捷鍵Win 快捷鍵作用備註
Cmd + Shift + PCtrl + Shift + P
，F1顯示命令面板
Cmd + BCtrl + B
顯示/隱藏側邊欄很實用Cmd + \Ctrl + \
建立多個編輯器視窗
【重要】抄程式碼利器
Cmd + 1、2Ctrl + 1、2
聚焦到第 1、第 2 個編輯器同上重要
cmd +/-ctrl +/-
將工作區放大/縮小（包括程式碼字型、左側導航欄）在投影儀場景經常用到Cmd + JCtrl + J顯示/隱藏控制檯
Cmd + Shift + NCtrl + Shift + N
重新開一個軟體的視窗很常用Cmd + Shift + WCtrl + Shift + W關閉軟體的當前視窗
Cmd + NCtrl + N新建檔案
Cmd + WCtrl + W關閉當前檔案
2、跳轉操作
Mac 快捷鍵Win 快捷鍵作用備註Cmd + `沒有在同一個軟體的
多個工作區
之間切換使用很頻繁
Cmd + Option + 左右方向鍵
Ctrl + Pagedown/Pageup在已經開啟的
多個檔案
之間進行切換非常實用Ctrl + TabCtrl + Tab在已經開啟的多個檔案之間進行跳轉不如上面的快捷鍵快Cmd + Shift + OCtrl + shift + O在當前檔案的各種
方法之間
進行跳轉
Ctrl + GCtrl + G跳轉到指定行
Cmd+Shift+\Ctrl+Shift+\跳轉到匹配的括號
3、移動游標
Mac 快捷鍵Win 快捷鍵作用備註方向鍵方向鍵在
單個字元
之間移動游標大家都知道
option + 左右方向鍵Ctrl + 左右方向鍵
在
單詞
之間移動游標很常用
Cmd + 左右方向鍵Fn + 左右方向鍵
在
整行
之間移動游標很常用Cmd + ←Fn + ←（或 Win + ←）將游標定位到當前行的最左側很常用Cmd + →Fn + →（或 Win + →）將游標定位到當前行的最右側很常用Cmd + ↑Ctrl + Home將游標定位到文章的第一行
Cmd + ↓Ctrl + End將游標定位到文章的最後一行
Cmd + Shift + \
在
程式碼塊
之間移動游標
4、編輯操作
Mac 快捷鍵Win 快捷鍵作用備註
Cmd + EnterCtrl + Enter
在當前行的下方新增一行，然後跳至該行即使游標不在行尾，也能快速向下插入一行Cmd+Shift+EnterCtrl+Shift+Enter在當前行的上方新增一行，然後跳至該行即使游標不在行尾，也能快速向上插入一行
Option + ↑Alt + ↑
將程式碼向上移動很常用
Option + ↓Alt + ↓
將程式碼向下移動很常用Option + Shift + ↑Alt + Shift + ↑將程式碼向上複製
Option + Shift + ↓Alt + Shift + ↓
將程式碼向下複製寫重複程式碼的利器
5、多游標編輯
Mac 快捷鍵Win 快捷鍵作用備註
Cmd + Option + 上下鍵Ctrl + Alt + 上下鍵
在連續的多列上，同時出現游標
Option + 滑鼠點選任意位置Alt + 滑鼠點選任意位置
在任意位置，同時出現游標
Option + Shift + 滑鼠拖動Alt + Shift + 滑鼠拖動在選中區域的每一行末尾，出現游標
Cmd + Shift + LCtrl + Shift + L在選中文字的所有相同內容處，出現游標
其他的多游標編輯操作：（很重要）
選中某個文字，然後反覆按住快捷鍵「
Cmd + D
」鍵（windows 使用者是按住「
Ctrl + D
」鍵）， 即可將全文中相同的詞逐一加入選擇。
選中一堆文字後，按住「
Option + Shift + i
」鍵（windows 使用者是按住「
Alt + Shift + I
」鍵），既可在
每一行的末尾
都建立一個游標。
6、刪除操作
Mac 快捷鍵Win 快捷鍵作用備註Cmd + shift + KCtrl + Shift + K刪除整行「Cmd + X」的作用是剪下，但也可以刪除整行
option + BackspaceCtrl + Backspace
刪除游標之前的一個單詞英文有效，很常用option + deleteCtrl + delete刪除游標之後的一個單詞
Cmd + Backspace
刪除游標之前的整行內容很常用Cmd + delete
刪除游標之後的整行內容
備註：上面所講到的移動游標、編輯操作、刪除操作的快捷鍵，在其他編輯器裡，大部分都適用。
7、程式語言相關
Mac 快捷鍵Win 快捷鍵作用備註Cmd + /Ctrl + /新增單行註釋很常用
Option + Shift + F
Alt + shift + F程式碼格式化很常用F2F2以重構的方式進行
重新命名
改程式碼備Ctrl + J
將多行程式碼合併為一行Win 使用者可在命令面板搜尋”合併行“Cmd +
Cmd + UCtrl + U將游標的移動回退到上一個位置撤銷游標的移動和選擇
8、搜尋相關
Mac 快捷鍵Win 快捷鍵作用備註
Cmd + Shift + FCtrl + Shift +F
全域性搜尋程式碼很常用
Cmd + PCtrl + P
在當前的專案工程裡，
全域性
搜尋檔名
Cmd + FCtrl + F在當前檔案中搜索程式碼，游標在搜尋框裡
Cmd + GF3
在當前檔案中搜索程式碼，游標仍停留在編輯器裡很巧妙
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 鍵，即可得到如下程式碼片段：
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 樣式。
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
程式碼格式化工具。
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 【薦】
可以把程式碼儲存成美觀的圖片，主題不同，程式碼配色方案也不同，也可以自己設定邊框顏色、大小、陰影。
有人可能會說：直接用 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外掛可以在程式碼中友好的提示我們，當前引入的包會增加多少體積，這很有助於幫我們最佳化程式碼的體積。
八、主題外掛
給你的 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
一份超級詳細和真誠的Web前端教程。
