翻譯：瘋狂的技術宅
原文：https://1stwebdesigner.com/top-free-extensions-for-vs-code/
微軟的 VS (Visual Studio) Code 是一個免費的開原始碼編輯器，最近越來越受歡迎。它非常輕巧、靈活，同時也提供了很多強大的功能。它支援絕大多數流行的程式語言，包括PHP、JavaScript、C++ 等。
VS Code 是跨平臺的。它不僅能用於 Windows 平臺，同時也提供 Linux 和 Mac 版本。下載地址：https://code.visualstudio.com/。
但也許最酷的是 VS Code 提供了規模超大的擴充套件外掛，在擴充套件 商店 有大量的免費擴充套件可用於支援新語言、除錯程式碼或新增各種其他自定義功能。你可以靈活的配置自己的編輯器，更好地滿足日常開發的需要。
下面將給你介紹一些適合前端的頂級 VS Code 擴充套件外掛。
Git增強：GitLens
雖然Git功能已內建於 VS Code 中，但 GitLens 能夠提供更多的版本控制功能來“增強”你的編輯器。它提供了對程式碼的深入分析功能，可以向你顯示更改時間以及更改後的程式碼。你甚至可以比較不同的分支、標籤和提交。總的來說，這個擴充套件外掛會讓你擁有全新的視覺感受。
更多詳情：https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
語法高亮：Beautify
你是否非常依賴語法高亮顯示？如果是的話，Beautify 正是你需要的。它利用了 VS Code 中已有的 Online JavaScript Beautifier，允許你輕鬆更改其樣式。這意味著你可以根據內容設定縮排、換行和其他細節。
更多詳情：https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
程式碼檢查：ESLint
JavaScript 可能很難除錯。但 ESLint 擴充套件可以使這個過程更容易。它能夠在執行程式碼之前幫你指出其中潛在的問題。更強大的是它允許你建立自己的 linting 規則。
更多詳情：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
偵錯程式：Debugger for Chrome
對於在執行時期間對程式碼進行除錯的開發人員，Debugger for Chrome 將幫你更好的完成工作。它有許多方便的功能，包括在程式碼、watches 和控制檯中設定斷點的功能。另外你可以在 VS Code 中執行Chrome例項，或把偵錯程式附加到單獨執行的瀏覽器例項。
更多資訊：https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
環境增強：React Native Tools
React 是最引人注目的JS庫之一 —— 以至於新的 WordPress 塊編輯器（又名 Gutenberg）是基於它建立的。如果你是眾多的 React 程式設計師之一，那麼React Native Tools是必不可少的擴充套件。它增加了執行 react-native 命令的功能，還能幫助你除錯自己的程式碼。
更多資訊：https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native
介面主題：One Dark Pro
在敲程式碼時，有一個醒目且養眼的介面主題會很有幫助。畢竟編碼過程可以持續好幾個小時。 One Dark Pro 把Atom 編輯器中流行的 “One Dark” 主題帶到了 VS Code。
更多資訊：https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme
程式碼增強：Bracket Pair Colorizer 2
Bracket Pair Colorizer 2 是一個簡單的擴充套件，可以使程式碼更容易閱讀。它可以對匹配括號的對程式碼著色，使你可以非常直觀地確定函式的開始和結束位置。還可以選擇要使用的顏色。
更多資訊：https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
視覺增強：vscode-icons
也許 vscode-icons 是 VS Code 最有效的視覺調整擴充套件之一。它能夠處理你專案中平淡的檔案列表，並新增豐富多彩、表示特定語言的圖示。這樣可以很容易地讓你知道程式碼檔案的型別。能夠給工作區新增個性化設定是非常受歡迎的功能。
更多資訊：https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
按自己的方式編寫程式碼
VS Code 提供的擴充套件外掛數量驚人，這使其成極具吸引力的編輯器。你可以自由的進行設定，來匹配自己使用的語言和設定喜歡的工作區視覺效果。
此外，它還提供了企業和開源文化的有趣組合。 VS Code 得到了微軟的支援，能夠確保未來會得到更好的維護。開源社群圍繞軟體建立了一個欣欣向榮的生態系統，可以稱作是企業與開源文化相結合的典範。