那些你应该考虑卸载的 VSCode 扩展

本文主要是介绍那些你应该考虑卸载的 VSCode 扩展，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

这篇文章可能会得罪一部分 VSCode 扩展的作者，但是我实在是看不惯网上很多的文章还在推荐一些已经过时的扩展，我觉得作为 VSCode 的老粉，我有必要写一篇文章科普一下。

在 VSCode 扩展市场目前其实存在着不少下载量特别高但是不应该再被使用的扩展，显然官方是不可能直接给你标出来哪些扩展已经被废弃了，哪些有严重 bug，纯靠扩展作者自觉。很多人新人由于没有深入去了解过，看了一些文章的介绍或者看了扩展市场的简介觉得有用就安装了，其实 VSCode 扩展安装多了会导致不少问题的：

1. 启动慢，很多扩展是启动 VSCode 的时候就开始加载的，所以不一定是 VSCode 自身变慢了，可能是你扩展状多了
2. 扩展之间打架，比如安装了多个会修改代码颜色的扩展，TODO highlight 和 Todo Tree 之间
3. 功能重复，例如：IntelliSense for CSS class names in HTML 和 HTML CSS Support
4. CPU 占用过高，很多被弃坑的 VSCode 扩展你去看它们 github 主页都可以看到一堆 issues 抱怨这个问题，例如 import-cost

本文将主要从两个角度介绍一些不推荐使用的 VSCode 扩展：

1. 功能已经被 VSCode 内置
2. 维护不积极的扩展

本文只是给出一些你应该考虑卸载的理由，不是劝说你就应该卸载它们，但是我觉得这些事情你应该清楚。

功能已经被 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 使用。

这篇关于那些你应该考虑卸载的 VSCode 扩展的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！