推荐!2023年Visual Studio Code插件之提高生产力

213 阅读3分钟

image.png

Visual Studio Code作为一款流行的代码编辑器,拥有强大的扩展生态系统。这里整理了2023年使用Visual Studio Code的开发者不可错过的插件扩展。

这里介绍6款提高生产力的插件。

VS Code extensions for productivity

GraphQL

image.png

GraphQL Visual Studio Code扩展提供了一系列工具来帮助你编写、验证和测试GraphQL代码。该扩展包含自动完成功能 - 在你输入查询时,它会推荐字段和参数,使编写有效的GraphQL代码更容易。这个功能可以节省时间并减少语法错误的可能性。

该扩展内置了一个linter,可以检查你的代码错误并提供修复建议。使用这个扩展可以避免GraphQL错误,提高效率。

Remote-SSH

image.png

使用VS Code扩展中的Remote-SSH,可以通过消除额外软件或终端窗口的需要,从而安全连接到远程服务器。Remote-SSH允许轻松访问、编辑和传输文件到远程服务器,同时保持在熟悉的Visual Studio Code界面中。可以使用它来提高整体生产力,而不仅仅是简化工作流程。

通过能够在远程机器上运行命令、调试代码,甚至使用扩展,可以完全利用Visual Studio Code的功能,而不受本地设置的限制。

Remote-SSH是一个必备的VS Code扩展。尝试一下,发现使用VS Code扩展远程工作的强大和方便。

Settings Sync

image.png

开发者经常使用文本编辑器来创建Web应用程序。在多台设备上手动维护相同的设置是不方便的。手动同步设置也可能很耗时,并且在不同设备上提供不一致的体验。

使用 Settings Sync 这个 VS Code 扩展,可以轻松地在多台设备之间同步设置,减少配置时间,甚至与他人共享设置。

Auto Rename Tag

image.png

VS Code会自动高亮显示匹配的标签,并在使用开标签时添加闭合标签。Auto Rename Tag扩展可以在你编码时重命名你更改的标签。例如:

  1. 当你重命名一个HTML/XML标签时,这个扩展会自动重命名所有配对的HTML/XML标签。
  2. 你也可以在Javascript中使用自动重命名标签的功能 - 只需将文件类型保存为.js。它会自动与javascript标签配对并重命名。

这个扩展目前只支持HTML、XML、PHP和JavaScript。

Tabnine

image.png

Tabnine VS Code扩展完全致力于提高生产力。它是一个AI代码助手,可以实时自动补全你的代码,加速开发过程。它支持所有流行的编程语言和IDE。

Tabnine具有类似IntelliSense的AI辅助代码补全功能。该扩展可以通过基于上下文和语法预测和建议你的下一行代码,帮助你更快地编程。

CSS Peek

image.png

使用 CSS Peek VS Code 扩展,你可以简单地将鼠标悬停在 HTML 元素上,弹出一个显示应用到该元素上的 CSS 样式的窗口。然后你可以通过点击窗口跳转到 CSS 代码方便地编辑样式。这个功能免除了每次都要手动在 CSS 代码中搜索的麻烦。

CSS Peek 也支持 SCSS、Less 和 Sass 等 CSS 预处理器,所以无论使用哪种预处理器,你都可以在项目中使用它。