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

我：多達(dá)56個(gè)。

圖片

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

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

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

圖片

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

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

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

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

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

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

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

圖片

擴(kuò)展：

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

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

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

圖片

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

圖片

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

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

擴(kuò)展：

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

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

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

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

圖片

3. HTML和CSS片段

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

擴(kuò)展：

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

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

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

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

簡(jiǎn)潔全面。

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

圖片

4. 括號(hào)配對(duì)著色

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

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

圖片

擴(kuò)展：

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

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

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

在這篇博客中，他們表示，原生的括號(hào)配對(duì)著色功能比Bracket Pair Colorizer 2快一萬(wàn)倍以上。

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

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

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

settings.json

圖片

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

圖片

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

圖片

我們?cè)诜嚼ㄌ?hào)（[ ]）中指定主題的名稱(chēng)，然后將值分配給相關(guān)屬性。editorBracketHighlight.foregroundN屬性設(shè)置第N組括號(hào)的顏色，最大值為6。

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

圖片

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

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

圖片

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

圖片

擴(kuò)展：

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

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

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

圖片

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

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

圖片

圖片

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

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

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

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

圖片

擴(kuò)展：

• Auto Rename Tag（1770萬(wàn)下載）："自動(dòng)重命名配對(duì)的HTML/XML標(biāo)簽，類(lèi)似于Visual Studio IDE的功能"。

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

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

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

圖片

7. 自動(dòng)修剪尾隨空格

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

擴(kuò)展：

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

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

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

它會(huì)在保存文件時(shí)自動(dòng)修剪尾隨空格，使其成為一個(gè)后臺(tái)操作，你無(wú)需再考慮。

圖片

這里是設(shè)置：

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

圖片

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

圖片

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

圖片

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

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

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

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

圖片

擴(kuò)展：

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

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

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

圖片

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

9. 多彩縮進(jìn)

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

擴(kuò)展：

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

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

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

圖片

從這樣：

圖片

到這樣?：

圖片

漂亮。

10. NPM集成

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

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

擴(kuò)展：

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

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

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

圖片

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

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

圖片

“它還是太慢了！”

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

圖片

最后總結(jié)

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

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