你知道你現(xiàn)在有多少個VS Code擴(kuò)展嗎？

我：多達(dá)56個。

圖片

如果你發(fā)現(xiàn)VS Code隨著時(shí)間變得越來越慢、越來越耗電，那么這個數(shù)字可能就是原因所在。

因?yàn)槊恳粋€新的擴(kuò)展都會增加應(yīng)用程序的內(nèi)存和CPU使用量。

編程已經(jīng)夠具有挑戰(zhàn)性了；沒有人需要再與這樣的事情抗?fàn)帲?/p>

圖片

所以我們需要盡量減少擴(kuò)展的數(shù)量，以減少資源使用；同時(shí)還要防止這些擴(kuò)展相互沖突或與原生功能沖突。

你知道，在市場中有相當(dāng)多的擴(kuò)展提供的功能，VS Code已經(jīng)內(nèi)置了。

通常，它們是在這些功能尚未添加時(shí)開發(fā)的；但一旦這些功能被添加，它們就成為了多余的附加項(xiàng)。

因此，在下面的列表中，我列出了一些VS Code已經(jīng)集成的功能以及提供這些功能的擴(kuò)展。卸載這些現(xiàn)在可有可無的擴(kuò)展將提高你的編輯器的性能和效率。

我還將列出一些控制這些功能行為的設(shè)置。如果你不知道如何更改設(shè)置，這個指南將對你有幫助。

1. 自動關(guān)閉HTML標(biāo)簽

當(dāng)你添加一個新的HTML標(biāo)簽時(shí)，這個功能會自動添加相應(yīng)的關(guān)閉標(biāo)簽。

圖片

擴(kuò)展：

• Auto Close Tag（1200萬+下載）："自動添加HTML/XML關(guān)閉標(biāo)簽，與Visual Studio IDE或Sublime Text類似"。
• Close HTML/XML Tag（34.4萬下載）："快速關(guān)閉最后打開的HTML/XML標(biāo)簽"。

但是，功能已經(jīng)內(nèi)置：

• HTML: Auto Closing Tags："啟用/禁用HTML標(biāo)簽的自動關(guān)閉"。默認(rèn)情況下為true。
• JavaScript: Auto Closing Tags："啟用/禁用JSX標(biāo)簽的自動關(guān)閉"。默認(rèn)情況下為true。
• TypeScript: Auto Closing Tags："啟用/禁用JSX標(biāo)簽的自動關(guān)閉"。默認(rèn)情況下為true。

圖片

你可以將以下內(nèi)容添加到你的settings.json文件中來啟用它們。

圖片

2. 路徑自動補(bǔ)全

路徑自動補(bǔ)全功能在你導(dǎo)入模塊或在HTML中鏈接資源時(shí)，提供一個項(xiàng)目中文件的列表供你選擇。

擴(kuò)展：

• Path IntelliSense（1250萬+下載）："Visual Studio Code插件，自動補(bǔ)全文件名"。
• Path Autocomplete（170萬+下載）："為Visual Studio Code和VS Code Web版提供路徑補(bǔ)全"。

但是，功能已經(jīng)內(nèi)置：

VS Code已經(jīng)原生支持路徑自動補(bǔ)全。

當(dāng)我輸入文件名來導(dǎo)入時(shí)（通常在輸入開始引號時(shí)），會顯示一個建議的項(xiàng)目文件列表，供我快速選擇。

圖片

3. HTML和CSS片段

這些擴(kuò)展通過添加你容易記住的縮寫來幫助你快速插入常用的HTML和CSS片段。

擴(kuò)展：

• HTML Snippets（1010萬+下載）："完整的HTML標(biāo)簽，包括HTML5片段"。
• HTML Boilerplate（320萬+下載）："基本的HTML5樣板代碼生成器"。
• CSS Snippets（22.5萬+下載）："CSS簡寫片段"。

但是，功能已經(jīng)內(nèi)置：

Emmet 是VSCode內(nèi)置的一個功能，它提供了類似于這些擴(kuò)展的HTML和CSS片段。

如你所見，在VSCode Emmet官方指南中，它默認(rèn)在 html、haml、pug、slim、jsx、xml、xsl、css、scss、sass、less 和 stylus 文件中啟用。

簡潔全面。

當(dāng)你開始輸入Emmet縮寫時(shí)，一個建議將會彈出，并伴隨自動補(bǔ)全選項(xiàng)；你還可以在VSCode的建議文檔懸浮框中看到展開的預(yù)覽。

圖片

4. 括號配對著色

括號配對著色是一種流行的語法高亮功能，它根據(jù)括號的順序?yàn)樗鼈冎?/p>

它使識別作用域變得更容易，并幫助你編寫涉及許多括號的表達(dá)式，如單行函數(shù)組合。

圖片

擴(kuò)展：

• Bracket Pair Colorizer 2（610萬+下載）："一個用于著色匹配括號的可自定義擴(kuò)展"。它現(xiàn)在已經(jīng)被棄用。
• Rainbow Brackets（190萬+下載）："VS Code的彩虹括號擴(kuò)展"。

但是，功能已經(jīng)內(nèi)置：

在看到對括號配對著色的需求以及將其作為擴(kuò)展添加的性能問題后，VSCode團(tuán)隊(duì)決定將其集成到編輯器中。

在這篇博客中，他們表示，原生的括號配對著色功能比Bracket Pair Colorizer 2快一萬倍以上。

以下是啟用/禁用括號配對著色的設(shè)置：

Editor > Bracket Pair Colorization："控制是否啟用括號配對著色"。默認(rèn)情況下為true。

你可以通過在settings.json中添加以下內(nèi)容來啟用它：

settings.json

圖片

可以使用的顏色最多有6種，適用于連續(xù)的嵌套級別。不過，每個主題都會有其最大顏色。例如，Dracula主題默認(rèn)有6種顏色，但One Dark Pro主題只有3種。

圖片

你可以使用workbench.colorCustomizations設(shè)置來自定義任何主題的括號顏色。

圖片

我們在方括號（[ ]）中指定主題的名稱，然后將值分配給相關(guān)屬性。editorBracketHighlight.foregroundN屬性設(shè)置第N組括號的顏色，最大值為6。

現(xiàn)在，這將是One Dark Pro的括號配對著色效果：

圖片

5. 模塊自動導(dǎo)入

通過自動導(dǎo)入功能，當(dāng)在文件中引用模塊的函數(shù)、變量或其他成員時(shí)，模塊會自動導(dǎo)入到文件中，節(jié)省了時(shí)間和精力。

圖片

如果模塊文件被移動，自動導(dǎo)入功能會自動更新它們。

圖片

擴(kuò)展：

• Auto Import（380萬下載）："自動查找、解析并為所有可用的導(dǎo)入提供代碼操作和代碼補(bǔ)全。適用于TypeScript和TSX"。
• Move TS（81萬下載）："用于移動TypeScript文件和文件夾，并更新工作區(qū)中的相對導(dǎo)入"。

但是，功能已經(jīng)內(nèi)置：你可以通過以下設(shè)置在VSCode中啟用或禁用模塊的自動導(dǎo)入。

• JavaScript > Suggest: Auto Imports："啟用/禁用自動導(dǎo)入建議"。默認(rèn)情況下為true。
• TypeScript > Suggest: Auto Imports："啟用/禁用自動導(dǎo)入建議"。默認(rèn)情況下為true。
• JavaScript > Update Imports on File Move："啟用/禁用在VS Code中重命名或移動文件時(shí)自動更新導(dǎo)入路徑"。默認(rèn)值為prompt，這意味著會向你顯示一個對話框，詢問是否要更新移動文件的導(dǎo)入。將其設(shè)置為always會跳過對話框，而設(shè)置為never則完全關(guān)閉該功能。
• TypeScript > Update Imports on File Move："啟用/禁用在VS Code中重命名或移動文件時(shí)自動更新導(dǎo)入路徑"。與上一個設(shè)置類似，它的可能值為prompt、always和never，默認(rèn)值為prompt。

圖片

你可以使用settings.json中的這些屬性來控制這些設(shè)置：

你還可以添加此設(shè)置，如果你希望在每次保存文件時(shí)組織導(dǎo)入。

圖片

圖片

這將刪除未使用的導(dǎo)入語句，并將絕對路徑的導(dǎo)入語句排列在頂部，提供了一種無需動手的方式來清理代碼。

6. HTML標(biāo)簽自動重命名

這是一個強(qiáng)大的功能，我在開始使用VS Code的幾個月后才發(fā)現(xiàn)！

只需編輯起始標(biāo)簽，結(jié)束標(biāo)簽將自動更新以匹配：

圖片

擴(kuò)展：

• Auto Rename Tag（1770萬下載）："自動重命名配對的HTML/XML標(biāo)簽，類似于Visual Studio IDE的功能"。

但是，功能已經(jīng)內(nèi)置：

我使用以下設(shè)置輕松實(shí)現(xiàn)標(biāo)簽自動重命名，而無需安裝任何東西：

• Editor: Linked Editing："控制編輯器是否啟用了鏈接編輯。根據(jù)語言的不同，相關(guān)符號如HTML標(biāo)簽在編輯時(shí)會被更新。" 默認(rèn)情況下為false。

圖片

7. 自動修剪尾隨空格

這個實(shí)用的功能會移除文件中所有行末的空白字符，以保持一致的格式。

擴(kuò)展：

• Trailing Spaces（200萬下載）："高亮顯示尾隨空格并快速刪除它們！"。
• AutoTrim（3.54萬下載）："尾隨空白通常存在于編輯代碼行、刪除尾隨單詞等操作之后。此擴(kuò)展跟蹤光標(biāo)所在的行號，當(dāng)這些行不再有活動光標(biāo)時(shí)，移除尾隨的制表符和空格"。

但是，功能已經(jīng)內(nèi)置：

VSCode內(nèi)置了一個設(shè)置，可以自動刪除文件中的尾隨空格。

它會在保存文件時(shí)自動修剪尾隨空格，使其成為一個后臺操作，你無需再考慮。

圖片

這里是設(shè)置：

• Files: Trim Trailing Whitespace："啟用時(shí)，將在保存文件時(shí)修剪尾隨空白"。默認(rèn)情況下為false。

圖片

你可以將以下內(nèi)容添加到settings.json文件中以啟用自動修剪：

圖片

你可能希望在Markdown文件中關(guān)閉此設(shè)置，因?yàn)楦鶕?jù)CommonMark規(guī)范，你需要在行末放置兩個或更多空格來創(chuàng)建一個硬換行。你可以在settings.json文件中添加以下內(nèi)容來關(guān)閉它：

圖片

或者，你也可以使用反斜杠（\）代替空格來創(chuàng)建硬換行。

8. HTML標(biāo)簽自動包裝

我無法數(shù)清有多少次我需要將一個HTML元素包裹在一個新的元素中——通常是一個div。

使用此功能，我可以立即將<p>標(biāo)簽包裹在一個<div>中，而不必費(fèi)力地在上面插入一個<div>，在下面插入一個</div>。

圖片

擴(kuò)展：

• htmltagwrap（67.4萬下載）："使用HTML標(biāo)簽包裹選中的代碼"。
• html tag wrapper（45.8萬下載）："通過按ctrl+i包裹選中的HTML標(biāo)簽，你也可以簡單地更改包裹標(biāo)簽的名稱"。

但是，功能已經(jīng)內(nèi)置：

借助內(nèi)置的“使用縮寫包裹”命令，我可以快速將標(biāo)簽包裹在任何標(biāo)簽類型中。

圖片

你看到新包裹的名稱如何根據(jù)你的輸入發(fā)生變化了嗎？

9. 多彩縮進(jìn)

縮進(jìn)指南讓你更容易追蹤代碼中的不同縮進(jìn)級別。

擴(kuò)展：

• Indent Rainbow（750萬下載）："此擴(kuò)展為文本前的縮進(jìn)上色，在每一步使用四種不同的顏色交替"。

但是，功能已經(jīng)內(nèi)置：是的，VS Code已經(jīng)將此功能作為內(nèi)置功能。

我們只需將Editor > Guides: Bracket Pairs設(shè)置從“active”更改為“always”即可顯示多彩縮進(jìn)。

圖片

從這樣：

圖片

到這樣?：

圖片

漂亮。

10. NPM集成

在每個嚴(yán)肅的項(xiàng)目中，你可能都有工具來自動化測試、代碼檢查、構(gòu)建等任務(wù)。

因此，此功能使你可以通過點(diǎn)擊一個按鈕輕松啟動這些任務(wù)。無需切換上下文。

擴(kuò)展：

• NPM（680萬下載）："此擴(kuò)展支持運(yùn)行在package.json文件中定義的npm腳本"。每次打開包含package.json的項(xiàng)目時(shí)，我都會看到它作為推薦擴(kuò)展。

但是，功能已經(jīng)內(nèi)置：

借助內(nèi)置的NPM腳本視圖，我可以輕松查看項(xiàng)目package.json中的所有腳本，并運(yùn)行我想要的任何腳本：

圖片

唉，但現(xiàn)在你必須將鼠標(biāo)拖到那里，只是為了運(yùn)行一個簡單的任務(wù)。

使用Tasks: Run Task命令要好得多：

圖片

“它還是太慢了！”

好吧，如果你知道確切的腳本名稱，那就按Ctrl + 打開內(nèi)置終端并滿足你的CLI需求：

圖片

最后總結(jié)

這些擴(kuò)展可能曾經(jīng)在過去發(fā)揮了關(guān)鍵作用，但如今大部分已不再需要，因?yàn)閂S Code已經(jīng)將它們的功能內(nèi)置。

卸載它們以減少臃腫，提高Visual Studio Code的效率。