2024 年,這些 VS Code 插件可以卸載了!
在 VS Code 中,龐大的插件市場提供了豐富多樣的擴展功能,以增強編碼體驗和效率。然而,如果你安裝了很多插件,就可能會導致:
- 性能下降:過多的插件可能導致 VS Code 的啟動速度變慢,特別是在啟動或打開大型項目時。每個插件都需要加載其自己的代碼和資源,這可能會消耗更多的內存和處理器資源。
- 沖突和兼容性問題:一些插件可能與其他插件或 VS Code 的某些功能發生沖突。這可能導致不穩定的行為、錯誤或功能失效。
- 界面混亂:大量的插件可能會增加 VS Code 的界面復雜性。每個插件都可能添加自己的命令、設置或視圖,這可能會使界面變得混亂和難以管理。
隨著 VS Code 功能的持續增強,許多原先由插件提供的功能現已被官方內置,因此,這些插件已不再必需。本文將盤點那些可以安全卸載的 VS Code 插件,讓你的開發環境更加輕量、高效!
TypeScript Vue Plugin
Vue 已經推出了官方擴展的 2.0 版本,它現在能夠單獨提供完整的 Vue 語言支持,因此,TypeScript Vue Plugin 擴展已不再必要。
Auto Close Tag
Auto Close Tag 插件用于 HTML 標簽的自動關閉。
現在在默認情況下,VS Code 已經默認支持對 HTML、JSX、TSX 標簽的自動關閉,所以可以將這個插件卸載了。
注意,目前 VS Code 仍不支持對 .vue 文件的標簽自動關閉??梢越柚?Vue 的官方語言插件 Vue - Official 來實現。
Trailing Spaces
Trailing Spaces 插件用于刪除文件所有行中的尾部的無用空格,確保格式更加一致。
現在,VS Code 支持自動刪除文件中的尾隨空格。它不需要命令或突出顯示,而是在保存文件時自動修剪文件中的行尾的空格。不過這個功能默認是不啟用的,可以在設置中將“Files: Trim Trailing Whitespace”選中即可。
Bracket Pair Colorizer、Rainbow Brackets
Bracket Pair Colorizer、Rainbow Brackets 插件都用于為匹配的括號對(如 {, }, (, ), [, ])提供彩虹色的著色,這使得在嵌套結構復雜的代碼中,你可以更容易地跟蹤和理解代碼的結構。不同的顏色代表不同的嵌套層級,這樣你可以清晰地看到哪些括號屬于同一對。
在看到括號對著色的需求以及添加該功能作為擴展所涉及的性能問題后,VSCode 團隊決定將其集成到編輯器中。經過測試,原生的括號著色功能速度比 Bracket Pair Colorizer 2 快 10000 倍以上。
該功能時默認啟用的:
不同 VS Code 主題支持的括號顏色數量是不一樣的,例如,Dracula 主題(右)默認有 6 種顏色,但 One Dark Pro 主題(左)只有 3 種。
可以在上面的設置中點擊 Workbench: Color Customizations 對某個主題進行設置括號顏色設置:
"workbench.colorCustomizations": {
"[One Dark Pro]": {
"editorBracketHighlight.foreground1": "#e78009",
"editorBracketHighlight.foreground2": "#22990a",
"editorBracketHighlight.foreground3": "#1411c4",
"editorBracketHighlight.foreground4": "#ddcf11",
"editorBracketHighlight.foreground5": "#9c15c5",
"editorBracketHighlight.foreground6": "#ffffff",
"editorBracketHighlight.unexpectedBracket.foreground": "#FF2C6D"
}
},
Settings Sync
VS Code 已經內置了跨設備同步,因此不再需要使用于第三方擴展:Settings Sync。
只需登錄賬號即可實現不同設備之間的同步:
Auto Import
借助 Auto Import 插件,當文件中引用模塊的函數、變量或其他成員時,模塊會自動導入到文件中,從而提高效率。如果模塊文件被移動,該插件也會自動更新它們。
現在,VS Code 已經默認支持這些功能:
HTML Snippets、HTML Boilerplate、CSS Snippets
HTML Snippets、HTML Boilerplate、CSS Snippets 插件都可以通過縮寫來添加常見的 HTML 和 CSS 片段。
現在,VSCode 已經內置了 Emmet 功能,它提供了類似于這些擴展的HTML和CSS代碼片段。Emmet 在 html、haml、pug、slim、jsx、xml、xsl、css、scss、sass、less 和 stylus 文件中默認啟用。
比如,輸入以下簡寫,可以生成對應的 HTML:
<!-- 簡寫 -->
ol>li*3>p.rul
<!-- 生成結果如下 -->
<ol>
<li>
<p class="rule1">r</p>
</li>
<li>
<p class="rule2"></p>
</li>
<li>
<p class="rule3"></p>
</li>
</ol>
其他
看到網上有些文章說 Path Intellisense 和 Path Autocomplete 這些用于自動補全文件名的插件都可以卸載掉了。實際上,VS Code 現在確實內置了對 JavaScript 常見文件導入方式的路徑補全(比如 import、require),但是有些情況還是不支持自動導入完成的,比如在 JSX 中使用 img、script、a 標簽時。所以,建議先保留這兩個插件中的一個。