那些你應該考慮卸載的 VSCode 擴展

2021-03-02 前端外刊評論

餘騰靖，20年畢業應屆生，在找前端崗位工作，如果大家覺得文章不錯，可以到知乎上去撩這位童鞋，https://www.zhihu.com/people/yu-teng-jing。

這篇文章可能會得罪一部分 VSCode 擴展的作者，但是我實在是看不慣網上很多的文章還在推薦一些已經過時的擴展，我覺得作為 VSCode 的老粉，我有必要寫一篇文章科普一下。

在 VSCode 擴展市場目前其實存在著不少下載量特別高但是不應該再被使用的擴展，顯然官方是不可能直接給你標出來哪些擴展已經被廢棄了，哪些有嚴重 bug，純靠擴展作者自覺。很多人新人由於沒有深入去了解過，看了一些文章的介紹或者看了擴展市場的簡介覺得有用就安裝了，其實 VSCode 擴展安裝多了會導致不少問題的：

啟動慢，很多擴展是啟動 VSCode 的時候就開始加載的，所以不一定是 VSCode 自身變慢了，可能是你擴展裝多了。你可以通過在 VSCode 的命令面板調用命令 Developer: Startup Performance 查看各個擴展的在 VSCode 啟動時的加載時間。擴展之間衝突，比如安裝了多個會修改代碼顏色的擴展，TODO highlight 和 Todo Tree 之間功能重複，例如：IntelliSense for CSS class names in HTML 和 HTML CSS SupportCPU 佔用過高，很多被棄坑的 VSCode 擴展你去看它們 github issues 頁面都可以看到一堆 issues 抱怨這個問題，例如 import-cost

本文將主要從兩個角度介紹一些不推薦使用的 VSCode 擴展：

本文只是給出一些你應該考慮卸載的理由，不是勸說你就應該卸載它們。有些擴展雖然有些問題，但是還是有部分功能沒有被內置或者暫時沒有更好的替代品，但是我覺得這些事情你應該要清楚。由於本人目前主要是用 VSCode 做前端開發，所以文章中涉及到的擴展大多是和前端相關的。

功能已經被 VSCode 內置

文中列出的數據為文章最後更新時的數據，不保證具有時效性，Last updated 為該擴展最後一次發布到 VSCode 擴展市場的時間。

Path Intellisense

Last updated: 2017/5/11Issues open/close: 73/63Download: 2.7M

我經常看到一些使用 VSCode 沒幾天的人噴沒有路徑補全，我覺得很莫名其妙。可以看到這個擴展已經快 3 年沒維護了，這也是一個應該放棄使用它的理由。其實如果一個工具本身功能完善，沒什麼 bug，沒有依賴別的項目的話，長期不更新倒沒什麼。但實際上很多項目都會依賴別的項目，尤其是使用 JS 開發的 VSCode 擴展，經常可以看到各種 npm 包報安全漏洞，最近一次影響比較大的應該是 acorn。

其實 VSCode 自身已經支持在 import/require 也就是導入語句中使用路徑補全，但是在其它場景中寫路徑字符串時還是沒有提示。如果你覺得在導入語句中有路徑補全已經能夠滿足你的使用需求，那我覺得這個插件可以考慮卸載了。類似的還有 Path Autocomplete。

Auto Close Tag

Last updated: 2018/2/17Issues open/close: 100/59Download: 2.6M

從側邊欄可以看到我一個擴展都沒打開，實測在 HTML, js, jsx, tsx 文件中已經內置支持自動閉合標籤功能，但是 vue 還是不支持，可以看一下我提的 issue：auto close tag doesn't work in vue file。

這個擴展的作者開發了很多優秀的 VSCode 擴展，包括這個和下面的 Auto Rename Tag，最有名的應該是 Code Runner。我覺得有些擴展的功能被內置一方面也是好事，畢竟人的精力是有限的，維護開源項目還是很累的。

Auto Rename Tag

Last updated: 2019/10/27Issues open/close: 453/71Download: 2.6M

直接使用快捷鍵 F2 重構即可，不需要安裝擴展。auto close tag 和 auto rename tag 的擴展包 Auto Complete Tag 也可以考慮卸載了。

通過設置 "editor.renameOnType": true（默認沒開啟），你可以達到和 auto rename tag 一毛一樣的效果 , 如果你想只在某種特定語言中開啟這個特性，可以參考下面的配置：

// settings.json
"[html]": {
    "editor.renameOnType": true,
    },
還有一款也是這個作者開發的擴展 Terminal 早就在 2017/7/22 就不維護了，下載量高達 581 K。不維護的理由作者在擴展主頁上也說了，一個是 Code Runner 的功能比它還多，另一個是 VSCode 已經內置了這個擴展的部分功能。
 npm Intellisense
Last updated: 2017/2/23Issues open/close: 27/19Download: 2M
這個擴展的功能是支持在導入語句中提供 npm 模塊補全，從最後更新時間來推測這個功能應該 3 年前就被內置支持，但是下載量很恐怖啊，github 上還能看到 9 天前提的 issue，人間迷惑行為。
和這個擴展功能相同，下載量同樣非常高的另一個擴展是: Node.js Modules Intellisense。
Document This
Last updated: 2018/6/4Issues open/close: 64/124Download: 638K
VSCode 已經內置自動生成 jsdoc 和注釋補全功能。
HTML Snippets
Last updated: 2017/12/28Issues open/close: 19/21Download: 3.3M
這個擴展的下載量充分說明了有些人安裝擴展只看名字，但凡瞅一眼這個擴展的主頁也不會安裝了:
TypeScript 相關
擴展市場裡面搜索 TypeScript，勾選按照安裝數量排序，前面幾個最流行的和 TypeScript 相關的擴展的功能基本上全部已經被 VSCode 內置。VSCode 自身就是使用 TypeScript 編寫的，TypeScript 相關實用特性開發排期的優先級必然很高。所以我覺得其實 VSCode 沒必要安裝什麼 TypeScript 基礎特性相關的擴展，例如什麼模塊的自動導入啊，模塊名的重構啊。VSCode 還在積極發展嘛，雖說 VSCode 還不算是個 IDE，但是事實上把它當作 IDE 做開發的開發者真不少，尤其是前端開發，所以那些基礎特性即便是現在沒內置，必然在將來某個版本會被內置。Auto Import, TypeScript Hero, TypeScript Importer, Move TS 都可以考慮卸載了。安裝量最高的 auto import 下載量高達 867K，最少的都有 250 多 K。
維護不積極Color Highlight
Last updated: 2017/7/12Issues open/close: 49/25Download: 894K
可以考慮 vscode-colorize 作為替代品。
TODO Highlight
Last updated: 2018/7/22Issues open/close: 45/93Download: 953K
推薦替代品 Todo Tree，下面是參考了 TODO Highlight 源碼中的色彩配置修改 Todo Tree 配置的後使用效果：
推薦配置：
// settings.json
"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/17Issues open/close: 332/326Download: 4.8M
live server 確實是個好東西，能讓你修改 HTML 代碼時自動刷新網頁，最主要的是它是以真實的伺服器託管的網頁，而不是像我們直接用瀏覽器打開文件時是使用 file:// 協議託管的，更貼近實際生產環境，file:// 協議還會導致跨域等問題。
這個擴展其實從更新時間上來看也不算太長沒更新，主要是你去它的 github issue 頁面 一看，有很多和性能相關的 issues，這個擴展的作者是個印度小哥，在擴展市場的主頁也置頂說了他最近非常忙，在找人維護這個項目。
我翻看了這個作者的 github 倉庫，發現他 fork 過 liver-server 這個 npm 包，但是這個包 18 年 10 月就不更新了。目前我也沒發現合適的替代品，有需要的讀者我覺得可以繼續用。我實際使用的時候碰到的一個問題就是控制臺會有些無用的警告，雖然不影響使用，但是看著不舒服。
Bracket Pair Colorizer 2
Last updated: 2019/11/29Issues open/close: 187/38Download: 779K
進 github issues 頁面 看，一堆 issues 沒人理，和很多不維護的擴展一樣，最多的就是導致 CPU 佔用過高的問題。這個功能我感覺官方不太可能會集成，搜了一下 VSCode 中這個作者提的 issues，將近有 60 個，但也沒提 issue 讓官方考慮集成這個功能。有評論問我這個擴展有啥好的替代品，我其實也沒發現什麼好的替代品，有一個同類型的 Rainbow Brackets 更不靠譜，它 16 年 5 月 9 號上架的，5 月 12 號到現在就一直沒更新過，總共也就維護了幾天。我目前就是使用內置的縮進線，其實也夠用了，而且我發現自從不用這個插件，代碼的配色都清爽多了。
另一個和縮進線相關的擴展 indent-rainbow 也有一年沒維護了。
import-cost
Last updated: 2018/11/30Issues open/close: 81/57Download: 581K
import-cost 是 wix 開源項目下的 VSCode 擴展之一，另一個下載量比較高的擴展是 glean，是一個 React 重構擴展。想當初我剛入坑 VSCode 的時候這是當時被安利率最高的擴展之一。和前面說的幾個擴展一樣，有 CPU 佔用過高的 issues，沒人維護了。
 Output Colorizer
Last updated: 2017/7/6Issues open/close: 10/13Download: 240K
衝這最後更新時間我也不敢用了啊，從 issues 來看都說這個擴展的功能已經失效。如果你只是想要 log 文件有色彩高亮的話，我覺得不需要安裝擴展，貌似這是 VSCode 主題應該做的事情，默認主題已經支持 log 文件色彩高亮：
SVG Viewer
Last updated: 2019//28Issues open/close: 21/20Download: 431K
這個擴展是個日本小哥開發的，該項目已經放棄維護，github 倉庫 都已經被封存了，推薦國人開發的替代品：vscode-svg2。
Regex Previewer
Last updated: 2018/4/27Issues open/close: 23/13Download: 172K
推薦在線工具 regex101。
vscode-fileheader
Last updated: 2016/8/10Issues open/close: 19/5Download: 143K
這個擴展自從第一次發布之後就一直沒更新過... 推薦國人開發的替代品：koroFileHeader。
XML Tools
Last updated: 2019/6/1Issues open/close: 53/171Download: 1.7M
從 github issues 來看貌似沒人維護了，同類的推薦替代品是紅帽的 XML。
其它一些不推薦使用的擴展TSLint
如果你還不知道 tslint 去年年初就被廢棄了，並且現在是以插件的形式被集成到 ESLint 了，那你可能是個假前端。
Beautify
VSCode 內置的格式化器就是使用 js-beautify，但是前端界當前最流行的格式化工具是 prettier，建議安裝 prettier，然後設置 VSCode 使用 prettier 作為格式化器。同樣的道理，下載量奇高的 JS-CSS-HTML Formatter, Prettify JSON 等格式化插件也不推薦安裝。
// 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，推薦使用 ESLint。
JavaScript (ES6) code snippetsJavaScript (ES6) code snippets
如果你平時開發 React，那你極大可能也安裝了 ES7 React/Redux/GraphQL/React-Native snippets，你可以去對比它倆提供的 snippets，後者基本上覆蓋了前者提供的 snippets，除了 commonjs 的導入語句，也就是說後者沒有 rqr 和 mde 的兩個代碼片段。snippets 擴展裝多了是會影響代碼提示的速度的，因為每次顯示的補全列表都是到對應語言的 snippets 裡面過濾出來的。
GitHub
這個擴展的作者推薦使用 github 官方開發的 GitHub Pull Requests 作為替代品。
IntelliSense for CSS class names in HTML
HTML CSS Support 和 IntelliSense for CSS class names in HTML 是功能差不多兩個擴展，我更推薦使用前者，原因是它的貢獻者中有 VSCode 的核心開發人員。
如何推薦別人使用一些擴展
我們可以在項目根目錄的 .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 使用。

相關焦點

  • 誰會不愛讓代碼騷裡騷氣的VSCode擴展插件呢?
    所以今天，筆者打算寫一寫自己用過的VS Code擴展插件，它們不僅能提高你的生產力，還能讓你寫出騷裡騷氣的代碼。　　本文分為兩部分介紹，一是提高生產力的擴展插件，二是編程格式擴展插件。既然一會兒要談到格式，先讓大家看看筆者的VS Code長什麼樣：
  • 2020 vscode 好用的十佳擴展
    vscode作為免費開源的文本編輯器，它已經越來越受開發者喜愛。因為豐富的插件，它可以媲美IDE，同時它還有著不俗的啟動速度，可以說它是一款披著文本編輯器的IDE一點也不為過。vscode有著無數的插件，今天我們就來盤點一下2020年vscode相對來說非常好用的十佳擴展。Import Cost在開發過程中，我們可能經常會發現自己在項目中添加了依賴項。儘管模塊化開發已成為當今軟體開發的關鍵部分，但最好還是確保對依賴的過度依賴。
  • 2019年JavaScript開發者必備的10個vscode插件
    之前我們還熱衷使用Atom,webstorm,在前兩年的時候改用了vscode,感覺非常好，性能也不錯。而且vscode的社區和市場也日漸強大，這也是我選擇vscode的原因之一。除了安裝擴展程序以將其設置為編輯器的字體之外，還需要幾個步驟，但是並不難。如果你想讓你的代碼看起來更好一點，在同事面前耍一下酷，這絕對值得一試。
  • vscode入門:熟悉vscode和初級配置
    ；這時左邊邊欄打開了擴展安裝界面，列出來的就是一些語言包，選擇中文簡體Install即可下載完成右下角就會提示需要重啟，點擊Restart Now等待重啟，界面即可變成中文。著重關注右下角的學習部分，交互演練可以讓我們快速體驗vscode的一些常用功能和快捷鍵，值得一試；活動欄，Ctrl+Shift+{E/F/D/X}分別打開文件列表、搜索、調試和擴展；熟記快捷鍵後可以隱藏活動欄
  • vscode插件體系詳解
    事實上很多 vscode 的核心功能也是通過插件實現的。本文我們將從以下三個方面詳述 vscode 的插件機制：閱讀本文後續內容，需要對 vscode 的插件開發有基本的了解。關於 vscode 的插件開發可參考 vscode 的官方教程 。1.
  • HBuilderX 2.7.x 發布,插件系統開放,C++ 版的 vscode 來了
    考慮到HBuilderX主要是為前端工程師打造的工具，我們將插件的開發語言定為了JavaScript，插件API及規範則參考了vscode，實現對vscode插件的兼容，這樣vscode的插件也可以快速的移植到HBuilderX中。下圖為HBuilderX的插件架構：
  • VSCode 2019 August版本發布,新功能嘗鮮
    擴展添加內容安全策略針對Webview擴展安全問題，在這次迭代中，針對這些擴展打安全策略，以使他們了解該建議。新添加擴展VS Code圖標存儲庫在github發布了開源了VS代碼圖標的存儲庫（github/microsoft/vscode-icons），供擴展作者使用。每個圖標都有深色/淺色版本。
  • 使用代碼片段的正確姿勢,打造高效的vscode開發環境
    GistPad是一個Visual Studio Code擴展第一版在項目製作之初，就決定寫npm 全局包而不是vscode 插件。一方面是不帶GUI，稍微方便點；另一方面是我偶爾也會用visual studio，所以寫個npm包方便在那邊用；另外提一句有點坑的是vscode 的snippet和vsstudio中的snippet竟然格式不一樣。
  • vscode寫Python數據處理分析代碼,由安裝配置到cell交互模式
    Download點擊上圖紅框處，下載安裝程序下載完成後，運行安裝程序：不用考慮，全勾選稍等片刻，安裝即可完成。先看看界面：重點是左邊紅框處5個小圖標，他們表示各個基礎功能，不過現在我們不需要深入了解他們此時的vscode只是一個漂亮的記事本而已，我們需要讓vscode安裝一些輔助插件：點擊左邊最後一個小圖標，這是安裝插件的地方在輸入框輸入"python"第一個出來的結果，點擊安裝，相信在幾秒內就安裝完成這插件是出自微軟，信心有保證此時你可能會注意到，vscode
  • 萌妹程式設計師鼓勵師24小時在線陪你寫代碼
    再比如，你加班久了，她還會有消息提醒你休息，心情不好的時候還會安慰你說：「怎麼啦？是不是產品需求又改了啊？」Rainbow Fart 插件現以發布到 VSCode 商店，安裝過 VSIX 版本的用戶請卸載之前的版本，從商店安裝：從 VSCode 擴展商店  下載並安裝。在 VSCode 的菜單欄中找到 查看 - 命令面板，或使用快捷鍵 Ctrl + Shift + P（MacOS Command + Shift + P）呼出 命令面板。
  • SAST Weekly | vscode 插件PlatformIO簡介
    我們習慣了vscode舒適的編程環境，面對蒼白的界面不禁感慨人世的艱辛。誒，代碼補全功能沒有嗎？誒，我的代碼高亮去哪了？    誒，我的頭髮呢？    這些看似細微的功能的缺失直接影響著開發者的開發體驗。
  • 手把手教你如何在VSCode裡調試python
    配置在launch.json文件中定義，該文件存儲在工作區的.vscode文件夾中。注意為了更改調試配置，您的代碼必須存儲在一個文件夾中。1.然後，Python擴展創建並打開一個launch.json文件，該文件包含基於您之前選擇的預定義配置，在本例中為Python文件。 您可以修改配置（例如，添加參數），還可以添加自定義配置。更多的配置默認情況下，VS Code僅顯示Python擴展提供的最常見配置。
  • 眾所周知,擁有了vscode就擁有了一切
    vscode是由微軟推出的一款的編輯器，免費開源且功能強大，自從用上之後，基本上不會再使用其他的編輯器，在我看來它幾乎可以用來幹任何事情。常規用法vscode 寫代碼支持各種流行的程式語言，包括c++, Java, js等等。通過相應的插件你甚至能夠對它們進行編澤運行。
  • 超另類:在vscode下實現編譯仿真下載,你絕對想不到
    生命在於運動，技術在於折騰，你是否厭倦了在keil、iar下孜孜不倦的寫代碼、debug，是否玩累了在外部編輯器下寫代碼，然後在轉到ide下進行仿真、下載等操作呢？這個教程將介紹下如何在vscode下實現這些操作，真正實現一個vscode可以吃天、實現編譯仿真下載一條龍服務，而你只需要在vscode下的終端敲幾個命令而已。。。
  • vscode常用插件推薦
    通用插件Chinese: 使vscode顯示為中文One Dark Pro: 一個非常好看的主題插件SettingsSync：同步vscode設置和插件的插件，僅需登錄GitHub選擇gist即可使用Alt+Shift+D下載，Alt+Shift+U上傳。
  • 吹爆程序猿的VSCode彩虹屁插件,釘宮理惠,英雄聯盟版現已生成,你...
    「啾，我的可愛已成功導入」VSCode幾乎支持所有主流語言，是一款程序猿常用的代碼編譯器，同時，它也支持各類擴展程序，Rainbow Fart就是其中之一。為了有更好的編譯體驗，這款插件還可以支持暗黑模式。不過，我們最關心的是它如何召喚蘿莉音？當你打開編輯面板，輸入「import」，它就已經出現了！」啾，我的可愛已成功導入！
  • VSCode 插件Quokka.js用法(圖)
    該擴展易於配置，對於使用 JSX 或 TypeScript 的項目可直接使用。項目地址：https://quokkajs.com/Quokka.js 是一個用於 JavaScript 和 TypeScript 的實時運行代碼平臺。 這意味著它會在你輸入後立即運行您的代碼，並在您的代碼編輯器中顯示各種執行結果。 建議你親自嘗試一下。
  • VSCode 現內存洩漏 BUG,官方處理方式引社區不滿 - OSCHINA - 中文...
    在 vscode 中打開 evenlarger.json3. 滾動。4. 關閉文件。5. 通過「 Process Explorer」觀察內存使用情況。6.即使禁用所有擴展後依然會發生此問題。如果您不同意並認為此問題至關重要：我們很樂意傾聽並重新考慮。VSCode 官方的回覆很快引發了爭議，在這名開發者提交的 issue 下，有很多用戶跟帖表示自己遇到了同樣的問題，還有的甚至在一年前就遇到了類似的問題，並認為官方這樣的做法對社區用戶來說是不負責任的表現。
  • 編程開發工具vscode插件整理
    Lens package.json 文件顯示模塊當前版本和最新版本 vetur 目前比較好的Vue 語法高亮 View Node Package 快速打開選中模塊的主頁和代碼倉庫 VS Live Shar e 實時多人協助 VSCode Great Icons 文件圖標拓展 vscode-database
  • PyCharm vs VSCode,是時候改變你的 IDE 了!
    除此之外，VSCode 還有加載擴展困難的問題，可能只是我的問題，但卻是一個反反覆覆的問題，總在一個地方而且一直存在。 一開始用 VSCode 的時候，你肯定會覺得 「太棒了，我可以自定義 VSCode，這也正是我想要的」，實際上卻要花很多的時間在修復錯誤上，浪費了開發的時間，但這在 PyCharm 上是不存在的。