8個頂級 VSCode 擴充插件

微軟的 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 得到了微軟的支持，能夠確保未來會得到更好的維護。開源社群圍繞著軟體創造了一個欣欣向榮的生態系統，可以稱為企業與開源文化結合的典範。

原文網址：https://1stwebdesigner.com/top-free-extensions-for-vs-code/

為了保證的可讀性，本文採意譯而非直譯。

推薦教學：

vscode入門教學#

以上是8個頂級 VSCode 擴充插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！