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

時間  2021-08-13
標籤 javascript css html 前端 vue java node react git github 欄目 JavaScript 简体版
原文   原文鏈接

這篇文章可能會得罪一部分 VSCode 擴展的做者，可是我實在是看不慣網上不少的文章還在推薦一些已通過時的擴展，我以爲做爲 VSCode 的老粉，我有必要寫一篇文章科普一下。javascript

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

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

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

  1. 功能已經被 VSCode 內置
  2. 維護不積極的擴展

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

功能已經被 VSCode 內置

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

Path Intellisense

Last updated: 2017/5/11java

Issues open/close: 73/63node

Download: 2.7Mreact

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

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

path-intellisense

Auto Close Tag

Last updated: 2018/2/17

Issues open/close: 100/59

Download: 2.6M

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

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

auto close tag

Auto Rename Tag

Last updated: 2019/10/27

Issues open/close: 453/71

Download: 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 已經內置了這個擴展的部分功能。

auto rename tag

npm Intellisense

Last updated: 2017/2/23

Issues open/close: 27/19

Download: 2M

這個擴展的功能是支持在導入語句中提供 npm 模塊補全，從最後更新時間來推測這個功能應該 3 年前就被內置支持，可是下載量很恐怖啊，github 上還能看到 9 天前提的 issue，人間迷惑行爲。

和這個擴展功能相同，下載量一樣很是高的另外一個擴展是: Node.js Modules Intellisense。

npm Intellisense

Document This

Last updated: 2018/6/4

Issues open/close: 64/124

Download: 638K

VSCode 已經內置自動生成 jsdoc 和註釋補全功能。

document this

HTML Snippets

Last updated: 2017/12/28

Issues open/close: 19/21

Download: 3.3M

這個擴展的下載量充分說明了有些人安裝擴展只看名字，但凡瞅一眼這個擴展的主頁也不會安裝了:

HTML Snippets

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/12

Issues open/close: 49/25

Download: 894K

能夠考慮 vscode-colorize 做爲替代品。

TODO Highlight

Last updated: 2018/7/22

Issues open/close: 45/93

Download: 953K

推薦替代品 Todo Tree，下面是參考了 TODO Highlight 源碼中的色彩配置修改 Todo Tree 配置的後使用效果：

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/17

Issues open/close: 332/326

Download: 4.8M

live server 確實是個好東西，能讓你修改 HTML 代碼時自動刷新網頁，最主要的是它是以真實的服務器託管的網頁，而不是像咱們直接用瀏覽器打開文件時是使用 file:// 協議託管的，更貼近實際生產環境，file:// 協議還會致使跨域等問題。

這個擴展其實從更新時間上來看也不算太長沒更新，主要是你去它的 github issue 頁面 一看，有不少和性能相關的 issues，這個擴展的做者是個印度小哥，在擴展市場的主頁也置頂說了他最近很是忙，在找人維護這個項目。

我翻看了這個做者的 github 倉庫，發現他 fork 過 liver-server 這個 npm 包，可是這個包 18 年 10 月就不更新了。目前我也沒發現合適的替代品，有須要的讀者我以爲能夠繼續用。我實際使用的時候碰到的一個問題就是控制檯會有些無用的警告，雖然不影響使用，可是看着不舒服。

live server

Bracket Pair Colorizer 2

Last updated: 2019/11/29

Issues open/close: 187/38

Download: 779K

進 github issues 頁面 看，一堆 issues 沒人理，和不少不維護的擴展同樣，最多的就是致使 CPU 佔用太高的問題。這個功能我感受官方不太可能會集成，搜了一下 VSCode 中這個做者提的 issues，將近有 60 個，但也沒提 issue 讓官方考慮集成這個功能。有評論問我這個擴展有啥好的替代品，我其實也沒發現什麼好的替代品，有一個同類型的 Rainbow Brackets 更不靠譜，它 16 年 5 月 9 號上架的，5 月 12 號到如今就一直沒更新過，總共也就維護了幾天。我目前就是使用內置的縮進線，其實也夠用了，並且我發現自從不用這個插件，代碼的配色都清爽多了。

另外一個和縮進線相關的擴展 indent-rainbow 也有一年沒維護了。

import-cost

Last updated: 2018/11/30

Issues open/close: 81/57

Download: 581K

import-cost 是 wix 開源項目下的 VSCode 擴展之一，另外一個下載量比較高的擴展是 glean，是一個 React 重構擴展。想當初我剛入坑 VSCode 的時候這是當時被安利率最高的擴展之一。和前面說的幾個擴展同樣，有 CPU 佔用太高的 issues，沒人維護了。

Output Colorizer

Last updated: 2017/7/6

Issues open/close: 10/13

Download: 240K

衝這最後更新時間我也不敢用了啊，從 issues 來看都說這個擴展的功能已經失效。若是你只是想要 log 文件有色彩高亮的話，我以爲不須要安裝擴展，貌似這是 VSCode 主題應該作的事情，默認主題已經支持 log 文件色彩高亮：

log highlight

SVG Viewer

Last updated: 2019//28

Issues open/close: 21/20

Download: 431K

這個擴展是個日本小哥開發的，該項目已經放棄維護，github 倉庫 都已經被封存了，推薦國人開發的替代品：vscode-svg2。

Regex Previewer

Last updated: 2018/4/27

Issues open/close: 23/13

Download: 172K

推薦在線工具 regex101。

vscode-fileheader

Last updated: 2016/8/10

Issues open/close: 19/5

Download: 143K

這個擴展自從第一次發佈以後就一直沒更新過... 推薦國人開發的替代品：koroFileHeader。

XML Tools

Last updated: 2019/6/1

Issues open/close: 53/171

Download: 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 做爲替代品。

github

IntelliSense for CSS class names in HTML

CSS

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"
    ]
}
複製代碼

recommend extensions

最後

VSCode 最近幾個月一直都在作設置同步的功能，也就是 Settings Sync 作的事情，估計正式上線後這個擴展也能夠考慮卸載了。之前寫過推薦 VSCode 擴展的文章，那時我安裝的擴展有 100 多個，如今也就將近 50 個左右，是愈來愈挑剔了。我本身也寫了兩個簡單的擴展 View GitHub Repository 和 Open in External App，以前開發擴展後還提煉了一個 VSCode 擴展開發模板：vscode-extension-boilerplate，感興趣的讀者能夠了解下。若是文章有什麼錯誤之處或者讀者有什麼推薦的更好的替代品，歡迎在評論區指出。

最後奉上個人 VSCode 擴展 gist 地址：cloudSettings，能夠搭配 Settings Sync 使用。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程