VS Code 是功能豐富的編輯器，提供了許多強大的功能，使其成為最受歡迎的集成開發(fā)環(huán)境之一。盡管如此，仍然有一些方面需改進，插件的存在正是為了填補這些空白，為用戶提供額外的功能和工具，以滿足特定的需求。

在 VS Code 中，有一些特定的插件對提高工作效率非常重要。這些插件可以幫助開發(fā)人員更快速、更高效地編寫代碼。本文重點介紹8個實用的插件。

1 GitLens

安裝鏈接：https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

圖片

雖然 Visual Studio Code 自帶了基本的 Git 功能支持，但其中功能非常有限。

為了更好地理解代碼，可以安裝 GitLens 插件。通過此插件能夠快速了解誰在什么時候、因為什么修改了某行代碼或代碼塊。回溯歷史記錄可以進一步了解代碼的演變過程和修改的原因。這個插件功能強大、豐富多樣，并且高度可定制，能滿足你的需求。

盡管有其他插件也旨在填補這一空白，但都無法與 GitLens 的功能相媲美。因此，建議只需要安裝這一個插件，就能覆蓋所有功能。

2 Live Share

安裝鏈接：https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare

圖片

在進行雙人編程時，通常是通過 Zoom 或其他屏幕共享提供商來實現(xiàn)。然而，這種方式存在一些缺點，有很大的改進空間。為了填補這一空白，Live Share插件能夠提供幫助。

這個插件旨在讓你能夠遠程進行雙人編程，甚至支持多達30人。它提供了全面的功能，你甚至不再需要使用Zoom進行通話，這個插件內(nèi)置了聊天和語音通話功能。

圖片

開始會話非常簡單。創(chuàng)建會話后，會獲得一個URL，可以提供給你的同事。

圖片

3 VS Code Remote Development

安裝鏈接：https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

圖片

這個擴展可以在物理或虛擬機器上實現(xiàn)無縫遠程容器開發(fā)。不用在服務(wù)器上運行任何額外的軟件，只需使用此擴展通過SSH連接到目標機器即可。這樣，就可以方便地在遠程環(huán)境中進行容器開發(fā)了。

圖片

使用這個擴展開發(fā)人員可以更好地檢查遠程機器上的代碼，或者在一個遠程機器上擁有所有的開發(fā)工具并編輯代碼。這意味著可以將筆記本電腦僅作為客戶端，讓所有的資源在另一臺機器上執(zhí)行。這樣一來，就可以把和工作相關(guān)的代碼與個人數(shù)據(jù)隔離開來。

需要注意的是，在遠程機器上安裝的插件不會自動安裝在客戶端機器上。這樣做可以保持事情的井然有序，確保插件只存在于遠程機器上。

圖片

有的公司甚至向員工提供遠程機器。這樣做的好處是大大減少了配置開發(fā)環(huán)境所需的時間和成本。同時，公司還可以確保員工擁有能夠滿足產(chǎn)品開發(fā)需求的高性能機器。

4 Peacock

安裝鏈接：https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

圖片

如果需要經(jīng)常在不同的項目之間切換嗎，這個插件可以用來自定義每個項目，以便開發(fā)人員能夠在當前工作的項目上得到一些視覺反饋。

圖片

它有一些不錯的預(yù)定義顏色，但也支持自己添加顏色。

5 Bracket Pair Colorizer 2

安裝鏈接：https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

圖片

這是個非常簡單但十分有用的插件。此插件可以通過顏色來標識匹配的括號。用戶可以定義要匹配的字符和要使用的顏色。

圖片

6 Color Highlight

安裝鏈接：https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

圖片

另一個簡單且有用的工具是Color Highlight。它會在文檔中高亮顯示找到的 CSS/Web 顏色。

圖片

7 ESLint

安裝鏈接：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

圖片

這是一個將 ESLint 集成到 VS Code 中的插件。需要安裝 ESLint，并提供 .eslintrc 配置文件。

此插件有很多值得查看的配置選項。

8 Prettier

安裝鏈接：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

圖片

這是一個支持 Prettier 的擴展，Prettier 是一款強制統(tǒng)一代碼格式的工具，會移除所有原始樣式，并確保所有輸出的代碼符合一致的風格。

在大型項目中，這個工具絕對是必備的，這樣可以保證代碼庫的強可讀性。由于 Prettier 可高度配置，開發(fā)團隊只需要在其配置上達成一致即可。

需要告訴 VS Code .prettierrc 配置文件的位置，或者將其放在根文件夾中。