大厂技术 高级前端 Node进阶
点击上方 程序员成长指北,关注公众号
回复1,加入高级Node交流群
写这篇文章是因为前几天看了一篇文章:《开发者必须安装的15个vscode》,本着自己也想看一下有哪些好用的扩展可以搜罗一下,就点开看了一下, 但看到推荐的,我真的觉得有必要给大家科普一下,有些扩展真的可以卸载了
![7a63c0aabc91dff4e1511f0cecd2462f.gif](https://i-blog.csdnimg.cn/blog_migrate/23a872fc01a3014f40b5f3052fe9dd38.gif)
这篇文章可能会得罪一些vscode扩展的作者,但本人没有任何恶意,只是觉得有些扩展确实已经过时了,里面也包含很多下载量非常高,但已经被vscode内置的。
文章使用的最新版本演示, 不是最新版本可能和演示有一丢丢出入:
VSCode版本:1.81.1
功能已经被 VSCode 内置
以下,我列出了一些功能已经被VSCode内置的,以及提供这些功能的扩展的列表。卸载这些现在不再需要的扩展将提高你的编辑器性能和效率。
Auto Close Tag
![604a3acbe1d67f5768af54e8714111d4.jpeg](https://i-blog.csdnimg.cn/blog_migrate/8a21984b27ce8e4855dd8b03e99f07bc.jpeg)
已发布: 2016/6/28 14:06:44
上次更新时间: 2022/2/8 10:28:37
当你添加一个新的HTML标签时,这个扩展功能会自动添加相应的闭合标签。这是一个非常优秀的扩展,下载量也是千万级的,可以看到很多人对它的肯定。但现在vscode已经内置了它的主要功能,我们没必要再安装一遍,占用宝贵的内存资源。
![5e2e992bef724caaf092dd5558571f25.gif](https://i-blog.csdnimg.cn/blog_migrate/d244ea93d7acd694f3809e2fc118e18a.gif)
可以看到我并没安装这个扩展,也可以实现自动闭合,目前测试在 html
js
, jsx
, tsx
都可实现,默认是开启的,不需要额外配置。
注意:VSCode 不支持在
.vue
文件中原生的自动闭合标签功能。您可以通过安装 Vue Languages Features (Volar) 来启用此功能。
Auto Rename Tag
![55ff62cb7ab147b42a2edfdc3ac1cda0.png](https://i-blog.csdnimg.cn/blog_migrate/5918ef3bab68f7bb060f4c755268f020.png)
发布时间: 2016-7-3
上次更新时间:2022-2-8
这个和上面是一个作者的,在修改html标签时,它能自动重命名。现在vscode也内置了,而且在新版本中jsx
、tsx
中也已经支持html标签重命名。
在settings.json
文件中增加配置:
// settings.json
"editor.linkedEditing": true
![2c8bc5c7fc399719b51ba43fc0b52957.gif](https://i-blog.csdnimg.cn/blog_migrate/3550dbc25662ac06c770ffcf88e5972a.gif)
不需要安装 Auto Rename Tag, vscode内置的功能就能实现了。
Trailing Spaces
![c9a4c7398ffed3e560415907ffff81e3.png](https://i-blog.csdnimg.cn/blog_migrate/30aa5b28b0bfc8124d1d54a2bfb20fb6.png)
发布时间: 2016-3-8
上次更新时间:2022-7-11
这个扩展的功能是:自动删除末尾的空白字符,确保一致的格式。下载量也超过150万+。
VSCode现在将该功能内置,可以在文件中自动删除末尾的空白字符。不需要命令或突出显示,它会在保存文件时自动修剪文件,使其成为一个后台操作,无需再费心考虑末尾的空白字符问题。
![ea20772dbcc9e0b0fb3a9413fa49d9e1.gif](https://i-blog.csdnimg.cn/blog_migrate/3bfe24e42ff575e2c08d936e0066a6b5.gif)
将这个配置内容添加到你的settings.json
文件以启用自动修剪:
{
"files.trimTrailingWhitespace": true,
}
有些情况下可能希望关闭这个设置,例如使用vscode写markdown文档时,因为根据CommonMark规范,你必须在行的末尾放置两个或更多空格才能在输出中创建硬行换行。你可以将以下内容添加到你的settings.json文件来关闭它:
{
"[markdown]": {
"files.trimTrailingWhitespace": false
}
}
路径自动补全
大家主要在用的扩展有这两个:
Path IntelliSense
Path Autocomplete
其实VSCode已经具备原生的路径自动补全功能。当你准备输入要导入的文件名(通常在输入""),会列出一个项目中的文件列表,从中选择一个将自动插入文件名,我觉得路径自动补全扩展可以考虑卸载了!
Settings Sync
这个扩展的功能真的非常强大,相信你也被不少人推荐过~
![fcb176b811b284e9d98d01015626d8c3.png](https://i-blog.csdnimg.cn/blog_migrate/e79184acbed3da100bd40947c2f8760c.png)
Settings Sync
可以同步你当前的 VSCode 配置环境,当你需要在其它的电脑工作时,您不用重头再来一遍。新机器登录一下就搞定了。再也不用折腾环境了。
大致原理:使用GitHub Gist来同步多台计算机上的设置,代码段,主题,文件图标,启动,键绑定,工作区和扩展。
打开可以看到,它明确告诉我们不再维护了, 让使用内置的同步功能。我们看一下VSCode中怎么配置:
![8d7d938bcd33a41a380735e3a7427538.png](https://i-blog.csdnimg.cn/blog_migrate/4ef3098d4b13683b3dce57441161b2d8.png)
这里面涉及到绑定账号,配置具体同步内容,我这里就不一一截图演示,如果你不知道怎么使用,推荐看官方操作文档中Settings Sync具体操作方法(https://code.visualstudio.com/docs/editor/settings-sync)
HTML Snippets
![88fadc4ffc7d6ffc869ccaf5b5f03180.png](https://i-blog.csdnimg.cn/blog_migrate/954217b2452da0865dc07ef145eeec4c.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。
![f374be2e103257672ef5d4c5ed0ee5de.gif](https://i-blog.csdnimg.cn/blog_migrate/954af4c643a2cab203e6fe05da5fafa8.gif)
可以看到在开始输入一个Emmet缩写时,就会弹出一个建议,带有自动完成选项。在你键入时,你还会在VSCode的建议文档中看到扩展的预览(如果它是打开的)。
Bracket pair colorization
![a201667c19700644f4764a0350b487eb.png](https://i-blog.csdnimg.cn/blog_migrate/cf063348244480d21d66a5f0bc6d4dfd.png)
这个扩展作用是显示多个彩色括号,看一下效果:
使用前:
使用后:
![f25fcc9c3a0e489f47147ada0d437fb1.png](https://i-blog.csdnimg.cn/blog_migrate/ff7f3855221c2ef92ff9351193e13def.png)
各个结对的括号兄弟都有了不同的颜色。不管是Code Review或是改代码,都便利了许多呢!
但是目前vscode也内置了,所以也不用再下载了,默认是开启的。如果没有开启,点击设置,搜索Bracket Pair,并勾选上以下设置:
![cd1562bbb633bb248903c2a763fb1488.png](https://i-blog.csdnimg.cn/blog_migrate/0432eee5ead6ccc009f3ce856c895053.png)
Auto Import
![b33dd9fca97161fb070ed40ce4003a29.png](https://i-blog.csdnimg.cn/blog_migrate/d2f978552f28ae1462e954103e19de75.png)
发布时间: 2016-7-14
上次更新时间:2021-4-15
下载量330万+,使用这个扩展的用户也是非常的多。但也可以看到作者很久不更新了。
具有自动导入功能时,当文件中引用了模块的函数、变量或其他成员时,该模块会自动导入到文件中,从而节省时间和精力。如果模块文件被移动,这个扩展将帮助自动更新它们。现这些功能也被 VsCode 内置了。
VsCode 内置功能,设置自动导入:
JavaScript > Suggest: Auto Imports: "启用/禁用自动导入建议"。默认情况下为 true。
TypeScript > Suggest: Auto Imports: "启用/禁用自动导入建议"。默认情况下为 true。
![d752c0e0d1e8e83d28ce44d046f6aec4.png](https://i-blog.csdnimg.cn/blog_migrate/c9221a9d90df28c586556cadaa43b851.png)
文件移动时更新设置:
JavaScript > Update Imports on File Move: "启用/禁用在重命名或移动文件时自动更新导入路径的功能"。默认值为 prompt,表示会向您显示一个对话框,询问是否要更新移动文件的导入。将其设置为 always 将跳过对话框,而设置为 never 将完全关闭此功能。
TypeScript > Update Imports on File Move: "启用/禁用在重命名或移动文件时自动更新导入路径的功能"。与前一个设置类似,它有可能的值是 prompt、always 和 never,默认值是 prompt。
![8bc172205735a5871525efa0fd798ebe.png](https://i-blog.csdnimg.cn/blog_migrate/c2e2979f830e79e0f65b3bb287b906dd.png)
也可以直接在setting.json
文件中设置这些属性来控制:
{
"javascript.suggest.autoImports": true,
"typescript.suggest.autoImports": true,
"javascript.updateImportsOnFileMove.enabled": "prompt",
"typescript.updateImportsOnFileMove.enabled": "prompt"
}
TypeScript Hero
![cef6990a1873bb7122bcc7fadfa3f44e.png](https://i-blog.csdnimg.cn/blog_migrate/43edab59d4a3fd721f49a2c03f82ae98.png)
发布时间: 2016-8-05
上次更新时间:2021-4-13
这个百万级别下载量的扩展也可以放心的卸载了,VSCode 自身就是使用 TypeScript 编写的,TypeScript
相关的扩展的功能基本上全部已经被 VSCode 内置
以上都是由于VSCode 内置了功能,让原来的扩展已经不再需要额外安装了,下面再介绍几个已经不再维护的扩展,以及给大家推荐备选替换。
不再维护的扩展
Github
![0f9715715a84d7d8d333bfc75f809de4.png](https://i-blog.csdnimg.cn/blog_migrate/9ac9f5762826d2bdd7afc772fcbe27f7.png)
发布时间: 2016-11-09
上次更新时间: 2021-10-22
Github扩展的作用是:在 VSCode 中直接审查和管理我们的GitHub拉取请求和问题。
这个扩展已经很久没有更新了,作者推荐使用 github 官方开发的 GitHub Pull Requests 作为替代品。之前安装的小伙伴该换就换吧
Beautify
![40bfd46ddf9b2b5f907366436fa2efd7.png](https://i-blog.csdnimg.cn/blog_migrate/69126bbe21d6a4d0c2a41e7e0aa8082d.png)
这个老早以前就不维护了,因为 VSCode 内置的格式化器就是使用 js-beautify
,但是前端当前最流行的格式化工具是 prettier
,建议安装 prettier
,然后设置 VSCode 使用 prettier
作为格式化器。
为什么要提这个,因为还是看到有人在混着用,然后出来说prettier
这个配置失效了,那个设置不起作用。大家真的可以卸载了, 避免很多冲突。
总结
这些扩展在过去可能起到了至关重要的作用,但在大多数情况下已经不再是这样了,因为它们提供的大部分功能已作为内置 VSCode 功能添加。删除它们可以减少 Visual Studio Code 的内存占用并提高效率。
你还知道哪些常用的VSCode扩展已经被内置了呢?欢迎留言,一起讨论,让更多的小伙伴知道,让Vscode飞起来
![69ff87df1419a2fcd0f58ecd80268d58.jpeg](https://i-blog.csdnimg.cn/blog_migrate/a718709e29e7a99ac9f51e8b59a5f72e.jpeg)
Node 社群
我组建了一个氛围特别好的 Node.js 社群,里面有很多 Node.js小伙伴,如果你对Node.js学习感兴趣的话(后续有计划也可以),我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
“分享、点赞、在看” 支持一下