前端开发的秘密武器：20个提升效率的VS Code插件

陈三心

于 2025-01-18 16:34:42 发布

阅读量1.4k

点赞数 71

分类专栏： vscode 文章标签： vscode 前端

本文链接：https://blog.csdn.net/weixin_43288600/article/details/145147187

版权

vscode 专栏收录该内容

1 篇文章

订阅专栏

前言

📫 大家好，我是陈三心，热爱技术和分享，欢迎大家交流，一起学习进步！

🍅 个人主页：陈三心

Visual Studio Code（简称 VS Code）是一款由微软开发的轻量级但功能强大的免费开源代码编辑器，支持 Windows、macOS 和 Linux 操作系统。它以其简洁的界面和出色的性能而备受开发者青睐，内置强大的调试工具、Git 集成和智能代码补全功能。此外，通过丰富的扩展市场，用户可以根据需要安装插件以支持各种编程语言和框架，如 JavaScript、Python、Java、Vue 等。本文就来分享20个前端开发常用的VS Code插件，提升开发效率。

7.Prettier - Code formatter

8.JavaScript (ES6) code snippets

9.Vue - Official

10.Vue 3 Snippets

11.Vue VSCode Snippets

16.Highlight Matching Tag

1.Live Server

Live Server插件的主要功能是快速启动一个本地开发服务器并实时预览 HTML 和其他前端项目文件的更改。它能在浏览器中自动刷新页面，从而大幅提高前端开发效率。

2.Auto Close Tag

Auto Close Tag插件可以自动为 HTML、XML 和 JSX 等标签语言提供标签闭合功能。当你在输入打开标签时，插件会自动生成相应的闭合标签，无需手动输入，节省了大量的时间和精力。

3.Auto Rename Tag

Auto Rename Tag插件可以自动重命名 HTML、XML、JSX 等文件中的成对标签。当你修改一个标签的起始标签时，插件会自动更新该标签的闭合标签，反之亦然。这个插件非常适合用于编写 HTML 或 XML 代码，避免了手动同步修改标签名的麻烦。

4.Git Graph

Git Graph插件提供了一个直观的图形界面来查看和管理 Git 仓库的历史、分支、提交记录等。通过该插件，开发者可以轻松地以图形化的方式查看 Git 提交历史，执行 Git 操作，极大地提高了使用 Git 时的可视化体验。

5.GitLens

GitLens插件提供了对 Git 仓库的深度集成，增强了 Git 的可视化和交互功能。GitLens可以快速查看代码的编写者、Git 提交历史和文件历史，通过丰富的功能和详细的 Git 提交历史视图，帮助开发者更高效地理解、浏览和管理代码库的版本历史。

6.Git History

Git History插件用于查看 Git 仓库的提交历史。该插件提供了图形化的提交历史视图，使开发者能够轻松浏览 Git 仓库中的提交记录、分支、合并情况，并快速查看每个提交的详细信息。它帮助开发者更好地理解和管理代码库的版本控制历史。

7.Prettier - Code formatter

Prettier插件能够自动格式化代码，保持代码风格一致，并提升可读性。它支持多种编程语言和格式化选项，可以通过配置文件进行定制化，自动格式化 JavaScript、CSS、HTML、JSON、Markdown、YAML 等文件，无需手动调整缩进、换行和其他格式设置，使开发者能够专注于编写代码，而不必担心代码的格式问题。

8.JavaScript (ES6) code snippets

JavaScript (ES6) code snippets插件旨在提供快速的 JavaScript（包括 ES6 及更高版本）代码片段。它帮助开发者通过简化输入，快速插入常用的 JavaScript 语法和功能片段，提升编码效率。

9.Vue - Official

Vue - Official插件（之前的名称是Vue Language Features (Volar)）是由 Vue.js 官方团队开发的插件，旨在增强 Vue.js 开发体验。它为 Vue.js 项目提供了许多有用的功能，如语法高亮、代码补全、错误提示、格式化、模板与脚本之间的智能跳转等。这使得 Vue.js 开发更加高效和愉快。

10.Vue 3 Snippets

Vue 3 Snippets插件旨在为 Vue 项目提供快速的代码片段（snippets），使得 Vue 开发更加高效。它包含了常见的 Vue2 和 Vue 3 的代码模式和结构的片段，可以快速插入常用的 Vue 代码，减少手动编写和记忆的时间。

11.Vue VSCode Snippets

Vue VSCode Snippets插件包含了 Vue 2 和 Vue 3 项目中常用的代码模式，能够快速生成 Vue 组件、模板、生命周期钩子等常见代码结构，从而节省开发者手动编写的时间。

12.TODO Highlight

TODO Highlights 插件，用于高亮显示代码中的注释标记（例如TODO、FIXME 等）。它能够帮助开发者快速定位需要完成的任务或需要修复的问题，非常适合在多人协作项目中使用。

除此之外，使用快捷键 ctrl + shift + P 打开命令面板并搜索 Todo Highlight 选择 List the Highlighted annotations，然后选择 All 以列出在所有文件中留下的所有突出显示的注释。

13.vscode-icons

VSCode 官方出品的图标库。它为项目中的各种文件类型添加了自定义图标，旨在帮助开发者更轻松地识别和区分不同类型的文件，改善开发体验。

14.CodeSnap

CodeSnap插件允许开发者能够轻松地将代码片段分享到社交平台或文档中，带有高亮、良好的格式和自定义的外观，非常适合博客、教程、演示等场合使用。

15.Colorize

Colorize插件通过将颜色值以颜色块的形式显示，使得开发者能够直观地看到颜色，而无需离开代码编辑器去查看颜色效果。

16.Highlight Matching Tag

Highlight Matching Tag插件用于高亮显示 HTML、XML 和类似语言中的匹配标签。它可以帮助开发者更容易地找到成对的标签，特别是在复杂的嵌套结构中。该插件通过自动高亮显示标签对，使得开发者在编辑 HTML 或 XML 文件时更容易跟踪开始标签和结束标签之间的关系。

17.Image preview

Image preview插件的主要功能在于帮助开发者在编辑器中快速预览图像文件，无需切换到浏览器或外部查看器。

18.CSS Peek

CSS Peek插件帮助开发者在 HTML 或 CSS 文件中快速导航并查看相关的 CSS 样式。它允许你通过点击 HTML 元素中的类或 ID，快速跳转到相关的 CSS 规则，而无需手动查找和浏览文件。

19.Tabnine

Tabnine插件是一个由人工智能驱动的代码补全插件，旨在提高开发者的编程效率。它提供智能代码补全、上下文感知的建议、自动生成代码片段等功能，支持多种编程语言。Tabnine 依托于深度学习技术，通过分析大规模的开源代码库来学习并预测开发者的编程习惯和常用模式，从而提供高质量的代码补全建议。

20.GitHub Copilot

GitHub Copilot插件是由 GitHub 和 OpenAI 合作开发的人工智能编程助手，旨在通过提供代码补全和智能建议，帮助开发者更快速地编写代码。它是基于 OpenAI 的 GPT 模型构建的，可以自动生成代码片段、函数、类等，支持多种编程语言。GitHub Copilot 通过学习大量的公开代码库，为开发者提供上下文相关的代码建议，极大地提高开发效率。

该插件之前是收费的，现在提供了免费版GitHub Copilot Free。免费版提供了两种模型选择：Anthropic 的 Claude 3.5 Sonnet 和 OpenAI 的 GPT-4o 。开发者每月可以享受 2000 次代码补全 和 50 次聊天交互。