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

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

欢迎关注公众号《前端界》，文章会同步更新，也可快速加入前端交流群！

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

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

vscode版本： Version: 1.81.1

功能已经被 VSCode 内置

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

Auto Close Tag

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

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

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

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

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

Auto Rename Tag

发布时间: 2016-7-3

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

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

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

json 复制代码

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

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

Trailing Spaces

发布时间: 2016-3-8

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

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

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

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

json 复制代码

{  
"files.trimTrailingWhitespace": true,  
}

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

json 复制代码

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

路径自动补全

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

Path IntelliSense
Path Autocomplete

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

Settings Sync

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

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

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

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

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

HTML Snippets

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

css 复制代码

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

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

html 复制代码

 <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。

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

Bracket pair colorization

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

使用前：

使用后：

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

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

Auto Import

发布时间: 2016-7-14

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

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

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

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

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

文件移动时更新设置：

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

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

json 复制代码

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