良心提醒：这些你常用的vscode 扩展，应该卸载啦!

大厂技术  高级前端  Node进阶

点击上方 程序员成长指北，关注公众号

回复1，加入高级Node交流群

写这篇文章是因为前几天看了一篇文章：《开发者必须安装的15个vscode》，本着自己也想看一下有哪些好用的扩展可以搜罗一下，就点开看了一下， 但看到推荐的，我真的觉得有必要给大家科普一下，有些扩展真的可以卸载了

这篇文章可能会得罪一些vscode扩展的作者，但本人没有任何恶意，只是觉得有些扩展确实已经过时了，里面也包含很多下载量非常高，但已经被vscode内置的。

文章使用的最新版本演示， 不是最新版本可能和演示有一丢丢出入:

VSCode版本：1.81.1

功能已经被 VSCode 内置

以下，我列出了一些功能已经被VSCode内置的，以及提供这些功能的扩展的列表。卸载这些现在不再需要的扩展将提高你的编辑器性能和效率。

Auto Close Tag

已发布: 2016/6/28 14:06:44

上次更新时间: 2022/2/8 10:28:37

当你添加一个新的HTML标签时，这个扩展功能会自动添加相应的闭合标签。这是一个非常优秀的扩展，下载量也是千万级的，可以看到很多人对它的肯定。但现在vscode已经内置了它的主要功能，我们没必要再安装一遍，占用宝贵的内存资源。

vscode0903_1.gif

可以看到我并没安装这个扩展，也可以实现自动闭合，目前测试在 html js, jsx, tsx都可实现，默认是开启的，不需要额外配置。

注意：VSCode 不支持在  .vue 文件中原生的自动闭合标签功能。您可以通过安装 Vue Languages Features (Volar) 来启用此功能。

Auto Rename Tag

1693738386457.png

发布时间: 2016-7-3

上次更新时间:2022-2-8

这个和上面是一个作者的，在修改html标签时，它能自动重命名。现在vscode也内置了，而且在新版本中jsx、tsx中也已经支持html标签重命名。

在settings.json文件中增加配置：

// settings.json
"editor.linkedEditing": true

vscode0903_2.gif

不需要安装 Auto Rename Tag， vscode内置的功能就能实现了。

Trailing Spaces

1693740924985.png

发布时间: 2016-3-8

上次更新时间:2022-7-11

这个扩展的功能是：自动删除末尾的空白字符，确保一致的格式。下载量也超过150万+。

VSCode现在将该功能内置，可以在文件中自动删除末尾的空白字符。不需要命令或突出显示，它会在保存文件时自动修剪文件，使其成为一个后台操作，无需再费心考虑末尾的空白字符问题。

vscode0903_3.gif

将这个配置内容添加到你的settings.json文件以启用自动修剪：

{  
"files.trimTrailingWhitespace": true,  
}

有些情况下可能希望关闭这个设置，例如使用vscode写markdown文档时，因为根据CommonMark规范，你必须在行的末尾放置两个或更多空格才能在输出中创建硬行换行。你可以将以下内容添加到你的settings.json文件来关闭它：

{  
"[markdown]": {  
"files.trimTrailingWhitespace": false  
}  
}

路径自动补全

大家主要在用的扩展有这两个：

• Path IntelliSense

• Path Autocomplete

其实VSCode已经具备原生的路径自动补全功能。当你准备输入要导入的文件名（通常在输入""），会列出一个项目中的文件列表，从中选择一个将自动插入文件名，我觉得路径自动补全扩展可以考虑卸载了！

vscode0903_4.gif

Settings Sync

这个扩展的功能真的非常强大，相信你也被不少人推荐过~

1693744378605.png

Settings Sync可以同步你当前的 VSCode 配置环境，当你需要在其它的电脑工作时，您不用重头再来一遍。新机器登录一下就搞定了。再也不用折腾环境了。

大致原理：使用GitHub Gist来同步多台计算机上的设置，代码段，主题，文件图标，启动，键绑定，工作区和扩展。

打开可以看到，它明确告诉我们不再维护了， 让使用内置的同步功能。我们看一下VSCode中怎么配置：

1693744891024.png

这里面涉及到绑定账号，配置具体同步内容，我这里就不一一截图演示，如果你不知道怎么使用，推荐看官方操作文档中Settings Sync具体操作方法（https://code.visualstudio.com/docs/editor/settings-sync）

HTML Snippets

1693745486128.png

早年间相信大家写 HTML 时都会安装它，简单回顾一下当年它作用：

ul>li.slide*3>p.item$

通过上面的写法，直接就能快速帮我们生成代码片段：

<ul>
        <li class="slide">
            <p class="item1"></p>
        </li>
        <li class="slide">
            <p class="item2"></p>
        </li>
        <li class="slide">
            <p class="item3"></p>
        </li>
    </ul>

遥想当年，真的觉得泰裤辣，写代码嗖嗖的~

和HTML Snippets 功能相似的还有 CSS Snippets用于扩展CSS的缩写片段。

现在VSCode内置 Emmet 功能，提供了像这些扩展一样的HTML和CSS片段。官方文档VSCode Emmet指南中写了，在默认情况下，在html、haml、pug、slim、jsx、xml、xsl、css、scss、sass、less和stylus文件中都启用了Emmet。

vscode0903_5.gif

可以看到在开始输入一个Emmet缩写时，就会弹出一个建议，带有自动完成选项。在你键入时，你还会在VSCode的建议文档中看到扩展的预览（如果它是打开的）。

Bracket pair colorization

1693746481749.png

这个扩展作用是显示多个彩色括号，看一下效果：

使用前：

使用后：

image.png

各个结对的括号兄弟都有了不同的颜色。不管是Code Review或是改代码，都便利了许多呢！

但是目前vscode也内置了，所以也不用再下载了，默认是开启的。如果没有开启，点击设置，搜索Bracket Pair，并勾选上以下设置：

image.png

Auto Import

image.png

发布时间: 2016-7-14

上次更新时间:2021-4-15

下载量330万+,使用这个扩展的用户也是非常的多。但也可以看到作者很久不更新了。

具有自动导入功能时，当文件中引用了模块的函数、变量或其他成员时，该模块会自动导入到文件中，从而节省时间和精力。如果模块文件被移动，这个扩展将帮助自动更新它们。现这些功能也被 VsCode 内置了。

VsCode 内置功能，设置自动导入：

• JavaScript > Suggest: Auto Imports: "启用/禁用自动导入建议"。默认情况下为 true。

• TypeScript > Suggest: Auto Imports: "启用/禁用自动导入建议"。默认情况下为 true。

image.png

文件移动时更新设置：

• JavaScript > Update Imports on File Move: "启用/禁用在重命名或移动文件时自动更新导入路径的功能"。默认值为 prompt，表示会向您显示一个对话框，询问是否要更新移动文件的导入。将其设置为 always 将跳过对话框，而设置为 never 将完全关闭此功能。

• TypeScript > Update Imports on File Move: "启用/禁用在重命名或移动文件时自动更新导入路径的功能"。与前一个设置类似，它有可能的值是 prompt、always 和 never，默认值是 prompt。

image.png

也可以直接在setting.json文件中设置这些属性来控制：

{  
"javascript.suggest.autoImports": true,  
"typescript.suggest.autoImports": true,  
"javascript.updateImportsOnFileMove.enabled": "prompt",  
"typescript.updateImportsOnFileMove.enabled": "prompt"  
}

TypeScript Hero

image.png

发布时间: 2016-8-05

上次更新时间:2021-4-13

这个百万级别下载量的扩展也可以放心的卸载了，VSCode 自身就是使用 TypeScript 编写的，TypeScript 相关的扩展的功能基本上全部已经被 VSCode 内置

以上都是由于VSCode 内置了功能，让原来的扩展已经不再需要额外安装了，下面再介绍几个已经不再维护的扩展，以及给大家推荐备选替换。

不再维护的扩展

Github

image.png

发布时间: 2016-11-09

上次更新时间: 2021-10-22

Github扩展的作用是：在 VSCode 中直接审查和管理我们的GitHub拉取请求和问题。

这个扩展已经很久没有更新了，作者推荐使用 github 官方开发的 GitHub Pull Requests 作为替代品。之前安装的小伙伴该换就换吧

Beautify

image.png

这个老早以前就不维护了，因为 VSCode 内置的格式化器就是使用 js-beautify，但是前端当前最流行的格式化工具是 prettier，建议安装 prettier，然后设置 VSCode 使用 prettier 作为格式化器。

为什么要提这个，因为还是看到有人在混着用，然后出来说prettier这个配置失效了，那个设置不起作用。大家真的可以卸载了， 避免很多冲突。

总结

这些扩展在过去可能起到了至关重要的作用，但在大多数情况下已经不再是这样了，因为它们提供的大部分功能已作为内置 VSCode 功能添加。删除它们可以减少 Visual Studio Code 的内存占用并提高效率。

你还知道哪些常用的VSCode扩展已经被内置了呢？欢迎留言，一起讨论，让更多的小伙伴知道，让Vscode飞起来

Node 社群

我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

“分享、点赞、在看” 支持一下