网站首页 > gitee 正文

2023你需要使用的最佳VSCode扩展 vs code扩展

sanyeah 2024-03-29 17:30:58 gitee 7 ℃ 0 评论

Visual Studio Code（VSCode）是一款广受欢迎的多功能代码编辑器，在最新的Stack Overflow开发者调查中，近75%的开发者将其选为首选集成开发环境。

VS Code 提供了一系列开箱即用的特性和功能，但其真正的威力在于市场上庞大的扩展生态系统。

整理了VSCode扩展列表，希望大家能使用这些扩展来提高工作效率、增强编码体验并提高工作流程的效率。

从Git集成和协作编辑到代码格式化和调试，这些扩展涵盖了广泛的功能，一定会让你的开发体验更加愉快。

本文持续更新，后续更新地址：https://www.cnblogs.com/testing-/p/17678797.html

1 VSCode扩展的重要性

提高效率

VS Code 插件可以自动执行格式化、生成模板代码和调试等重复性任务，从而节省时间和精力。

提高易用性

Visual Code插件可提供文本转语音、屏幕阅读器和高对比度主题，使编辑器更易使用。

个性化编辑器

自定义编辑器，以适应你的偏好和工作流程。例如，有一些扩展可以更改配色方案、字体和编辑器布局。

与外部工具集成

将VS Code与Git、Docker和ChatGPT等实用工具集成，提供无缝的开发体验。

协作

VSCode扩展工具可实现实时编辑和调试、代码共享和版本控制，从而促进开发人员之间的协作。

2 2023年最佳VSCode扩展

2.1 Chinese

主要功能：中文

2.2 Live Server

主要功能：启动本地服务器，实时查看静态或动态网页的变化。

这个visual studio代码插件可以启动本地开发服务器，并在浏览器中实时查看代码更改。只要你保存代码中的更改，它就会自动刷新浏览器，让你可以看到自己执行的更改。

2.3 Prettier

主要功能：前端语言自动代码格式化和样式执行。

Prettier 是一个独特的代码格式化和风格执行器。当你点击保存时，它会根据一系列规则和约定自动格式化你的代码。

如果你想确保代码格式的一致性和简洁性，而无需花时间手动格式化代码，那么你应该考虑使用这个扩展。它对团队也很有用，因为它能确保风格一致，只需团队成员付出很少的努力即可维护。

2.4 GitLens

主要功能：查看内联Git注释等。

GitLens可在代码编辑器中提供增强的Git功能。它增加了内联责备注释、代码透镜等功能，还能帮助你更好地理解代码及其历史。

有了GitLens，你可以看到代码行随着时间推移而发生的变化，以及谁做了这些变化。

2.5 VSCode-icons

主要功能：VSCode中文件和文件夹的图标。

如果您在大型项目中处理大量文件夹和文件，导航可能会令人厌烦，因为所有文件夹看起来都一样。
VScode-icons可为项目中的文件夹和文件图标添加风格和色彩，它可以帮助您轻松识别不同的文件夹和文件类型，从而减少浏览项目时的疲劳感。

2.6 Tabnine

主要功能： AI驱动的代码自动补全和建议。支持Python, Typescript, PHP, Go, Java, 等Javascript语言。

Tabnine使用AI在你输入时提供智能代码补全建议。它可以从你的代码中学习，并根据你当前的上下文和编码模式建议代码补全。这非常有用，因为它可以帮助你更快地完成代码，从而提高你的工作效率。

2.7 Peacock

主要功能：为不同的VS Code工作区添加颜色。

该扩展可让你为不同的项目自定义工作区颜色和设置，这对于同时处理多个项目的开发人员来说很有帮助，因为他们需要一个视觉线索来帮助他们跟踪正在处理的项目。

通过对工作空间进行颜色编码，你可以轻松识别和切换不同的项目。

2.8 Polacode

主要功能：创建精美的代码截图。

如果你想分享代码片段，在文档或演示文稿中加入代码片段，那么这个扩展就会派上用场。

Polacode可让你创建带有语法高亮显示的精美代码截图。高亮显示你想截取的代码，剩下的就交给Polacode吧。

Polacode用于下载.png和.jpg 图像形式的代码片段。这些截图保留了当前VS Code的所有样式和代码字体，是创建教程和共享代码的便捷工具。

2.9 Docker

主要功能：在VS Code中管理Docker容器。

Docker允许开发人员在代码编辑器中使用容器化应用程序。

对于需要在开发工作流中使用容器和映像的开发人员来说，它非常有用，因为它为管理和部署容器提供了精简的界面。

2.10 Better Comments

主要功能：为代码添加翔实的注释。

Better Comments可为注释添加颜色和格式，从而增强代码注释的可读性。使用该扩展，你还可以将注释分类为警报、查询、待办事项、亮点等。

2.11 Excel Viewer

主要功能：在 VS Code中查看Excel文件。

Excel Viewer可让你在代码编辑器中预览Excel文件。如果你需要处理Excel电子表格和 CSV 文件，并希望在不离开代码编辑器的情况下预览它们，那么你会发现这个扩展非常有用。

2.12 Code Spell Checker

主要功能检测并修复代码中的拼写错误。

该扩展可检查代码注释、字符串和标记文件中的拼写错误。如果你想提高代码的可读性和专业性，这个扩展就能帮你抓住常见的拼写错误。

2.13 Code Runner

主要功能：运行代码片段。

该扩展是一款允许你直接从VS Code编辑器中运行30多种编程语言的整个代码文件的代码片段的工具。当你不想运行整个代码库时，这对测试非常有用。

2.15 Git History

主要功能：查看Git历史并比较文件版本。

Git History可以帮助你直观地查看Git日志，可在代码编辑器中交互式查看Git仓库历史。它还提供了简洁的界面来比较分支和提交。

2.16 Indent-rainbow

主要功能用彩色标记代码中的缩进级别。

缩进代码可以提高代码的可读性，使其更易于理解和维护。该扩展可为代码中的各级缩进添加颜色。它会自动使用你为编辑器设置的当前制表符大小。

2.17 Auto Rename Tag

主要功能：重命名HTML/XML标签。

当你重命名HTML/XML标签时，它会自动重命名这些标签。使用该扩展，您无需在重命名开头标签时手动更新结尾标签。

2.18 ChatGPT

主要功能： GPT-4,Key-free,Free of charge,免Key,免魔法,免注册,免费

ChatGPT 已成为最常用的人工智能工具之一，许多开发人员都使用 chatGPT 来帮助他们更快地工作。该扩展可帮助你将 ChatGPT 集成到你的 VS 代码中。这样，你就可以在不离开代码编辑器的情况下使用 ChatGPT。

2.19 Markdown All in One

主要功能：在VS Code中集成Markdown支持。

该扩展通过提供一套用于格式化、预览和导出Markdown文件的工具，帮助你在代码编辑器中编辑Markdown文件。

2.20 Doxygen

主要功能：生成Doxygen文档

2.21 GitLab Workflow

主要功能：GitLab工作流官方插件

2.22 CSS Peek

主要功能：浏览/查看代码中的 CSS 定义。

只需点击HTML文件中的CSS类或ID，就能快速从HTML跳转到CSS代码，然后再跳转回来。

2.23 Remote - SSH

主要功能：在VS Code中通过SSH与远程服务器协作。

Remote - SSH允许你通过SSH连接到远程服务器或容器，并像在本地机器上一样编辑文件。

如果你经常处理存储在远程服务器或容器上的代码，你会发现远程SSH非常有用，因为它提供了一种无缝、安全的方式来访问和编辑代码。

2.24 GitHub Copilot(收费）

主要功能：人工智能驱动的代码建议和生成

GitHub Copilot 可在你输入代码时为你提供AI驱动的代码建议。通过提供自动完成和代码建议，它可以帮你节省时间并提高工作效率。它甚至可以根据你提供的注释编写代码。

2.25 colorize(css)

主要功能：为代码中的文本和十六进制色码着色。

colorize可根据代码的语法为文本添加颜色。对于想要在代码编辑器中为元素样式添加可视化颜色的前端开发人员来说，这也非常有用。

2.26 Bookmarks

主要功能：在代码中快速添加和浏览书签。

在处理大型代码库时，书签是最有用的visual studio 代码扩展之一。它允许你在文件中为代码行添加书签，以便快速导航。这样，您就可以轻松快速地浏览到这些特定的代码行。

2.27 REST Client

主要功能：REST Client。

REST Client可让您直接在Visual Studio Code中发送HTTP请求并查看响应。

2.28 Markdown Preview Mermaid Support

主要功能：为内置标记预览添加Mermaid和流程图支持

2.29 SonarLint

主要功能：多语言的静态分析工具。

SonarLint可在本地检测和修复 JS/TS、Python、PHP、Java、C、C++、Go、IaC 中的编码问题。与SonarQube和SonarCloud配合使用，以优化团队绩效。

主要功能：使用自己喜欢的工具进行实时协作开发。

Visual Studio Live Share 使您能够与他人实时协作编辑和调试，无论您使用何种编程语言或构建何种应用程序类型。它允许你即时（安全地）共享当前项目，然后根据需要共享调试会话、终端实例、本地主机网络应用程序等！加入会话的开发人员会从您的环境（如语言服务、调试）中获得所有编辑器上下文，这确保他们可以立即开始富有成效的协作，而无需克隆任何软件仓库或安装任何 SDK。

此外，与传统的结对编程不同，Visual Studio Live Share 允许开发人员一起工作，同时保留他们个人的编辑器偏好（如主题、键绑定），并拥有自己的光标。这样，开发人员就可以在相互跟随和独立探索想法/任务之间无缝切换。在实践中，这种既能协同工作又能独立工作的能力提供了一种协作体验，对于许多常见的使用案例来说，这种体验可能会更加自然。

2.31 Project Manager

主要功能：在项目之间轻松切换。

可以用它在 VS Code上同时监督多个项目。无论项目位于何处，您都可以使用项目管理器扩展从一台电脑上访问它们。

2.32 CodeSnap

主要功能：截图。

2.33 Draw.io Integration

主要功能：绘图。

Draw.io绘图工具集成。

2.34 Hex Editor

主要功能：使用十六进制编辑器查看和编辑文件

2.35 GitHub Repositories

主要功能：远程浏览编辑GitHub库

2.36 Todo Tree

主要功能：在树形视图中使用 TODO、FIXME 等注释标记

2.37 Error Lens

主要功能：改进错误、警告和其他语言诊断的高亮显示。

2.38 Image preview

主要功能：显示图像预览

2.39 YAML

主要功能：红帽提供的YAML语言扩展，内置Kubernetes语法支持

2.40 Paste JSON as Code

主要功能：复制JSON，粘贴为Python、Go、TypeScript、C#、C++等语言。

2.41 Path Intellisense

主要功能：文件名自动完成

2.42 Rainbow CSV

主要功能：突出显示CSV和TSV文件，运行类似SQL的查询。

2.43 Auto Import

主要功能：自动查找、解析并提供所有可用导入的代码操作和代码完成。可与 Typescript 和 TSX 配合使用。

2.44 Git Graph

主要功能：查看仓库的 Git 图形，并从图形中执行 Git 操作。

2.45 Material Icon Theme

主要功能：适用于 Visual Studio 代码的 Material Design 图标

2.46 Highlight Matching Tag

主要功能：突出显示匹配的结束和开始标记

2.47 Markdown PDF

主要功能：将Markdown转为PDF、html、png或jpeg

2.48 Color Highlight

主要功能：在编辑器中突出显示网页颜色

2.50 HTML Boilerplate

主要功能：HTML5模板片段生成器。

2.51 Auto Close Tag

主要功能：自动添加 HTML/XML 关闭标签，与 Visual Studio IDE或Sublime Text相同

2.52 koroFileHeader

主要功能：用于生成文件头部注释和函数注释的插件，支持所有主流语言,功能强大，灵活方便，文档齐全，使用简单！

2.53 Remote Development

主要功能：让你在容器、远程机器或 WSL 中打开任何文件夹，并利用 VS Code 的全部功能集。

2.54 GitHub Pull Requests and Issues

主要功能：GitHub 的拉取请求和问题提供程序

2.55 open in browser

主要功能：在默认浏览器或应用程序中打开当前文件。

2.56 Microsoft Edge Tools for VS Code

主要功能：Microsoft Edge 工具。

2.57 EditorConfig for VS Code

主要功能：EditorConfig支持

2.58 Kubernetes

主要功能：开发、部署和调试 Kubernetes 应用程序

2.59 Flutter

主要功能：Flutter 支持和调试器。

2.60 IntelliCode

主要功能：AI-assisted development

3 专有领域

3.1 Python

3.1.1 Python

主要功能：python语言支持

为Python语言提供丰富的支持（适用于所有当前支持的 Python 语言版本：>=3.7），包括 IntelliSense (Pylance)、linting、调试、代码导航、代码格式化、重构、变量资源管理器、测试资源管理器等功能！

3.1.2 Python Environment Manager

主要功能：Python虚拟环境管理

3.1.3 Pylance

主要功能：性能卓越、功能丰富的Python语言服务器。

3.1.4 Python Extended

主要功能：vscode片段：通过提供完成选项和所有参数，可以很容易地用Python编写代码。

3.1.5 Python Indent

主要功能：纠正Python缩进

3.1.6 Python Extension Pack

主要功能：Python的流行Visual Studio Code扩展

3.1.7 autoDocstring - Python Docstring Generator

主要功能：自动生成python文档字符串

3.1.8 Django

主要功能：Django支持：优美的语法和范围片段，适合有截止日期的完美主义者

3.1.9 Jinja

主要功能：Jinja模板语言支持

3.1.10 Jupyter扩展包

主要功能：Jupyter支持，交互式编程和计算，支持智能感知，调试等。

、

3.1.11 Jupyter Keymap

主要功能：Jupyter Keymap

3.1.12 Jupyter Cell Tags

主要功能：Jupyter Cell Tags

3.1.13 Jupyter Notebook Renderers

主要功能：Jupyter Notebook Renderers

3.1.14 Jupyter Slide Show

主要功能：Jupyter Slide Show

3.2 物联网

3.2.1 PlatformIO IDE

主要功能：PlatformIO IDE是下一代物联网集成开发环境。

嵌入式、物联网、Arduino、CMSIS、ESP-IDF、FreeRTOS、libOpenCM3、mbed OS、Pulp OS、SPL、STM32Cube、Zephyr RTOS、ARM、AVR、Espressif (E) 的专业开发环境。

3.3 JS

3.3.1 ESLint

主要功能：ESLint JavaScript.

3.3.2 React Native Tools

主要功能：React Native 的调试和集成命令

3.3.3 Jest

主要功能：使用 Facebook 的 Jest

3.3.4 Quokka.js

主要功能：快速创建JavaScript/TypeScript原型。在您输入代码时，运行时值会更新并显示在您的集成开发环境的代码旁边。

3.3.4 Import Cost（Javascript and Typescript）

主要功能：显示import/require的包大小。

该扩展将在编辑器中内嵌显示导入软件包的大小。该扩展利用 webpack 来检测导入包的大小。

3.3.5 Turbo Console Log

主要功能：一键插入JS控制台日志语句。

Turbo Console Lo 允许你使用键盘快捷键快速为代码添加有意义的JavaScript控制台日志语句。当你需要调试代码，并希望以快速高效的方式添加控制台日志语句时，这个扩展就会大显身手。

3.3.6 TypeScript Vue Plugin (Volar)

主要功能：用于 TypeScript 服务器的 Vue 插件。

3.3.7 Angular 10 Snippets - TypeScript, Html, Angular

主要功能： 242 个 Angular Snippets（TypeScript、Html、Angular Material、Flex Layout、ngRx、RxJS、PWA 和测试）

3.3.8 JavaScript Code Snippets

主要功能：收集最常用的JavaScript代码片段。

JavaScript Code Snippets收集了使用JavaScript时有用的代码片段。这是JavaScript开发人员的必备扩展，他们希望通过使用预置代码片段来完成常见任务，从而节省时间。

3.3.9 ES7+ React/Redux/React-Native snippets

主要功能：React和Redux代码片段集。

与JS代码片段类似，该扩展也提供了用于使用React和Redux的代码片段集。最新版本还增加了TypeScript代码片段。

3.4 数据库

3.4.1 SQL Server (mssql)

主要功能：开发Microsoft SQL Server、Azure SQL数据库和SQL数据仓库

3.4.2 MySQL

主要功能：适用于MySQL/MariaDB、PostgreSQL、SQLite、Redis和ElasticSearch的数据库管理器。

3.4.3 SQLTools

主要功能：连接到许多最常用的数据库

3.5 c/c++

3.5.1 C/C++

主要功能：C/C++ IntelliSense、调试和代码浏览。

3.5.2 C/C++ Themes

主要功能：用于 C/C++ 扩展的用户界面主题。

3.5.3 C/C++ Extension Pack

主要功能：Visual Studio Code 中用于 C++ 开发的常用扩展。

3.5.4 CMake Tools

主要功能：在 Visual Studio Code 中扩展 CMake 支持

3.5.5 CMake

主要功能：为 Visual Studio Code 提供 CMake 语言支持。

3.5.6 C/C++ Compile Run

主要功能：轻松编译和运行单个 c/c++ 文件

3.5.7 C/C++ Runner

主要功能：轻松编译、运行和调试单个或多个 C/C++ 文件。

3.5.8 C/C++ Clang Command Adapter

主要功能：使用 Clang 命令完成和诊断 C/C++/Objective-C

3.6 go

3.6.1 go

主要功能：为 Visual Studio Code 提供丰富的 Go 语言支持

3.7 xmind

3.7.1 Markmap

主要功能：集成Markmap

参考 https://markmap.js.org/repl

3.7.2 vscode-mindmap

主要功能：思维导图支持

4 主题

4.1 One Dark Pro

主要功能：用于Visual Studio Code的Atom标志性One Dark主题。

4.2 GitHub Theme

主要功能：GitHub 主题。

4.3 Material Icon Theme

主要功能：Material Icon主题图标。

4.4 Material Theme Icons