写这篇文章是因为前几天看了一篇文章：《开发者必须安装的15个vscode》，本着自己也想看一下有哪些好用的插件可以搜罗一下，就点开看了一下，但看到推荐的插件，我真的觉得有必要给大家科普一下，有些扩展真的可以卸载了 ![19B20C58.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6d0680158d664e94ac11656e4aadd8b0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=240&h=240&s=133059&e=gif&f=19&b=f6f6f6) > **欢迎关注公众号《`前端界`》，文章会同步更新，也可快速加入前端交流群！** 这篇文章可能会得罪一些vscode扩展的作者，但本人没有任何恶意，只是觉得有些扩展确实已经过时了，里面也包含很多下载量非常高，但已经被vscode内置的。文章使用的最新版本演示，不是最新版本可能和演示有一丢丢出入: > vscode版本： > Version: 1.81.1 ## 功能已经被 VSCode 内置以下，我列出了一些功能已经被VSCode内置的，以及提供这些功能的扩展插件的列表。卸载这些现在不再需要的扩展插件将提高你的编辑器性能和效率。 ### Auto Close Tag ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c187a4547b184f1da846aa147c013820~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=744&h=162&s=20689&e=jpg&b=282a37) > 已发布: 2016/6/28 14:06:44 > > 上次更新时间: 2022/2/8 10:28:37 当你添加一个新的HTML标签时，这个扩展功能会自动添加相应的闭合标签。这是一个非常优秀的扩展，下载量也是千万级的，可以看到很多人对它的肯定。但现在vscode已经内置了它的主要功能，我们没必要再安装一遍，占用宝贵的内存资源。 ![vscode0903_1.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/92712a4907a34d19af2fd25f99cd0b18~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1081&h=683&s=73829&e=gif&f=40&b=282b37) 可以看到我并没安装这个插件，也可以实现自动闭合，目前测试在 `html` `js`, `jsx`, `tsx`都可实现，默认是开启的，不需要额外配置。 > 注意：VSCode 不支持在 `.vue` 文件中原生的自动闭合标签功能。您可以通过安装 Vue Languages Features (Volar) 扩展插件来启用此功能。 ### Auto Rename Tag ![1693738386457.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dd4df4e6817046d48d068c756af6658a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=531&h=166&s=28742&e=png&b=292b37) > 发布时间: 2016-7-3 > > 上次更新时间:2022-2-8 这个和上面是一个作者的，在修改html标签时，它能自动重命名。现在vscode也内置了，而且在新版本中`jsx`、`tsx`中也已经支持html标签重命名。在`settings.json`文件中增加配置： ```json // settings.json "editor.linkedEditing": true ``` ![vscode0903_2.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ff24bdc3e5848dda2f3c58fd1bf88fd~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1011&h=729&s=339287&e=gif&f=45&b=2a2e39) 不需要安装 Auto Rename Tag， vscode内置的功能就能实现了。 ### Trailing Spaces ![1693740924985.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/570cac182b50422b917f8914c17525bc~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=574&h=140&s=11418&e=png&b=282a36) > 发布时间: 2016-3-8 > > 上次更新时间:2022-7-11 这个扩展的功能是：自动删除末尾的空白字符，确保一致的格式。下载量也超过150万+。 VSCode现在将该功能内置，可以在文件中自动删除末尾的空白字符。不需要命令或突出显示，它会在保存文件时自动修剪文件，使其成为一个后台操作，无需再费心考虑末尾的空白字符问题。 ![vscode0903_3.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8da14ed4b91640c4b6379194afb67e37~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=678&h=519&s=73869&e=gif&f=54&b=272a34) 将这个配置内容添加到你的`settings.json`文件以启用自动修剪： ```json { "files.trimTrailingWhitespace": true, } ``` 有些情况下可能希望关闭这个设置，例如使用vscode写markdown文档时，因为根据CommonMark规范，你必须在行的末尾放置两个或更多空格才能在输出中创建硬行换行。你可以将以下内容添加到你的settings.json文件来关闭它： ```json { "[markdown]": { "files.trimTrailingWhitespace": false } } ``` ### 路径自动补全大家主要在用的扩展有这两个： - Path IntelliSense - Path Autocomplete 其实VSCode已经具备原生的**路径自动补全功能**。当你准备输入要导入的文件名（通常在输入""），会列出一个项目中的文件列表，从中选择一个将自动插入文件名，我觉得路径自动补全插件可以考虑卸载了！ ![vscode0903_4.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/682454ef057f4646984ba18dea4b2621~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1009&h=618&s=625689&e=gif&f=146&b=292c36) ### Settings Sync 这个扩展的功能真的非常强大，相信你也被不少人推荐过~ ![1693744378605.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/36f42a38284f44bfb2fcb80f497a2b3a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=573&h=198&s=18024&e=png&b=282a36) `Settings Sync`可以同步你当前的 VSCode 配置环境，当你需要在其它的电脑工作时，您不用重头再来一遍。新机器登录一下就搞定了。再也不用折腾环境了。大致原理：使用GitHub Gist来同步多台计算机上的设置，代码段，主题，文件图标，启动，键绑定，工作区和扩展。打开插件可以看到，它明确告诉我们不再维护了，让使用内置的**同步功能**。我们看一下VSCode中怎么配置： ![1693744891024.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/53b43edaffc442b4ac736964a2368b3a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=958&h=670&s=132361&e=png&b=282a36) 这里面涉及到绑定账号，配置具体同步内容，我这里就不一一截图演示，如果你不知道怎么使用，推荐看官方操作文档中[Settings Sync](https://code.visualstudio.com/docs/editor/settings-sync)具体操作方法（https://code.visualstudio.com/docs/editor/settings-sync） ### HTML Snippets ![1693745486128.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7af0ca7d51384204a4155e1236841bd6~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=581&h=180&s=15710&e=png&b=282a36) 早年间相信大家写 HTML 时都会安装它，简单回顾一下当年它作用： ``` ul>li.slide*3>p.item$ ``` 通过上面的写法，直接就能快速帮我们生成代码片段： ```html

``` 遥想当年，真的觉得泰裤辣，写代码嗖嗖的~ 和`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](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/085ff10e14f44ac096ac9047e247d470~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=894&h=618&s=74217&e=gif&f=31&b=282c35) 可以看到在开始输入一个Emmet缩写时，就会弹出一个建议，带有自动完成选项。在你键入时，你还会在VSCode的建议文档中看到扩展的预览（如果它是打开的）。 ### Bracket pair colorization ![1693746481749.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7c8d9ce2382943ee9c574481c7a79c66~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=970&h=169&s=20352&e=png&b=282a36) 这个插件作用是显示多个彩色括号，看一下效果：使用前： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5a60ca5f0a7046aeafa221da39e58632~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=683&h=160&s=16668&e=png&b=282b36) 使用后： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f02d34b0ac0c45b38bd95f3a4465881f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=669&h=160&s=18609&e=png&b=292b37) 各个结对的括号兄弟都有了不同的颜色。不管是Code Review或是改代码，都便利了许多呢！但是目前vscode也内置了，所以也不用再下载了，默认是开启的。如果没有开启，点击设置，搜索Bracket Pair，并勾选上以下设置： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c160be11ac7143538880afc0746ed16a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=953&h=263&s=49215&e=png&b=292b37) ### Auto Import ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e033f7dac25425ca1952735a345faed~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=641&h=169&s=16452&e=png&b=282a36) > 发布时间: 2016-7-14 > > 上次更新时间:2021-4-15 下载量330万+,使用这个扩展的用户也是非常的多。但也可以看到作者很久不更新了。具有自动导入功能时，当文件中引用了模块的函数、变量或其他成员时，该模块会自动导入到文件中，从而节省时间和精力。如果模块文件被移动，这个扩展将帮助自动更新它们。现这些功能也被 VsCode 内置了。 VsCode 内置功能，设置自动导入： - JavaScript > Suggest: Auto Imports: "启用/禁用自动导入建议"。默认情况下为 true。 - TypeScript > Suggest: Auto Imports: "启用/禁用自动导入建议"。默认情况下为 true。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7c93c5ac9d064ef9abadca3a68416559~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=635&h=434&s=41694&e=png&b=282a36) 文件移动时更新设置： - JavaScript > Update Imports on File Move: "启用/禁用在重命名或移动文件时自动更新导入路径的功能"。默认值为 prompt，表示会向您显示一个对话框，询问是否要更新移动文件的导入。将其设置为 always 将跳过对话框，而设置为 never 将完全关闭此功能。 - TypeScript > Update Imports on File Move: "启用/禁用在重命名或移动文件时自动更新导入路径的功能"。与前一个设置类似，它有可能的值是 prompt、always 和 never，默认值是 prompt。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dc3f0453a0ed40eba38f19918437be11~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=606&h=392&s=33583&e=png&b=292b37) 也可以直接在`setting.json`文件中设置这些属性来控制： ```json { "javascript.suggest.autoImports": true, "typescript.suggest.autoImports": true, "javascript.updateImportsOnFileMove.enabled": "prompt", "typescript.updateImportsOnFileMove.enabled": "prompt" } ``` ### TypeScript Hero ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0187dae9bdee4a14a287c9880307c730~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=555&h=178&s=31409&e=png&b=282a36) > 发布时间: 2016-8-05 > > 上次更新时间:2021-4-13 这个百万级别下载量的扩展也可以放心的卸载了，VSCode 自身就是使用 TypeScript 编写的，`TypeScript` 相关的扩展的功能基本上全部已经被 VSCode 内置以上都是由于VSCode 内置了功能，让原来的扩展已经不再需要额外安装了，下面再介绍几个已经不再维护的扩展，以及给大家推荐备选替换。 ## 不再维护的扩展 ### Github ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1f7e05368a3944dbb9c4952bc9b0a10a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=706&h=152&s=19708&e=png&b=282a36) > 发布时间: 2016-11-09 > > 上次更新时间: 2021-10-22 Github扩展的作用是：在 VSCode 中直接审查和管理我们的GitHub拉取请求和问题。这个扩展已经很久没有更新了，作者推荐使用 github 官方开发的 [GitHub Pull Requests](https://link.zhihu.com/?target=https%3A//marketplace.visualstudio.com/items%3FitemName%3DGitHub.vscode-pull-request-github) 作为替代品。之前安装的小伙伴该换就换吧 ### Beautify ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6a3a5707f8e34b8c86f0e5057c401576~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=625&h=155&s=22881&e=png&b=282a36) 这个老早以前就不维护了，因为 VSCode 内置的格式化器就是使用 `js-beautify`，但是前端当前最流行的格式化工具是 `prettier`，建议安装 `prettier`，然后设置 VSCode 使用 `prettier` 作为格式化器。为什么要提这个，因为还是看到有人在混着用，然后出来说`prettier`这个配置失效了，那个设置不起作用。大家真的可以卸载了，避免很多冲突。 ## 总结这些扩展在过去可能起到了至关重要的作用，但在大多数情况下已经不再是这样了，因为它们提供的大部分功能已作为内置 VSCode 功能添加。删除它们可以减少 Visual Studio Code 的内存占用并提高效率。你还知道哪些常用的VSCode扩展已经被内置了呢？欢迎留言，一起讨论，让更多的小伙伴知道，让Vscode飞起来 ![1E83FDEF.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a273c75c4e1349a8b49801c619b7d650~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=220&h=220&s=8695&e=jpg&b=fbfafa) > **欢迎关注公众号《`前端界`》，文章会同步更新，也可快速加入前端交流群！**