推荐几个有用的 VSCode 扩展

img

大多数开发者都使用 VS Code 作为他们的集成开发环境。今天让我们看一些适用于 VS Code 的有用扩展。

1. 突出显示匹配标签

img

第一个扩展名是高亮显示匹配标记。在编写HTML代码时,有时你希望找到HTML标记的结束标记。如果你的HTML代码很大,这可能有点困难。这个扩展可以帮助你做到这一点。如果你点击一个HTML标记,这个扩展将在开始标记和结束标记上加下划线。你不需要手动查找它。这可以让你的生活更轻松。

2. 图片预览

img

有时你会在项目中使用图像。它可以是本地保存的图像或图像的URL。如果你想看到图像,你必须在浏览器中转到图像URL,或者你必须转到图像保存的路径并打开它。但如果你使用这个扩展,你可以通过将光标悬停在图像路径或URL上来查看图像的预览。所以你不必离开IDE。此外,这可以打开文件浏览中的图像路径,并显示IDE中项目结构中的位置。

3. 快速控制台日志

img

JavascriptTypescript 开发者的实用扩展,用于打印调试信息。

比如你想知道一个变量在某个时间点的值。 你会为该变量添加一个 console.log()

如果使用这个扩展,就不需要手动编写 console.log() 函数了。

只需选择变量,然后按 Ctrl + Alt + L(Windows)Ctrl + Option + L(Mac)

它将为你的变量生成一个 console.log() 函数。

可以自定义此默认快捷键。 此外,还可以从扩展设置中自定义 console.log() 函数的内容。

4.实时预览

img

当你在编写HTML代码时,肯定想要查看预览。即使你使用 Live Server 这样的扩展,也必须离开 IDE 前往浏览器。

但如果你使用了这个扩展,就可以在 VS Code 中看到实时刷新的预览。

此扩展可以在嵌入式窗口中提供预览。如果需要的话也可给出网页浏览器预览。此外还有更多功能可用于该扩展.

5.改变大小写

img

这个扩展能帮助你改变大小写。如果你是某种编程语言的新手,可能对该语言中的命名惯例一无所知。

因此,你可能并没有遵循任何约定。但在了解之后,你可能需要更改这些名称。

如果使用这个扩展,可以迅速完成操作。此扩展支持诸如驼峰式命名、帕斯卡命名法、蛇形命名等多种情况。另外,该扩展还支持多光标操作功能。

6.升级包配置文件 JSON

img

当你启动node-js项目时,你可以使用最新版本的库。一段时间后,也许你想升级你的库。因此,你必须打开终端并使用npm过时的命令来查看过时的列表。这个扩展可以帮助做到这一点。当你打开package.json时,它会显示哪些库已经过时。在快速操作菜单中,有一个更新库的选项。

7. Todo Tree

img

Todo Tree 可以帮助你组织待办事项。在进行大型项目时,有时会发现错误,你可能会用修复它的想法添加一个待办评论。你的项目中可能包含一组类似的待办事项。如果安装了此扩展程序,你可以在一个地方查看所有的待办事项。无需手动查找待办事项。Todo Tree还支持FIXME、BUG、XXX、HACK等标签。你也可以在扩展设置中添加自定义标签。

8.CodeTogether

img

这个扩展提供了实时与他人分享你的IDE的功能,就像谷歌文档那样。最棒的是它也支持IntelliJ和Eclipse IDEs。这意味着你和合作伙伴不需要使用相同的IDE。你可以用VS Code,而你的队友则用IntelliJ 进行实时共享。如果你想要更多功能,还有这个扩展的专业版本可供选择。

类似的帖子