2023 年 Visual Studio Code 扩展 精选

286 阅读12分钟

根据 2023 年 Stack Overflow 开发人员调查,Visual Studio Code(也称为 VSCode)被评为最受欢迎的集成开发人员环境 (IDE) 工具。

image.png

Bookmarks 书签

Bookmarks  书签允许您为代码中的位置添加书签。这些行用蓝色书签图标标注。可以组织和命名书签,以便快速参考。

所有书签都可以在专用的侧边栏部分找到。这是一个很好的工具,可以改善导航,并帮助您避免花时间搜索参考。

printscreen-toggle

书签以蓝色显示,行号旁边有一个书签图标。

Code Spell Checker 代码拼写检查器

Code Spell Checker  Code Spell Checker 名副其实。它提供了一个基本的拼写检查器,用于查找和修复整个代码库中的拼写错误。拼写错误的单词用波浪形下划线表示。它有多种语言版本。

这是我个人最喜欢的扩展之一。多亏了这个,我发现并修复了很多错别字。

example

此图显示拼写检查器如何检测和更正拼写错误。

CodeSnap 代码快照

CodeSnap  CodeSnap 用于截取代码的屏幕截图。它可以派上用场,轻松共享代码片段。

若要拍摄代码,请使用(在 Windows 和 Linux 上为 Ctrl+Shift+P,在 OS X 上为 Cmd+Shift+P)并搜索 CodeSnap .然后选择要截屏的代码区域,调整宽度,然后单击快门按钮。您还可以通过选择代码、右键单击并选择 CodeSnap 来拍摄快照。

有些网站可以做到这一点,但是,在您的编辑器中使用这些工具可以减少上下文切换以提高生产力。

material_operator-mono

使用 CodeSnap 创建的示例 React 代码段。

CodiumAI 鳕鱼AI

CodiumAI  CodiumAI 是一个免费的 AI 驱动的代码工具包。它支持代码自动完成、聊天、增强搜索和建议等功能。

人工智能已成为提高开发人员生产力的主要参与者。想象一下,花一半的时间编写测试,让你把更多的时间花在其他关键的创造性任务上。

在测试方面,CodiumAI 表现出色。它可以分析代码并生成有意义的测试和全面的测试套件。

Tests-Gif

CodiumAI 基于 Python 代码的一部分生成测试套件。

这是一个相对较新的扩展,并且已经迅速流行起来。支持的语言包括 Python、JavaScript、TypeScript、Java、Go 等。

g_python_random_gen_with_logo

CodiumAI 的自动完成功能,用于根据自然语言提示创建函数。

Error Lens 误差镜头

Error Lens  Error Lens 改进了错误、警告和其他语言诊断的突出显示。这是一个很好的调试和防错工具。

此扩展不会忽视错误。通过突出显示整行以及内联打印的相关消息来突出显示错误和警告。

demo

错误镜头识别错误,通知缺少分号和语法错误。

花更少的时间寻找错误,因为单击注释会将您直接路由到相应的代码行。

它支持多种语言,这使得它对于在不同语言的项目中工作的开发人员很有价值。您还可以配置错误和警告的外观和行为。

Git History Git 历史记录

Git History  Git History 是一个非常有用的 Git 版本控制扩展(该扩展有 1000 万次安装,所以很明显它很受欢迎)。此扩展允许您直接从 VSCode 界面浏览 Git 存储库的详细历史记录。您可以查看文件历史记录、git 日志和执行比较。

它提供了提交日志、分支和文件随时间变化的交互式可视化表示。此扩展提供了在版本控制项目上工作更易于访问且更简单的体验。

gitLogv3--1-

此处使用 Git 历史记录在特定提交上创建标签。

GitLens GitLens的

GitLens GitLens 是最强大的 Git 工具,将许多功能捆绑到一个扩展中。它拥有强大的开源社区,并且通过频繁的更新继续获得积极支持。

使用 GitLens,您可以直接在 VSCode 中获得对存储库的强大见解。注释集成在整个编辑器中,显示大量 Git 信息。

GitLens 最有用的功能之一是责备注释。这使您可以查看谁编写了代码,以及多长时间前编写了代码。

current-line-blame

GitLens 将代码行跟踪到 4 年前从用户 (You) 创建的提交。

我发现另一个很方便的功能是交互式变基编辑器。这在执行变基时提供了良好的用户体验。

rebase

GitLens 的交互式变基示例。可以选取、编辑、删除、压缩提交等。

GitHub Copilot

GitHub Copilot  GitHub Copilot 在过去两年中获得了大量的关注。该产品通过利用先进的 AI 功能彻底改变了编码体验。它不仅有助于完成代码片段,还可以充当 AI 结对编程副驾驶,为整行或代码块提供智能建议。

GitHub Copilot 的优势在于它与 OpenAI 的集成,利用庞大的开源代码库来提供与上下文相关且实用的建议。这不仅加快了编码速度,而且还是一种有价值的学习工具,让您接触到不同的编码模式和最佳实践。  
这不是一个免费工具。个人订阅每月可以支付 10 美元,也可以以折扣价为团队购买。如果您想试用 GitHub Copilot,目前有 30 天试用优惠。

212964557-8d832278-61bb-4288-a8a7-47f35859e868

GitHub Copilot 在函数上使用智能自动完成功能。

还有一些免费的替代品,你可以在这里阅读更多(我也在下面谈论Tabnine)。

Icon Themes 图标主题

虽然 VSCode 包含默认图标,但合并图标包提供了一种提高生产力并为编辑器注入视觉上吸引人的美感的绝佳方法。

与默认图标包相比,图标包提供了一组更广泛且视觉上可识别的图标。这样可以更轻松地在文件类型和文件夹之间进行视觉区分。它可以建立直观的识别,并减少浏览文件时的认知负荷。

 Material Theme Iconsvscode-icons, and file-icons.
在选择图标包时,有很多选择。三个流行的选择是 Material Theme Icons、vscode-icons 和 file-icons。

我发现一组好的图标可以提高文件资源管理器的整体可读性。我喜欢升级的视觉体验带来的额外好处。

Group-2

我的编辑器在启用了 vscode-icons(左)和 Material Icon Theme(右)的情况下进行了并排比较。有文件类型和文件夹的图标,指示它们包含的内容。

Indent Rainbow 缩进彩虹

Indent Rainbow  Indent Rainbow 是一个丰富多彩的扩展,可用于使缩进易于理解,从而有助于维护组织良好且正确缩进的代码。

每个缩进都标有不同的颜色,在 4 种不同的颜色之间交替。结构的丰富多彩的表现不仅有用,而且在视觉上也很吸引人。此扩展对于严重依赖缩进的语言(如 YAML 或 Python)特别有用。

如果您不喜欢默认的颜色集,可以配置自己的颜色!

example--1-

Indent Rainbow 中两种样式的并排比较。左边的一个以鲜艳的颜色显示缩进的线条,另一个以柔和的色调显示整个缩进。

Live Share

Live Share Live Share 是一个协作开发扩展,支持实时共享。

Screenshot-2024-01-18-at-12.10.57-PM

扩展市场中的 Live Share 标头。有 1500 万次安装。

此扩展可帮助您促进富有成效的团队合作。与传统的结对编程会话不同,Live Share 可让您在保留自己的编辑者偏好的同时协同工作。每个人都有自己的光标,您可以在代码库中跟随彼此的光标。

使用 Live Share,在使用共享分支时无需克隆存储库或遇到冲突。进入会话时,会立即从环境中获取上下文。

Multiple Cursor Case Preserve 多光标大小写保留

Multiple Cursor Case Preserve  多光标大小写保留扩展是一种提高生产力的工具,有助于快速编辑代码。

我个人经历过在文件中针对多个变量名称进行重命名,并在进行更改时无意中覆盖大小写时感到沮丧。

Example--1-

针对具有相同单词但大小写不同的多个变量,并将它们全部从“元素”更新为“节点”,同时大小写保持不变。

Tip: Multi-Line Editing in VSCode 提示:VSCode 中的多行编辑

利用以下 Mac 键盘快捷键进行多行编辑:

  • Cmd + D: 快速选择一个单词,然后再次按下它以将选择扩展到连续出现。
  • Alt + Shift + Up/Down:  在光标上方或下方创建多个光标。用于 Cmd + Right/Left 将每个光标导航到行尾或开始,以及 Cmd + Left/Right 到达单词的开头或结尾。
  • Alt + Up/Down: 向上或向下移动当前行。结合使用 Shift + Up/Down ,可同时选择和移动多行,从而简化代码编辑过程。

通过保留外壳,它通过减少固定外壳所需的手动工作来简化编辑过程。

Path Intellisense 路径 Intellisense

Path Intellisense  路径智能感知是一种文件路径生产力工具。它具有智能自动完成功能,可在您键入时动态建议文件路径和目录名称。它可以最大限度地减少由于文件路径不完整或错误而导致的错误。

iaHeUiDeTUZuo

路径 Intellisense 用于使用 style.css 文件自动完成链接元素的“href”属性。

npm Intellisense 它与多种编程语言兼容。但是,如果使用的是 npm,则特别建议使用 npm Intellisense 插件。

Peacock 孔雀

Peacock  Peacock 是我个人的最爱,因为我喜欢为我的编辑器添加更多颜色。它不仅用颜色勾勒出编辑器的轮廓,而且还允许您为每个工作区配置特定的颜色,这在上下文切换时非常有益。

Peacock 带有一系列预选颜色,同时还允许用户自定义颜色。

peacock-windows

来自 Peacock 的一堆编辑器,显示了各种默认颜色选项。颜色将应用于编辑器窗口中的侧边栏和底部。

Prettier 漂亮

Prettier  Prettier 是一款广受接受的代码格式化工具,安装量超过 4000 万次。它为您提供了提高代码可读性的共享解决方案。

这种固执己见的代码格式化程序在整个代码库中强制执行一致的风格。通过对各种编程语言的支持,Prettier根据一组标准化规则自动分析和格式化代码,这消除了关于编码风格的争论并增强了协作。

Prettier 与 VSCode 中的“保存时格式”集成,通过自动应用格式化大大提高了生产力,避免了在手动格式化问题上花费的任何时间。

您可能已经听说过 Prettier,但值得一提的是,它是最重要的扩展之一。

Project Manager 项目管理人

Project Manager  项目管理器是一个简单的工具,用于设置项目(又名收藏夹)并访问它们。它包括一个专用的侧边栏部分,可在一个地方管理您的所有项目。

当您有很多项目需要管理并且需要经常在它们之间切换时,这是一个很好的工具。它带有一组方便的功能,例如按标签进一步组织项目的能力。

vscode-project-manager-side-bar-tags

项目经理的示例,说明如何通过选择“编辑标签”来创建标签,从之前创建的标签中进行选择,以及在“收藏夹”下查看它们的位置。

Tabnine 塔宁

Tabnine  Tabnine 是一个免费的 AI 编码助手。它可以通过提供实时代码完成来帮助提高您的生产力。

除了基本的代码完成之外,它还会考虑上下文并提供进一步的相关建议。这在处理需要大量代码探索的复杂代码库时特别有用。

completions-main

Tabnine 的自动完成示例。自动完成用于快速创建 Python 和 TypeScript 代码。

Tabnine 支持多种编程语言。自适应学习用于随着时间的推移调整开发人员的编码风格。此外,还特别关注隐私,因为代码永远不会被存储或共享。

正如我上面提到的,Tabnine 经常被比作 GitHub Copilot 的替代品,值得免费尝试。请留意这一点,因为它们添加了新的竞争功能。

对此扩展的支持很强,并且不断更新。聊天功能即将推出,允许您提出问题并生成从代码到文档的任何内容。

260391624-68c486fc-fa0d-4cfe-b8e1-432684b057d8

来自 Tabnine 的示例,说明新的 AI 聊天功能的外观。用户请求一个天气 API,Tabnine 用几个例子来回应。

TODO Highlight 待办事项亮点

TODO Highlight 永远不要忘记 TODO Highlight 的另一个待办事项。它强调 TODO s 和其他带有彩色突出显示的注释。

在已经存在了一段时间的代码库中遇到 TODO 过去的 FIXME 遗迹是很常见的。这些可能很难记住删除。TODO Highlight 在这里帮助提醒您不要留下痕迹。

无论您的主题是浅色还是深色,TODO Highlight 都会将焦点放在注释上。

material-night-eighties

一些 JavaScript 代码,其中 TODO 以黄色突出显示,FIXME 以粉红色突出显示。

Todo Tree 多渡树

Todo Tree Todo Tree 提供了一个快速而有条理的解决方案来发现注释。它会在工作区 TODO 中搜索其他批注,并将它们组织在文件树中。

它占据了侧面活动栏中的特定部分。单击每个 TODO 都会打开相关文件,其中 TODO 突出显示以立即引起注意。

screenshot

TODO 树侧边栏部分,其中选定的待办事项为“TODO Fix this!”。在右侧的代码中,“TODO”以亮紫色突出显示。