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

我：多達56個。

圖片

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

因為每一個新的擴展都會增加應用程序的內(nèi)存和CPU使用量。

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

圖片

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

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

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

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

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

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

當你添加一個新的HTML標簽時，這個功能會自動添加相應的關(guān)閉標簽。

圖片

擴展：

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

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

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

圖片

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

圖片

2. 路徑自動補全

路徑自動補全功能在你導入模塊或在HTML中鏈接資源時，提供一個項目中文件的列表供你選擇。

擴展：

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

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

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

當我輸入文件名來導入時（通常在輸入開始引號時），會顯示一個建議的項目文件列表，供我快速選擇。

圖片

3. HTML和CSS片段

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

擴展：

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

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

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

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

簡潔全面。

當你開始輸入Emmet縮寫時，一個建議將會彈出，并伴隨自動補全選項；你還可以在VSCode的建議文檔懸浮框中看到展開的預覽。

圖片

4. 括號配對著色

括號配對著色是一種流行的語法高亮功能，它根據(jù)括號的順序為它們著色。

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

圖片

擴展：

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

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

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

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

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

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

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

settings.json

圖片

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

圖片

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

圖片

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

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

圖片

5. 模塊自動導入

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

圖片

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

圖片

擴展：

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

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

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

圖片

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

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

圖片

圖片

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

6. HTML標簽自動重命名

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

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

圖片

擴展：

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

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

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

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

圖片

7. 自動修剪尾隨空格

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

擴展：

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

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

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

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

圖片

這里是設(shè)置：

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

圖片

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

圖片

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

圖片

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

8. HTML標簽自動包裝

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

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

圖片

擴展：

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

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

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

圖片

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

9. 多彩縮進

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

擴展：

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

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

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

圖片

從這樣：

圖片

到這樣?：

圖片

漂亮。

10. NPM集成

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

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

擴展：

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

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

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

圖片

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

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

圖片

“它還是太慢了！”

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

圖片

最后總結(jié)

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

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