十個你應(yīng)該立即卸載的VS Code擴(kuò)展
你知道你現(xiàn)在有多少個VS Code擴(kuò)展嗎？
我：多達(dá)56個。
圖片
如果你發(fā)現(xiàn)VS Code隨著時間變得越來越慢、越來越耗電，那么這個數(shù)字可能就是原因所在。
因為每一個新的擴(kuò)展都會增加應(yīng)用程序的內(nèi)存和CPU使用量。
編程已經(jīng)夠具有挑戰(zhàn)性了；沒有人需要再與這樣的事情抗?fàn)帲?/p>
圖片
所以我們需要盡量減少擴(kuò)展的數(shù)量，以減少資源使用；同時還要防止這些擴(kuò)展相互沖突或與原生功能沖突。
你知道，在市場中有相當(dāng)多的擴(kuò)展提供的功能，VS Code已經(jīng)內(nèi)置了。
通常，它們是在這些功能尚未添加時開發(fā)的；但一旦這些功能被添加，它們就成為了多余的附加項。
因此，在下面的列表中，我列出了一些VS Code已經(jīng)集成的功能以及提供這些功能的擴(kuò)展。卸載這些現(xiàn)在可有可無的擴(kuò)展將提高你的編輯器的性能和效率。
我還將列出一些控制這些功能行為的設(shè)置。如果你不知道如何更改設(shè)置，這個指南將對你有幫助。
1. 自動關(guān)閉HTML標(biāo)簽
當(dāng)你添加一個新的HTML標(biāo)簽時，這個功能會自動添加相應(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中鏈接資源時，提供一個項目中文件的列表供你選擇。
擴(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)入時（通常在輸入開始引號時），會顯示一個建議的項目文件列表，供我快速選擇。
圖片
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縮寫時，一個建議將會彈出，并伴隨自動補(bǔ)全選項；你還可以在VSCode的建議文檔懸浮框中看到展開的預(yù)覽。
圖片
4. 括號配對著色
括號配對著色是一種流行的語法高亮功能，它根據(jù)括號的順序為它們著色。
它使識別作用域變得更容易，并幫助你編寫涉及許多括號的表達(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)隊決定將其集成到編輯器中。
在這篇博客中，他們表示，原生的括號配對著色功能比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ù)、變量或其他成員時，模塊會自動導(dǎo)入到文件中，節(jié)省了時間和精力。
圖片
如果模塊文件被移動，自動導(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中重命名或移動文件時自動更新導(dǎo)入路徑"。默認(rèn)值為prompt，這意味著會向你顯示一個對話框，詢問是否要更新移動文件的導(dǎo)入。將其設(shè)置為always會跳過對話框，而設(shè)置為never則完全關(guān)閉該功能。
- TypeScript > Update Imports on File Move："啟用/禁用在VS Code中重命名或移動文件時自動更新導(dǎo)入路徑"。與上一個設(shè)置類似，它的可能值為prompt、always和never，默認(rèn)值為prompt。
圖片
你可以使用settings.json中的這些屬性來控制這些設(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è)置輕松實現(xiàn)標(biāo)簽自動重命名，而無需安裝任何東西：
- Editor: Linked Editing："控制編輯器是否啟用了鏈接編輯。根據(jù)語言的不同，相關(guān)符號如HTML標(biāo)簽在編輯時會被更新。" 默認(rèn)情況下為false。
圖片
7. 自動修剪尾隨空格
這個實用的功能會移除文件中所有行末的空白字符，以保持一致的格式。
擴(kuò)展：
- Trailing Spaces（200萬下載）："高亮顯示尾隨空格并快速刪除它們！"。
- AutoTrim（3.54萬下載）："尾隨空白通常存在于編輯代碼行、刪除尾隨單詞等操作之后。此擴(kuò)展跟蹤光標(biāo)所在的行號，當(dāng)這些行不再有活動光標(biāo)時，移除尾隨的制表符和空格"。
但是，功能已經(jīng)內(nèi)置：
VSCode內(nèi)置了一個設(shè)置，可以自動刪除文件中的尾隨空格。
它會在保存文件時自動修剪尾隨空格，使其成為一個后臺操作，你無需再考慮。
圖片
這里是設(shè)置：
- Files: Trim Trailing Whitespace："啟用時，將在保存文件時修剪尾隨空白"。默認(rèn)情況下為false。
圖片
你可以將以下內(nèi)容添加到settings.json文件中以啟用自動修剪：
圖片
你可能希望在Markdown文件中關(guān)閉此設(shè)置，因為根據(jù)CommonMark規(guī)范，你需要在行末放置兩個或更多空格來創(chuàng)建一個硬換行。你可以在settings.json文件中添加以下內(nèi)容來關(guān)閉它：
圖片
或者，你也可以使用反斜杠（\）代替空格來創(chuàng)建硬換行。
8. HTML標(biāo)簽自動包裝
我無法數(shù)清有多少次我需要將一個HTML元素包裹在一個新的元素中——通常是一個div。
使用此功能，我可以立即將<p>標(biāo)簽包裹在一個<div>中，而不必費力地在上面插入一個<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)肅的項目中，你可能都有工具來自動化測試、代碼檢查、構(gòu)建等任務(wù)。
因此，此功能使你可以通過點擊一個按鈕輕松啟動這些任務(wù)。無需切換上下文。
擴(kuò)展：
- NPM（680萬下載）："此擴(kuò)展支持運行在package.json文件中定義的npm腳本"。每次打開包含package.json的項目時，我都會看到它作為推薦擴(kuò)展。
但是，功能已經(jīng)內(nèi)置：
借助內(nèi)置的NPM腳本視圖，我可以輕松查看項目package.json中的所有腳本，并運行我想要的任何腳本：
圖片
唉，但現(xiàn)在你必須將鼠標(biāo)拖到那里，只是為了運行一個簡單的任務(wù)。
使用Tasks: Run Task命令要好得多：
圖片
“它還是太慢了！”
好吧，如果你知道確切的腳本名稱，那就按Ctrl + 打開內(nèi)置終端并滿足你的CLI需求：
圖片
最后總結(jié)
這些擴(kuò)展可能曾經(jīng)在過去發(fā)揮了關(guān)鍵作用，但如今大部分已不再需要，因為VS Code已經(jīng)將它們的功能內(nèi)置。
卸載它們以減少臃腫，提高Visual Studio Code的效率。
