2024 最新最全 VS Code 插件推荐！-51CTO.COM

Visual Studio Code 是由微软开发的一款开源的代码编辑器，它有了一个丰富的插件市场，提供了很多实用的插件。本文就来分享 2024 年开发必备的 VS Code 插件！

图片

功能强化

驼峰翻译助手

纠结怎么取变量? 中文一键翻译转换成常用大小驼峰等格式。

图片

change-case

Change-case插件提供了一种简单的方法来将单词或变量名更改为各种情况，包括驼峰命名（camelCase）、下划线命名（snake_case）、标题命名（TitleCase）等多种格式。

图片

Codelf

变量命名神器，搜索 Github、Bitbucket、Google Code、Codeplex、Sourceforge、Fedora Project、GitLab 中的项目以查找实际使用的变量名称。

图片

Surround

用于在代码块周围添加包装代码片段。该插件支持语言标识符、多选区操作、完全可自定义、自定义包装代码片段，并为每个包装代码片段单独分配快捷键。

图片

Duplicate Action

一键复制并创建文件或文件夹，提高了开发过程中的文件操作效率。

图片

CSS Peek

它允许开发者直接从HTML文档中快速跳转到匹配的CSS样式定义，并提供预览功能，从而大大提高CSS样式的查找和编辑效率。

图片

Regex Previewer

可以实时预览正则表达式匹配结果，并适用于多种前端框架和语言，同时提供快捷键操作、全局和多行选项等便捷功能，以提升开发效率。

图片

Code Spell Checker

Code Spell Checker 插件可以检查单词拼写是否出现错误，检查的规则遵循 camelCase （驼峰拼写法）。

图片

Markdown Preview Enhanced

支持实时预览 Markdown 文件效果，并具备导出 PDF、支持数学公式、流程图等多种高级功能，提供了丰富的定制选项和兼容性，极大地提升了 Markdown 文档的编辑和预览体验。

图片

Markdown All in One

用于提供Markdown编辑的全方位支持，包括实时预览、语法提示、目录生成、表格生成等多种功能。

图片

i18n-ally

主要用于国际化多语言开发，提供内联提示、快速修改key值对应的语言文件、统一管理翻译、自动翻译等功能。

图片

GitHub Repositories

在 VS Code 中快速打开 Github 仓库，无需克隆到本地。

图片

Turbo Console Log

一键生成有意义的 console.log 消息，支持多语言、多光标操作，提供可定制的日志类型和输出格式，提高调试效率。

图片

indent-rainbow

一款代码缩进可视化插件，它通过为文本前面的缩进着色，使缩进更具可读性。

图片

Remote-SSH

允许开发者通过 SSH 协议连接到远程服务器或虚拟机，直接在本地 VS Code 编辑器中操作远程服务器上的代码，实现无缝的远程开发体验。主要功能包括远程连接、无缝的代码编辑和调试、扩展兼容性、多种连接选项、优化的性能以及支持多个远程服务器同时连接等。

图片

前端框架

ES7+ React/Redux/React-Native snippets

提供了许多速记前缀来加速开发并帮助开发人员为 React、Redux、GraphQL 和 React Native 创建代码片段和语法。

图片

Typescript React Code Snippets

此插件包含了使用 Typescript 的 React 代码片段，它支持 Typescript(.ts) 或 TypeScript React (.tsx) 等语言。以下是使用 TypeScript 创建 React 组件的两个片段。

默认导出 React：

图片

导出 React 组件：

图片

Vue - Official

Vue 官方扩展。

图片

Vue 3 Snippets

这个插件包含了所有的 Vue.js 2 和 Vue.js 3 的 api 对应的代码片段。

图片

Vue VSCode Snippets

此插件将 Vue 2 Snippets 和 Vue 3 Snippets 添加到 Visual Studio Code 中。

图片

React Native Tools

允许在不同的模拟器或仿真器上轻松运行和调试代码，从命令面板快速运行 react-native 命令，而无需在终端中手动运行命令，并使用 IntelliSense 浏览 React Native 的函数、对象和参数等。

图片

JavaScript (ES6) code snippets

通过此插件可以使用预定义的 ES6 语法片段速记，从而提高开发效率。这个 VS Code 插件可以自定义，因为它不特定于任何框架。

图片

Tailwind CSS IntelliSense

专为使用 Tailwind CSS 的开发者设计，提供实时的类名建议、自动完成、文档预览等功能，以提升 Tailwind CSS 的开发效率和代码质量。

图片

Git 集成

GitLens

该插件增强了 VS Code 中的 Git，并从每个存储库中释放隐藏数据。可以快速查看代码的编写者、轻松导航和探索 Git 存储库、通过丰富的可视化效果和强大的比较命令获取有效信息，以及执行更多操作，帮助我们更好地理解代码。

图片

Git History

该插件用于查看 Git 日志和文件历史记录并比较分支或提交。

图片

Git Graph

Git Graph 插件用于可视化查看存储库的 Git 操作，并从图形中轻松执行Git操作。

图片

统计分析

Import Cost

在项目中导入多个包时可能会出现性能问题，Import Cost 就用于查看将特定库导入项目的成本。该插件会显示导入库的大小，如果大小为绿色，则表示库很小，而红色表示库很大。

图片

Time Master

从编程活动中自动生成的指标、见解和时间跟踪。它是一个开源项目，独立于网络环境，安全轻量。

图片

VS Code Counter

VS Code Counter 插件用于统计项目代码的行数，安装插件之后，右键点击需要统计代码的文件夹，选择“Count lines in directory”，这时就会在项目根目录出现一个名为 .VSCodeCounter 的文件夹，包含了不同格式的结果，编辑器会打开其中的的 .md 格式。结果中会显示代码总行数，不同格式文件行数，不同路径文件函数等。代码行数中有纯代码行数、空白行数、注释行数。

图片

AI 编程辅助

GitHub Copilot

GitHub Copilot 是 Github 推出的一款 AI 结对编程工具，可以帮助开发者更快、更智能地编写代码，不过该插件并不是免费的。

图片

Tabnine

Tabnine 是一款 AI 代码助手，可加速和简化软件开发，同时保证代码的私密性、安全性和合规性。

图片

Codeium

一个基于 AI 技术的免费代码加速工具包，为VSCode提供70多种语言的快速自动补全、聊天和搜索功能，支持IDE内聊天和多种编程语言的建议。

图片

TONGYI Lingma

通义灵码是阿里云推出的一款基于通义大模型的智能编码辅助工具，提供实时续写、自然语言生成代码、单元测试生成、代码注释生成、代码解释、研发智能问答、异常报错排查等能力。

图片

CodeGeeX

CodeGeeX 是一款基于大模型的智能编程助手，它完善了代码的生成与补全，自动为代码添加注释，此外，它还针对代码问题的智能问答，当然还包括代码解释，实现代码，修复代码bug等非常丰富的功能。

图片

代码美化

Highlight Matching Tag

用于实时高亮显示匹配的标签对，方便用户在 HTML 或 XML 代码中快速找到配对的标签。它可以在点击一个标签时，自动显示配对的标签，并通过下划线或其他样式来指示它们之间的对应关系。

图片

TODO Highlight

实时高亮显示代码中的TODO、FIXME等标记，支持自定义关键字和正则表达式匹配，方便开发者快速识别、管理和追踪待办事项。

图片

Todo Tree

用于在Visual Studio Code中搜索、管理和高亮代码中的待办事项标记（如TODO、FIXME等）。它支持自定义标签、颜色编码、实时更新、过滤与排序等功能，并以可视化的树形结构展示待办事项列表，方便开发者快速定位、编辑和跟踪代码中的待办事项。

图片

Better comments

该插件对不同类型的注释会附加了不同的颜色，更加方便区分，帮助我们在代码中创建更人性化的注释。

图片

Colorize

Colorize 会给颜色代码增加一个当前匹配代码颜色的背景。它通过 CSS 变量、预处理器变量、hsl/hsla 颜色、跨浏览器颜色、exa、rgb、rgba和argb的彩色背景将 CSS 颜色可视化，帮助开发者快速区分颜色。

图片

Image preview

通过此插件，当鼠标悬浮在图片的链接上时，可以实时预览该图片，除此之外，还可以看到图片的大小和分辨率。

图片

CodeSnap

CodeSnap 用于对代码的进行截图和共享。屏幕截图可以用文本或形状进行注释，并通过链接共享或包含在网站或文档中。只需使用 ctrl + shift + P 并输入 CodeSnap，然后按回车键，CodeSnap 窗口就会打开。

图片

Error Lens

Error Lens 是一款把代码检查(错误、警告、语法问题)进行突出显示的插件。Error Lens 通过使诊断更加突出，增强了语言的诊断功能，突出显示了由该语言生成的诊断所在的整行，并在代码行的位置以行方式在线打印了诊断消息。

图片

Pretty TypeScript Errors

Pretty TypeScript Errors 旨在使 TypeScript 的错误信息更易读、更人性化。随着 TypeScript 类型复杂性的增加，错误消息可能会变得混乱不堪，充满了难以理解的括号和“...”。这个扩展通过重新格式化或解释 TypeScript 编译器产生的原始错误信息，来帮助开发者更容易地理解发生了什么。

图片