面向前端开发人员的 19 个强大的 VS Code 扩展

Visual Studio Code 是 Microsoft 强大的代码编辑器,已迅速成为开发人员社区的最爱。Visual Studio Code Marketplace中提供的各种扩展显着增强了编辑器的多功能性。这些扩展对于 Web 开发人员特别有利,它们提供了简化编码和开发各个方面的工具和功能。

在这篇文章中,我们深入研究 VS Code 扩展的世界,特别关注前端开发。在探索了众多扩展之后,我整理了一个列表,列出了那些因其直观性、易用性和便利性而脱颖而出的扩展。虽然此列表内容丰富,但市场随着新的和改进的扩展而不断发展,因此我鼓励您进一步探索并发现最适合您的开发需求的工具。

如何安装 VS Code 扩展?

在 Visual Studio Code 中安装扩展非常简单,您可以在代码编辑器中完成。在 VS Code Marketplace 中,每个扩展都有自己的页面,您可以在此页面顶部找到可安装给定扩展的命令。

该命令始终以术语开头ext install。要安装扩展,只需CTRL+PVS Code 内部启动“快速打开”面板将此命令复制粘贴到其中,最后重新启动代码编辑器即可使新扩展工作。

对开发人员有用的 VS Code 扩展

1、HTML Snippets

如果您想经常在 Visual Studio Code 中编写 HTML,HTML Snippets 扩展可以作为一个方便的工具,因为它添加了对 HTML 的详细支持。尽管 VS Code 对 HTML 具有基本支持,例如语法提示,但 HTML Snippets 扩展了解更多。

图片[1]-面向前端开发人员的 19 个强大的 VS Code 扩展-得设创意

此扩展最有用的功能可能是,当您开始键入 HTML 标记的名称(不带起始尖括号)时,HTML 片段会快速显示可用选项的列表,以及每个选项的简短信息。

图片[2]-面向前端开发人员的 19 个强大的 VS Code 扩展-得设创意

当您单击所需的元素时,HTML 片段会添加完整的 HTML5 标记及其最常见的属性。例如,如果您想向文档添加链接(锚标记),只需a在 VS Code 中输入,在弹出框中选择正确的选项,HTML 片段就会<a href=""></a>毫不费力地将必要的片段插入到您的编辑器中。

该扩展的作者还注意删除已弃用的元素,因此如果您想使用在弹出列表中找不到的 HTML 标记,则值得检查它是否仍然有效。

2、Turbo-console-log

有没有发现日志消息有点乏味?Turbo-console-log 扩展可以为您提供帮助。它使创建日志消息变得轻而易举。只需选择要检查的变量并按Control + Alt + L即可。

图片[3]-面向前端开发人员的 19 个强大的 VS Code 扩展-得设创意

瞧!之后会出现详细的日志消息。这不仅仅是添加消息;您可以快速注释、取消注释或删除文档中的所有日志,使您的编码更顺畅、更高效。

3、Prettier

Prettier 是一个关心一致性的代码格式化程序。这就像你的代码有一个严格的编辑器,确保一切看起来统一。当您保存时,Prettier 会接管,解析并重新格式化您的代码以遵循设定的规则。

它考虑行长度,整齐地包装代码,并允许您选择要格式化的语言。告别代码中的样式不一致!

4、HTML CSS Class Completion

如果您需要在项目中使用许多CSS 类,HTML CSS 类完成功能可能是一个有用的扩展。我们开发人员经常遇到这样的情况:我们不能完全确定类的确切名称,但它只是作为被动知识存在于我们的脑海中。

这个智能扩展为这个问题提供了一个解决方案,因为它获取当前工作区中所有 CSS 类的名称,并显示有关它们的列表。

图片[4]-面向前端开发人员的 19 个强大的 VS Code 扩展-得设创意

假设您想要使用 Zurb Foundation 创建一个站点,并且想要使用小网格。您不记得这些类是如何准确命名的,但您知道它们具有语义名称。

图片[5]-面向前端开发人员的 19 个强大的 VS Code 扩展-得设创意

使用 HTML CSS 类完成功能,您只需开始键入单词small,可用选项就会立即出现在屏幕上,因此您可以轻松选择所需的选项。

5、Import Cost

关心您的代码的性能吗?导入成本扩展就像一个警惕的助手,在您编码时密切关注性能。它可能不会分析您的整个包,但它会在大量导入使您的用户陷入困境之前提醒您。

图片[6]-面向前端开发人员的 19 个强大的 VS Code 扩展-得设创意

当您引入第三方库时,导入成本会在您的代码旁边显示其大小,帮助您维护精简、高效的项目。

6、VSCode Edge DevTool

适用于 Visual Studio Code 的 Microsoft Edge 开发人员工具将浏览器 DevTools 的强大功能无缝集成到 VSCode 环境中,特别是对于 Microsoft Edge 用户而言。此扩展消除了在处理项目时在代码编辑器和浏览器之间切换的需要。

图片[7]-面向前端开发人员的 19 个强大的 VS Code 扩展-得设创意

凭借查看运行时 HTML 结构并与之交互以及修改样式和布局等功能,它提供了一种在 VSCode 中处理诊断和调试的有效方法。

7、GitLens

GitLens 为您的代码库提供了宝贵的见解。它可以帮助您了解谁对代码进行了更改、原因以及时间。该扩展非常适合可视化代码作者,让您一目了然地显示不同团队成员的贡献。

图片[8]-面向前端开发人员的 19 个强大的 VS Code 扩展-得设创意

GitLens 使导航和探索 Git 存储库变得毫不费力,它具有比较命令等功能,可提供更改及其对项目影响的详细视图。

8、View in Browser

在浏览器中查看是 Visual Studio Code 的简单但功能强大的扩展。它可以让您在编码时在浏览器中快速查看工作结果,从而促进前端开发。您可以通过按CTRL + F1键盘快捷键直接从 VS Code 在默认浏览器中打开 HTML 文件。

请注意,“在浏览器中查看”仅支持 HTML,因此如果您想查看您的站点,则需要打开 HTML 文件。您无法直接从 CSS 或 JavaScript 文件访问浏览器。

图片[9]-面向前端开发人员的 19 个强大的 VS Code 扩展-得设创意

9、VS Code Chrome debugger

VS Code Chrome 调试器对于经常调试客户端 JavaScript 的开发人员来说是一个游戏规则改变者。它允许您直接从 Visual Studio Code 环境调试在 Chrome 中运行的 JavaScript。

图片[10]-面向前端开发人员的 19 个强大的 VS Code 扩展-得设创意

通过使用 Chrome 调试器协议,此扩展将 Chrome 无缝连接到 VS Code,从而无需离开编辑器即可实现设置断点、监视变量和查看调用堆栈等功能。

10、File Utils

File Utils 是一个功能强大的工具,可以让您在编辑器中轻松处理文件。它允许您使用简单的命令创建、复制、移动、重命名和删除文件和文件夹。

图片[11]-面向前端开发人员的 19 个强大的 VS Code 扩展-得设创意

此扩展旨在节省您管理项目文件结构的时间和精力。此外,它还具有大括号扩展功能,有助于通过自动生成字符串来快速设置复杂的文档结构。

11、Debugger for Chrome

Chrome 调试器由 Microsoft 自己构建,目前是第四大最常下载的Visual Studio Code 扩展。

Chrome 调试器可以在 Google Chrome 中调试 JavaScript,而无需离开代码编辑器。这意味着您不需要使用浏览器看到的转译 JavaScript,但可以直接从原始源文件执行调试。请参阅此演示以了解其工作原理。

图片[12]-面向前端开发人员的 19 个强大的 VS Code 扩展-得设创意

该扩展具有像样的调试器所需的所有功能,例如断点设置、变量监视、单步执行、方便的调试控制台以及许多其他功能(请参阅第一个版本的功能列表)。

要使用此扩展,您需要在启用远程调试的情况下启动 Chrome ,并设置正确的launch.json文件。后者可能需要一段时间,但您可以在 GitHub 上找到有关如何正确执行此操作的详细说明。

12、File Ops

File Ops 允许您向文件添加标签和别名,从而增强您的项目组织。此功能简化了项目中重要文件的查找和切换。

图片[13]-面向前端开发人员的 19 个强大的 VS Code 扩展-得设创意

该扩展在跟踪大量文件方面表现出色,提供了一种列出所有标签的便捷方法。此外,它还可以轻松地在同一目录中查看和切换相关文件,例如 .css 和 .js 文件。还提供信息视频来帮助您了解其所有功能。

13、Gremlins tracker

Gremlins Tracker 是您发现代码中隐藏或棘手字符的首选工具。它突出显示零宽度空格和不寻常的引号等字符,这可能会导致意外错误。

图片[14]-面向前端开发人员的 19 个强大的 VS Code 扩展-得设创意

该工具使用颜色编码系统来指示这些角色造成的伤害程度。它还使用 Gremlins 图标标记行,并在您将鼠标悬停在这些字符上时提供有关这些字符的详细提示,帮助您维护干净且无错误的代码。

14、JSHint

Visual Studio Code 的 JSHint 扩展将流行的JSHint JavaScript linter直接集成到代码编辑器中,因此您可以在提交错误后立即收到通知。默认情况下,JSHint 扩展使用 linter 的默认选项,您可以借助配置文件进行自定义。

图片[15]-面向前端开发人员的 19 个强大的 VS Code 扩展-得设创意

这个扩展的使用非常简单,因为 JSHint 用红色标记错误,用绿色下划线标记通知。如果您想了解有关问题的更多信息,只需将鼠标悬停在带下划线的部分上,JSHint 就会立即浮动一个包含问题描述的标签。

图片[16]-面向前端开发人员的 19 个强大的 VS Code 扩展-得设创意

15、Polacode

Polacode 改变了您以视觉方式共享代码的方式。它就像代码的宝丽来相机一样,简化了在 Visual Studio Code (VS Code) 中捕获美观的屏幕截图的过程。

图片[17]-面向前端开发人员的 19 个强大的 VS Code 扩展-得设创意

您可以直接在编辑器中轻松编辑这些屏幕截图,调整代码容器的大小,并使用方便的命令控制图像的外观。Polacode 非常适合以最具视觉吸引力的方式呈现您的代码。

16、jQuery Code Snippets

jQuery 代码片段可以极大地加快 Visual Studio Code 中的前端开发速度,因为它可以让您快速编写 jQuery,而不会出现基本语法错误。jQuery 代码片段目前有大约130 个可用片段,您可以通过键入正确的触发器来调用。

图片[18]-面向前端开发人员的 19 个强大的 VS Code 扩展-得设创意

除一个之外的所有 jQuery 片段均以jq前缀开头。一个例外是将匿名函数插入编辑器的func触发器。

当您不完全确定正确的语法并想腾出时间检查文档时,这个方便的扩展可以为您提供方便的帮助。它还可以轻松快速地滚动浏览可用选项。

图片[19]-面向前端开发人员的 19 个强大的 VS Code 扩展-得设创意

17、Bower

Bower VS Code 扩展可以通过将Bower 包管理器集成到 Visual Studio Code 中,使您的 Web 开发工作流程更加直观。

如果您使用此扩展,则无需在终端和编辑器之间来回切换,而是可以在 Visual Studio Code 中轻松执行包管理任务。

图片[20]-面向前端开发人员的 19 个强大的 VS Code 扩展-得设创意

Bower 扩展将引导您完成项目bower.json文件的创建,您还可以安装、卸载、搜索、更新包、管理缓存以及使用它执行许多其他任务(请参阅完整功能列表)。

您可以通过按启动命令面板F1,在输入栏中键入“Bower”,单击出现的下拉列表中的“Bower”选项,然后选择适当的Bower 命令来访问 Bower 相关命令。

图片[21]-面向前端开发人员的 19 个强大的 VS Code 扩展-得设创意

18、Better Comments

Better Comments 为您的代码注释注入了新的活力,使它们更加用户友好且在视觉上易于区分。该工具可以轻松地将评论分类为警报、查询、待办事项和突出显示等类型,帮助您快速识别每个注释的性质和重要性。

图片[22]-面向前端开发人员的 19 个强大的 VS Code 扩展-得设创意

无论是有关已弃用方法的警报还是有关未完成任务的提醒,此扩展都能确保清晰度。它还为注释掉的代码提供样式选项,有助于维护干净高效的代码。

19、Git History

Git 历史记录可以跟踪 Visual Studio Code 中 Git 项目的更改。当您想要为更大的 Github 项目做出贡献,并且需要一种方法来快速检查其他开发人员所做的修改时,此扩展特别有用。

安装了 Git History 扩展后,您可以查看整个文件或其中特定行的历史记录。您还可以比较同一文件的先前版本。

图片[23]-面向前端开发人员的 19 个强大的 VS Code 扩展-得设创意

如果您在命令面板 ( ) 中输入“Git”一词F1,在下拉列表中选择“Git”,最后选择您需要的命令,则可以访问与 Git 历史记录相关的命令。请注意,您需要先打开要查看其历史记录的文件,然后才能对其执行任何操作。

图片[24]-面向前端开发人员的 19 个强大的 VS Code 扩展-得设创意
© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情

    暂无评论内容