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

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

1 GitLens

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

圖片

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

為了更好地理解代碼，可以安裝 GitLens 插件。通過此插件能夠快速了解誰在什么時(shí)候、因?yàn)槭裁葱薷牧四承写a或代碼塊?；厮輾v史記錄可以進(jìn)一步了解代碼的演變過程和修改的原因。這個(gè)插件功能強(qiáng)大、豐富多樣，并且高度可定制，能滿足你的需求。

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

2 Live Share

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

圖片

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

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

圖片

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

圖片

3 VS Code Remote Development

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

圖片

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

圖片

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

需要注意的是，在遠(yuǎn)程機(jī)器上安裝的插件不會(huì)自動(dòng)安裝在客戶端機(jī)器上。這樣做可以保持事情的井然有序，確保插件只存在于遠(yuǎn)程機(jī)器上。

圖片

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

4 Peacock

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

圖片

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

圖片

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

5 Bracket Pair Colorizer 2

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

圖片

這是個(gè)非常簡(jiǎn)單但十分有用的插件。此插件可以通過顏色來標(biāo)識(shí)匹配的括號(hào)。用戶可以定義要匹配的字符和要使用的顏色。

圖片

6 Color Highlight

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

圖片

另一個(gè)簡(jiǎn)單且有用的工具是Color Highlight。它會(huì)在文檔中高亮顯示找到的 CSS/Web 顏色。

圖片

7 ESLint

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

圖片

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

此插件有很多值得查看的配置選項(xiàng)。

8 Prettier

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

圖片

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

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

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