摘要： 你所不知道的系列。
Fundebug經授權轉載，版權歸原作者所有。
作為一名業餘愛好者、專業人員，甚至是每月隻有一次程式設計的開發人員，你必須知道，對于任何願意在工作中投入最大生産時間的人來說，擁有智能和靈活的工具是至關重要的，廢話不多說，介紹插件比較重要。
1. Material Theme & Icons
這是 VS Code 主題中的重要角色。 作者認為重要的主題是在編輯器中用筆和紙書寫最接近的東西（特别是在使用無對比變體主題時）。 從內建的工具到文本編輯器，你的編輯器看起來幾乎是平的和無縫的。
想象一個史詩般的主題加上史詩般的圖示。
Material Theme Icons是替換預設 VSCode 圖示的絕佳選擇。設計的大型圖示目錄與主題融為一體，使其更加美觀，這有助于你在資料總管中輕松找到你的檔案。
2. 具有居中布局的禅模式或者勿擾模式 (Zen Mode)
為了讓廣大苦逼碼農能夠在
coding/docing
時有清晰的思路，代表最廣大碼農利益的 VSCode 也加入了“禅模式”。該模式可以在你在頁面編輯檔案時啟用，效果是全屏化你的編輯框，然後帶有若隐若現的雲霧效果。
打開方式：檔案 > 首選項 > 設定 > 使用者設定 > 工作台 > 禅模式
3. 具有連字的字型
文字的風格使閱讀變得簡單友善，你可以使用好看連字的字型使編輯器看起來更友好。
這裡是支援連字的6種最佳字型(
根據www.slant.co)
你可以嘗試
Fira Code，它非常棒而且是開源的。 以下是引入 Fira Code 後在 VSCode 輥更改該字型的方法。
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true 具體使用方法可以參考：
vscode中修改字型,使用 Fira Code 提高visual studio使用逼格的連體字(Fira code)以及多行編輯(MixEdit)4.彩虹縮進 （indent-rainbow）
縮進風格，這個擴充為文本前面的縮進着色，在每個步驟中交替使用四種不同的顔色。
當然如果需要自定義自己喜歡的顔色，請将以下代碼段複制并粘貼到
settings.json
中
"indentRainbow.colors": [
"rgba(16,16,16,0.1)",
"rgba(16,16,16,0.2)",
"rgba(16,16,16,0.3)",
"rgba(16,16,16,0.4)",
"rgba(16,16,16,0.5)",
"rgba(16,16,16,0.6)",
"rgba(16,16,16,0.7)",
"rgba(16,16,16,0.8)",
"rgba(16,16,16,0.9)",
"rgba(16,16,16,1.0)"
], 5. 自定義标題欄
這是一個很棒的視覺調整，改變了不同項目的标題欄顔色，以便輕松識别它們。 如果你處理可能具有相同代碼或檔案名的應用程式（例如react-native 應用程式和 React Web應用程式），這非常有用。
設定方式：打開方式：檔案 > 首選項 > 設定 > 工作區設定
6. Tag Wrapping
如果你不認識
Emmet，那麼你可能是一個喜歡打字的人。Emmet 允許你寫入縮寫代碼并傳回的相應标記，目前 VSCode 已經内置，是以不用配置了。
如果你想了解更多的 Emmet 的簡寫，可以檢視
Emmet Cheatsheet7. 内外平衡
這條建議來自
https://vscodecandothat.com/，作者非常推薦它。
你可以使用
balance inward
和
balance outward
的 Emmet 指令在 VS 代碼中選擇整個标記。 将這些指令綁定到鍵盤快捷鍵是有幫助的，例如
Ctrl + Shift + 向上箭頭
用于平衡向外，而
Ctrl + Shift +向下箭頭
用于平衡向内。
代碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具
。
8. Turbo Console.log()
沒有人喜歡輸入非常長的語句，比如
console.log()
。這真的很煩人，尤其是當你隻想快速輸出一些東西，檢視它的值，然後繼續編碼的時候。如果我告訴你，你可以像 Lucky Luke一樣快速地控制台記錄任何東西呢?
這是通過名為
Turbo Console Log的擴充來完成的。它支援對下面一行中的任何變量進行日志記錄，并在代碼結構之後自動添加字首。你還可以 取消注釋/注釋
alt+shift+u / alt+shift+c
為所有由這個擴充添加的
console.log()
此外，你也可以通過
alt+shift+d
删除所有：
9. Live server
這是一個非常棒的擴充，可以幫助你啟動一個本地開發伺服器，為靜态和動态頁面提供實時重新加載功能，它對 HTTPS、CORS、自定義本地主機位址和端口等主要特性提供了強大的支援。
如果與
VSCode LiveShare一起使用，它甚至可以讓你共享本地主機。
10. 使用多個遊标 複制/粘貼
當在不同的行上添加遊标來編輯多行代碼時，發現這個特性非常有用。你可以複制和粘貼這些遊标選擇的内容，它們将按照複制的順序進行粘貼。
Mac: opt+cmd+up or opt+cmd+down
Windows: ctrl+alt+up or ctrl+alt+down
Linux: alt+shift+up or alt+shift+down 11. Breadcrumbs )（面包屑）
編輯器的内容上方現在有一個被稱為
Breadcrumbs
的導航欄，它顯示你的目前位置，并允許在符号和檔案之間快速導航。要使用該功能，可使用
View > Toggle Breadcrumbs
指令或通過
breadcrumbs.enabled
設定啟用。要與其互動，請使用 Focus Breadcrumbs 指令或按
Ctrl + Shift +
12. Code CLI
VS代碼有一個強大的指令行界面，允許你控制如何啟動編輯器。你可以通過指令行選項打開檔案、安裝擴充名、更改顯示語言和輸出診斷資訊。
想象一下，你通過
git clone <repo-url>
克隆一個遠端庫，你想要替換你正在使用的目前 VS Code執行個體。 通過指令
code . -r
将在不必離開 CLI 界面的情況下完成這一操作 (
在此處了解更多資訊)。
12. Polacode
你經常會看到帶有定制字型和主題的代碼截屏，如下所示。這是在VS代碼與
x擴充
我知道
Carbon也是一種更好，更可定制的替代品。 但是，Polacode 允許你保留在代碼編輯器中并使用你可能已購買的任何專用字型，這些字型在 Carbon 中無法使用。
13. Quokka (JS/TS ScratchPad)
Quokka 是J avaScript 和 TypeScript 的快速原型開發平台。在你輸入代碼時，它将立即運作你的代碼，并在代碼編輯器中顯示各種執行結果。
Quokka 的一個很棒的擴充插件，當你準備技術面試時，你可以輸出每個步驟，而不必在調試器中設定斷點。它還可以幫助您在實際使用之前研究庫的函數，如 Lodash 或 MomentJS，它甚至可以用于異步調用。
14. WakaTime
如果你想記錄每天程式設計所花的時間，WakaTime 是一個擴充，它可以幫助記錄和存儲有關程式設計活動的名額和分析。
Here are some super secret VS Code hacks to boost your productivity關于Fundebug
專注于JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了10億+錯誤事件，付費客戶有Google、360、金山軟體、百姓網等衆多品牌企業。歡迎大家
免費試用！
![Javascript建構Bingo卡片遊戲[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)