這篇文章可能會得罪一部分 VSCode 擴充套件的作者，但是我實在是看不慣網上很多的文章還在推薦一些已經過時的擴充套件，我覺得作為 VSCode 的老粉，我有必要寫一篇文章科普一下。
在 VSCode 擴充套件市場目前其實存在著不少下載量特別高但是不應該再被使用的擴充套件，顯然官方是不可能直接給你標出來哪些擴充套件已經被廢棄了，哪些有嚴重 bug，純靠擴充套件作者自覺。很多人新人由於沒有深入去了解過，看了一些文章的介紹或者看了擴充套件市場的簡介覺得有用就安裝了，其實 VSCode 擴充套件安裝多了會導致不少問題的：
- 啟動慢，很多擴充套件是啟動 VSCode 的時候就開始載入的，所以不一定是 VSCode 自身變慢了，可能是你擴充套件狀多了
- 擴充套件之間打架，比如安裝了多個會修改程式碼顏色的擴充套件，
TODO highlight和Todo Tree之間 - 功能重複，例如：
IntelliSense for CSS class names in HTML和HTML CSS Support - CPU 佔用過高，很多被棄坑的 VSCode 擴充套件你去看它們 github 主頁都可以看到一堆 issues 抱怨這個問題，例如 import-cost
本文將主要從兩個角度介紹一些不推薦使用的 VSCode 擴充套件：
- 功能已經被 VSCode 內建
- 維護不積極的擴充套件
本文只是給出一些你應該考慮解除安裝的理由，不是勸說你就應該解除安裝它們，但是我覺得這些事情你應該清楚。
功能已經被 VSCode 內建
Path Intellisense
Last updated：2016/4/17 下午 2:06:10
Issues open/close: 72/60
Download: 2.7M
我經常看到一些使用 VSCode 沒幾天的人噴 VSCode 沒有路徑補全，我覺得很莫名其妙。可以看到這個擴充套件已經快 4 年沒維護了，這也是一個應該放棄使用它的理由，其實如果一個工具本身功能完善，沒什麼 bug，沒有依賴別的專案的話，長期不更新倒沒什麼。但實際上很多專案都會依賴別的專案，尤其是使用 JS 開發的 VSCode 擴充套件，經常可以看到各種 npm 包報安全漏洞，最近一次影響比較大的應該是 acorn。
其實 VSCode 自身已經支援在 import/require 也就是匯入語句中使用路徑補全，但是在其它場景中寫路徑字串時還是沒有提示。如果你覺得在匯入語句中有路徑補全已經能夠滿足你的使用需求，那我覺得這個外掛可以考慮解除安裝了。類似的還有 Path Autocomplete。
Auto Close Tag
Last updated: 2018/2/17 下午 3:24:33
Issues open/close: 100/59
Download: 2.7M
從側邊欄可以看到我一個擴充套件都沒開啟。
Auto Rename Tag
Last updated: 2019/10/27 下午 5:57:53
Issues open/close: 452/71
Download: 2.7M
直接使用 F2 重構即可，不需要安裝擴充套件。auto close tag 和 auto rename tag 的擴充套件包 Auto Complete Tag 也可以考慮解除安裝了。
npm Intellisense
Last updated: 2017/2/23 上午 4:56:50
Issues open/close: 27/19
Download: 1.9M
這個擴充套件的功能是支援在匯入語句中提供 npm 模組補全，從最後更新時間來推測這個功能應該 3 年前就被內建支援，但是下載量很恐怖啊，github 上還能看到 9 天前提的 issue，人間迷惑行為。
Document This
Last updated: 2019/4/17 下午 6:42:11
Issues open/close: 64/123
Download: 638K
VSCode 已經內建生成 jsdoc 的功能。
HTML Snippets
Last updated: 2019/4/17 下午 6:42:11
Issues open/close: 19/21
Download: 3.2M
這個擴充套件的下載量充分說明了有些人安裝擴充套件只看名字。
TypeScript 相關
擴充套件市場裡面搜尋 TypeScrip，勾選按照安裝數量排序，前面幾個最流行的擴充套件的功能基本上全部已經被 VSCode 內建，VSCode 自身就是使用 TypeScript 編寫的，TypeScript 相關實用特性開發排期的優先順序必然很高。所以 Auto Import, TypeScript Hero, TypeScript Importer, Move TS 都可以考慮解除安裝了。安裝量最高的 auto import 下載量高達 867K，最少的都有 250 多 K。
維護不積極
Color Highlight
Last updated: 2017/7/12 上午 12:19:21
Issues open/close: 49/25
Download: 877K
可以考慮 vscode-colorize 作為替代品。
TODO Highlight
Last updated: 2018/7/22 下午 6:15:54
Issues open/close: 27/19
Download: 1.9M
推薦替代品 Todo Tree，下面是我配置了 TODO 註釋高亮後使用效果：
推薦配置：
"todo-tree.general.tags": ["TODO:", "FIXME:"],
"todo-tree.highlights.defaultHighlight": {
"gutterIcon": true
},
"todo-tree.highlights.customHighlight": {
"TODO:": {
"foreground": "#fff",
"background": "#ffbd2a",
"iconColour": "#ffbd2a"
},
"FIXME:": {
"foreground": "#fff",
"background": "#f06292",
"icon": "flame",
"iconColour": "#f06292"
}
}
複製程式碼Live Server
Last updated: 2019/4/17 下午 6:42:11
Issues open/close: 323/324
Download: 4.7M
live server 確實是個好東西，能讓你修改 HTML 程式碼時自動重新整理網頁，最主要的是它是以真實的伺服器託管的網頁，而不是像我們直接用瀏覽器開啟檔案時是使用 file:// 協議託管的，更貼近實際生產環境，file:// 協議還會導致跨域等問題。
這個擴充套件其實從更新時間上來看也不算太長沒更新，主要是你去它的 github issue 頁面 一看，有很多和效能相關的 issues，這個擴充套件的作者自己在擴充套件市場的主頁也置頂說了在找人維護這個專案。
Bracket Pair Colorizer 2
Last updated: 2019/7/16 下午 12:03:57
Issues open/close: 184/35
Download: 756K
進 github issues 頁面 看，一堆 issues 沒人理，和很多不維護的擴充套件一樣，最多的就是導致 CPU 佔用過高的問題。
import-cost
Last updated: 2018/11/30 上午 1:55:09
Issues open/close: 32/44
Download: 517K
import-cost 是 wix 開源專案下的 VSCode 擴充套件之一，另一個下載量比較高的擴充套件是 glean。想當初我剛入坑 VSCode 的時候這是當時被安利率最高的擴充套件之一。和前面說的幾個擴充套件一樣，有 CPU 佔用過高的 issues，沒人維護了。
Output Colorizer
Last updated: 2017/7/6 上午 2:13:49
Issues open/close: 10/13
Download: 517K
衝這最後更新時間我也不敢用了啊，從 issues 來看都說這個擴充套件的功能已經失效。
SVG Viewer
Last updated: 2019/2/28 下午 5:37:42
Issues open/close: 20/20
Download: 427K
推薦國人開發的替代品：vscode-svg2，對比這倆專案的 github issues 形成下鮮明的對比啊，這個國人明顯維護更加積極，功能也更全，更強大。
Regex Previewer
Last updated: 2018/4/27 下午 10:47:11
Issues open/close: 23/13
Download: 169K
推薦線上工具 regex101。
其它一些不推薦使用的擴充套件
TSLint
如果你還不知道 tslint 去年年初就被廢棄了，並且現在是以外掛的形式被整合到 ESLint 了，我覺得你可能是個假前端。
Beautify
VSCode 內建的格式化器就是使用 js-beautify，但是前端界當前最流行的格式化工具是 prettier，建議安裝 prettier，然後設定 VSCode 使用 prettier 作為格式化器：
// settings.json
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[yaml]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
複製程式碼jshint
就沒見幾個開源專案還在用 jshint，推薦使用 vscode-eslint。
如何推薦別人使用一些擴充套件
我們可以在專案根目錄的 .vscode/extensions.json 檔案中配置一些推薦和不推薦使用的擴充套件，在擴充套件市場選擇 Show Recommended Extensions 就可以看到我們推薦的擴充套件。
// .vscode/extensions.json
{
"recommendations": [
"editorconfig.editorconfig",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"yutengjing.view-github-repository",
"yutengjing.open-in-external-app"
],
"unwantedRecommendations": ["hookyqr.beautify", "ms-vscode.vscode-typescript-tslint-plugin", "dbaeumer.jshint"]
}
複製程式碼
最後
貌似 VSCode 最近幾個月一直都在做設定同步的功能，也就是 Settings Sync 做的事情，估計正式上線後這個擴充套件也可以考慮解除安裝了。以前寫過推薦 VSCode 擴充套件的文章，那時我安裝的擴充套件有 100 多個，現在也就將近 50 個左右，是越來越挑剔了，我自己也寫了兩個簡單的擴充套件 View GitHub Repository 和 Open in External App，之前開發擴充套件後還提煉了一個 VSCode 擴充套件開發模板：vscode-extension-boilerplate，感興趣的讀者可以瞭解下。
最後奉上我的 VSCode 擴充套件 gist 地址：cloudSettings，可以搭配 Settings Sync 使用。