Live Server

A development server with live reload capability

功能简介：基于本地服务的实时开发工具，支持自动刷新。
核心功能：

  • 启动本地服务器，实时渲染 HTML/CSS/JavaScript 文件。
  • 代码保存后自动刷新浏览器，即时预览修改效果。
  • 支持自定义端口、根目录及浏览器默认打开路径。

适用场景：前端开发、静态页面调试、快速原型设计。

Auto Rename Tag

Auto rename paired HTML/XML tag

功能简介：自动同步修改 HTML/XML 标签对。
核心功能：

  • 修改起始标签时，自动更新对应的闭合标签。
  • 支持 Vue、React 等框架的 JSX/TSX 语法。
  • 避免手动修改标签时因遗漏导致的语法错误。

适用场景：Web 开发、组件化编程、XML 文件编辑。

htmltagwrap

Wraps the selected text in HTML tags

功能简介：快速为选中文本包裹 HTML 标签。
核心功能：

  • 快捷键（默认为 Alt + W）一键添加标签。
  • 支持多层嵌套标签与自定义属性。
  • 提升批量结构化代码的编写效率。

适用场景：HTML 模板构建、内容块快速封装。

Prettier

Code formatter using prettier

功能简介：多语言代码格式化工具。
核心功能：

  • 支持 JavaScript、TypeScript、CSS、JSON 等 20+ 语言。
  • 通过配置文件（.prettierrc）自定义代码风格。
  • 保存时自动格式化，确保团队代码风格统一。

适用场景：代码规范化、协作开发、代码审查辅助。

ImgPreview

Preview images in your editor

功能简介：在编辑器中直接预览图片。
核心功能：

  • 鼠标悬停于图片路径时显示缩略图。
  • 支持 PNG、JPG、GIF、SVG 等常见格式。
  • 快速定位图片资源，避免频繁切换窗口。

适用场景：图像资源管理、静态网站开发、UI 设计对接。

Path Intellisense

Visual Studio Code plugin that autocompletes filenames

功能简介：文件路径自动补全。
核心功能：

  • 输入路径时提示当前目录下的文件与文件夹。
  • 支持相对路径与绝对路径补全。
  • 减少手动输入错误，提升代码可维护性。

适用场景：模块化开发、多文件项目管理。

CodeSnap

Take beautiful screenshots of your code

功能简介：生成高亮代码截图。
核心功能：

  • 自定义截图背景、阴影、边距等样式。
  • 支持复制图片到剪贴板或保存为 PNG/SVG。
  • 可选行号显示与语法高亮主题。

适用场景：技术文档编写、社交媒体分享、代码教学。

Excalidraw

Draw diagrams and sketches in your editor

功能简介：手绘风格图表绘制工具。
核心功能：

  • 内置手绘图形、箭头、便签等元素。
  • 支持导出为 PNG/SVG 或保存为 .excalidraw 文件。
  • 实时协作功能（需搭配在线服务）。

适用场景：草图设计、流程图绘制、会议笔记。

引用站外链接
Excalidraw
在线网站

Draw.io

Draw diagrams and sketches in your editor

功能简介：专业图表与流程图设计工具。
核心功能：

  • 集成 Draw.io 的完整功能，支持 UML、网络拓扑图等复杂图表。
  • 提供海量模板与图标库。
  • 直接保存图表为 .drawio 或导出为图片/PDF。

适用场景：技术架构设计、数据库建模、流程文档化。

引用站外链接
Draw.io
在线网站

GitHub copilot

AI pair programmer

功能简介：AI 驱动的代码自动补全工具。
核心功能：

  • 基于上下文生成单行、多行甚至完整函数代码。
  • 支持 Python、JavaScript、Go 等主流语言。
  • 通过学习开源代码库提供符合习惯的代码建议。

适用场景：快速原型开发、学习新语言、减少重复编码。