先来看看我的vscode里装了那些插件吧,史上最全前端插件安装来啦~

1.别名路径跳转

别名路径跳转插件，支持任何项目，可以自由配置映射规则，自由配置可缺省后缀名列表

使用方法：鼠标移动到路径上，按住ctrl并单击就会跳转

2.豆包应用共享插件

需要配合豆包电脑版一起使用，安装本插件后在使用豆包电脑版时可以将 VS Code 中打开的代码文件等上下文信息共享给豆包，豆包将根据共享的内容更智能的回答你的问题。

3.Remote Explorer
它是 VS Code 实现远程开发的基础入口，让你能在本地编辑器里无缝操作远端服务器，是后端开发、云开发、服务器运维的高频工具。

4.any-rule

正则表达式大全

使用方法1：按F1(mac下fn+F1)打开正则列表. 然后搜索

使用方法2：右键选择"🦕正则大全".

使用方法3：在代码任意位置输入"@zz".

5.Auto Import

专门针对 TypeScript / TSX 项目的自动化导入插件，核心作用是帮你自动处理模块导入

比如：写 React 组件时，输入 <Button> 后自动补全并导入 import { Button } from '@mui/material'

6.Auto Rename Tag

专门用来自动同步修改配对的 HTML/XML 标签

重构 HTML 结构时，避免手动修改结束标签导致的拼写错误或遗漏。

处理复杂嵌套标签时，减少重复操作，提升编码效率。

7.Autoprefixer

• 解析 CSS 代码：扫描你的 CSS 文件，识别需要兼容不同浏览器的 CSS 属性。
• 自动添加厂商前缀：根据 Can I Use 数据，自动为属性添加 -webkit-、-moz-、-ms-、-o- 等前缀，确保样式在不同浏览器（Chrome、Firefox、Edge、Safari 等）中正常显示。
• 保持代码简洁：你只需编写标准 CSS，插件会在后台自动处理兼容性问题，无需手动编写冗余前缀

比如：

你写

.example { display: flex; }；

插件会自动处理为

.example { display: -webkit-box; display: -ms-flexbox; display: flex; }

8.Ayu

一款高人气的视觉主题插件，主打简洁明快的色彩搭配，为长时间编码提供舒适的视觉体验。

9.Beautify css/sass/scss/less

专门针对 CSS 预处理器 的代码格式化工具，核心作用是美化和规范化样式代码

• 整理从网上复制的混乱样式代码，快速恢复可读性。
• 多人协作开发时，统一团队的 CSS 代码风格，避免格式差异。
• 编写 Sass/SCSS 嵌套结构时，自动对齐层级，减少手动调整。

10.Chinese (Simplified) (简体中文)

11.chtml代码变量命名工具

自动化代码变量命名辅助工具，核心作用是帮你规范、生成符合约定的变量名

• 写 HTML/CSS/JS 时，快速生成语义化的 class 名、id 名或变量名。
• 多人协作开发时，统一团队的命名规范，减少因命名风格不一致导致的沟通成本。
• 重构代码时，快速替换不规范的变量名，让代码更整洁易维护。

12.Color Highlight

颜色可视化工具

• 编写样式代码时，快速对比多个颜色值，选择最适合的配色。
• 调试页面样式时，直接在编辑器中定位颜色问题，提升排查效率。
• 团队协作开发时，让颜色代码更直观，减少沟通误解。

13.console helper

快速生成 console.log 调试代码的辅助工具，这个插件需要配置

• 调试 JavaScript/TypeScript 代码时，快速打印变量值、函数返回结果。
• 开发 React/Vue 组件时，快速输出 props、state 等数据，辅助排查渲染问题。
• 清理调试代码时，可配合其他插件一键删除所有 console.log 语句。

14.Custom CSS and JS Loader

自定义界面的插件，允许你通过自定义 CSS 和 JavaScript 来修改编辑器的外观和行为。

• 美化 VS Code 界面：调整主题细节、隐藏不常用的 UI 元素、优化字体显示。
• 实现个性化功能：比如添加自定义快捷键、自动执行脚本、增强编辑器交互。
• 修复界面显示问题：通过 CSS 覆盖默认样式，解决某些插件或主题的显示 bug。

💡 小提示

这是一个进阶定制工具，需要一定的前端基础。你可以在网上找到大量现成的自定义 CSS 片段，直接复制使用来快速美化界面。

15.Debugger for Firefox

这是 VS Code 中由 Firefox 官方开发的前端调试插件，让你可以直接在编辑器内调试运行在 Firefox 浏览器中的网页或浏览器扩展。

• 无缝调试体验：在 VS Code 中直接连接到 Firefox 浏览器，像调试本地代码一样调试网页和扩展，无需切换到浏览器开发者工具。
• 完整调试能力：支持断点、单步执行、变量监视、调用栈查看等标准调试功能，可精准定位 JavaScript 代码问题。
• 扩展调试支持：专门适配 Firefox 浏览器扩展的开发调试流程，方便调试扩展的后台脚本、内容脚本等。
• 实时预览：代码修改后可在 Firefox 中实时刷新，快速验证调试结果。

16.Git History

Git 版本管理可视化工具

• 排查线上 Bug 时，追溯问题代码的引入时间和提交人。
• 代码合并前，对比分支差异，确保合并内容准确。
• 回顾项目开发历程，了解功能迭代的时间线和逻辑变更。

17.GitHub Copilot Chat

GitHub 官方推出的 AI 辅助编程聊天插件

• 快速实现某个功能，直接向 AI 询问实现思路和代码示例。
• 调试报错时，粘贴错误信息让 AI 协助定位根因。
• 学习新框架或 API 时，在开发过程中实时获取答疑。
• 代码重构时，让 AI 提供优化建议，提升代码质量。

18.GitLens — Git supercharged

Git 增强工具，能让你在编辑器内深度挖掘和可视化 Git 仓库的所有信息。

• 排查 Bug 时，快速定位是谁在何时修改了问题代码。
• 代码审查时，清晰查看每一处变更的历史和原因。
• 了解项目演进，回顾功能开发的完整时间线。
• 团队协作中，明确代码归属，避免重复工作或冲突。

19.Headwind

专门为 Tailwind CSS 打造的自动化类名排序工具，用于规范和统一 Tailwind 类名的书写顺序

• 多人协作开发 Tailwind 项目时，统一类名顺序，提升代码可读性和可维护性。
• 避免手动调整类名顺序的繁琐，让开发者专注于样式实现而非格式整理。
• 配合 Prettier 等格式化工具，形成完整的代码风格规范。

20.HTML CSS Support

为 HTML 提供 CSS 智能提示 的辅助工具，专门增强 HTML 文件中 CSS 相关的开发体验

• 编写 HTML 时，快速复用已定义的 CSS 类，避免手动拼写错误。
• 维护老旧项目时，快速定位类名对应的 CSS 代码，提升排查效率。
• 配合纯 HTML/CSS 项目开发，减少切换文件的次数，专注于页面结构与样式。

💡 小提示

它是 VS Code 内置 HTML/CSS 功能的增强版，特别适合不使用框架（如 React/Vue）的传统前端开发场景。

21.Iconify IntelliSense

Iconify 图标库 提供智能预览和搜索的辅助工具，让你在开发时更直观地选择和使用图标。

• 开发页面时，快速选择并预览 Iconify 图标，确保视觉效果符合设计预期。
• 团队协作中，统一使用 Iconify 图标库，避免图标风格混乱。
• 重构代码时，快速替换或调整图标，提升页面美观度。

22.Image preview

图片实时预览工具

• 开发页面时，快速确认代码中引用的图片是否正确，避免路径错误或图片选错。
• 维护项目时，快速识别图片资源，方便替换或优化图片。
• 查看 SVG 图标时，直接在编辑器内预览效果，无需打开浏览器。

23.indent-rainbow

代码缩进可视化工具，通过为不同层级的缩进分配不同颜色，帮助开发者快速识别代码层级结构。

• 彩色缩进区分：将代码的缩进层级以不同颜色显示（如深浅不一的灰色、蓝色等），视觉上清晰区分嵌套关系。
• 提升可读性：在编写嵌套代码（如 JS 循环、条件判断、HTML 结构）时，快速定位代码块的起始与结束，减少层级混淆。
• 轻量无干扰：仅改变缩进的视觉样式，不影响代码本身的逻辑和执行，适配绝大多数编程语言

24.IntelliSense for CSS class names in HTML

HTML 标签的 class 属性 提供智能补全的工具，基于工作区中定义的 CSS 类名实现自动提示。

• 编写传统 HTML/CSS 项目时，快速复用已定义的工具类、组件类，无需手动记忆或复制类名。
• 维护老旧项目时，快速查找和使用历史类名，避免重复定义或样式冲突。
• 配合 Bootstrap、Tailwind 等 CSS 框架，高效调用框架提供的预设类名。

25.JavaScript (ES6) code snippets

为 JavaScript ES6+ 语法 提供的代码片段库，通过输入简短前缀快速生成常用代码模板。

• ES6+ 语法片段：内置大量 ES6 及后续版本的常用代码模板，比如箭头函数、Promise、async/await、类、模块导入导出等。
• 高效输入：通过输入短前缀（如 imp → import、clg → console.log）一键展开完整代码，减少重复打字。
• 覆盖高频场景：包含变量声明、函数、循环、事件处理、DOM 操作、Promise 链式调用等日常开发场景。
• 多框架兼容：同时支持纯 JS、Node.js、React、Vue 等项目环境，适配不同开发需求。

26.json2ts

专门用于 将 JSON 自动转换为 TypeScript 接口（interface） 的工具，极大简化了 TypeScript 项目中类型定义的工作。

• 对接后端 API 时，根据返回的 JSON 数据快速生成 TypeScript 类型定义，避免手动编写接口的繁琐。
• 处理本地 JSON 配置文件，为其生成类型约束，提升代码的类型安全性。
• 学习 TypeScript 时，通过转换示例 JSON 理解接口与数据结构的对应关系。

27.koroFileHeader

自动化文件头部注释与函数注释生成工具，专为规范代码文档设计，支持几乎所有主流编程语言。

• 文件头部注释：一键生成包含作者、创建时间、最后修改人、最后修改时间等信息的文件头注释，可自定义模板。
• 函数 / 方法注释：自动识别函数参数、返回值，生成规范的 JSDoc/TSDoc 风格注释。
• 多语言支持：兼容 JavaScript、TypeScript、Python、Java、C++、Go 等主流开发语言，自动适配不同语言的注释语法。
• 高度可配置：可自定义注释模板、作者信息、时间格式等，满足团队或个人的文档规范要求。
• 便捷快捷键：
  • Ctrl+Alt+I：生成文件头部注释
  • Ctrl+Alt+T：生成函数注释

28.Live Server

这是 VS Code 中一款本地开发服务器工具，核心价值是为静态 / 动态页面提供 热重载（Live Reload）能力，让前端开发体验更流畅。

• 纯前端开发（HTML/CSS/JS）：快速预览页面效果，避免频繁手动刷新浏览器。
• 移动端调试：在手机上实时查看页面在不同设备下的展示效果，调试响应式布局。
• 静态站点开发：配合 Hugo、Jekyll 等静态站点生成器，预览构建前的页面。
• 学习前端：新手练习代码时，即时看到修改效果，提升学习效率。

💡 便捷操作

• 启动服务器：右键 HTML 文件 → Open with Live Server，或点击 VS Code 右下角的 Go Live。
• 停止服务器：再次点击状态栏的 Port: 5500 即可关闭。
• 访问页面：服务器启动后，浏览器会自动打开 http://127.0.0.1:5500/你的文件名.html。

29.Local History

本地文件历史记录工具，它会自动保存文件的修改历史，让你随时可以回溯、对比或恢复到之前的版本。

• 误删 / 误改恢复：不小心删除了代码或改坏了文件，可快速恢复到之前的正常版本。
• 未提交代码回溯：在 Git 提交前，需要对比或恢复到更早的修改版本。
• 临时实验对比：尝试不同代码实现时，可通过历史版本对比效果，选择最优方案。
• 脱离 Git 的项目：在没有 Git 管理的小型项目或脚本文件中，提供基础的版本保护。

30.Material Icon Theme

图标主题插件

• 丰富图标库：支持上千种文件 / 文件夹类型，包括编程语言（JS/TS/Java/Python 等）、框架（React/Vue/Angular）、配置文件（JSON/XML/YAML）、资源文件（图片 / 字体 / 字体）等，几乎覆盖所有开发场景。
• Material Design 风格：图标采用简洁、现代的 Material Design 风格，色彩鲜明，辨识度高，让侧边栏文件结构一目了然。
• 文件夹图标：为不同用途的文件夹（如 src/、components/、node_modules/、tests/）提供专属图标，快速识别项目结构。
• 高度可定制：支持自定义图标、颜色、文件夹关联规则，可根据个人或团队习惯调整显示效果。

31.Material Product Icons

一款产品级 Material Design 图标主题，专门为编辑器界面（如侧边栏、活动栏、状态栏等）提供统一、现代的图标风格。

• Material Design 风格：遵循 Google Material Design 设计规范，图标简洁、圆润、色彩鲜明，让编辑器界面更美观统一。
• 全界面覆盖：不仅替换文件 / 文件夹图标，还覆盖活动栏（如搜索、源码控制、扩展等）、侧边栏、状态栏等所有 UI 元素的图标。
• 高辨识度：图标设计直观易懂，能快速识别不同功能入口，提升操作效率。
• 与 Material Icon Theme 互补：常和 Material Icon Theme 搭配使用，前者美化编辑器界面图标，后者美化文件 / 文件夹图标，实现完整的 Material 风格。

32.Minify

代码压缩工具

• 前端项目构建：在部署前压缩静态资源，减少网络传输体积，提升页面加载性能。
• 小型项目开发：无需配置复杂的构建工具（如 Webpack、Vite），直接在 VS Code 中完成代码压缩。
• 静态页面优化：对纯 HTML/CSS/JS 页面进行压缩，适配轻量化部署需求。

33.Move TS - Move TypeScript files and update relative imports

这是 VS Code 中专门为 TypeScript/JavaScript 项目 设计的文件移动工具，核心价值是在移动文件 / 文件夹时，自动更新所有相关的相对导入路径，避免手动修改导致的路径错误。

• 重构项目结构：调整文件夹层级、拆分模块时，无需手动修改大量导入路径。
• 避免路径错误：手动修改导入路径容易遗漏或写错，插件能确保所有引用都被正确更新。
• 提升重构效率：大型项目中重构代码结构时，大幅减少手动修改导入的工作量，降低出错概率。

34.open in browser

快速打开文件到浏览器的工具

• 预览静态 HTML：编写纯 HTML/CSS/JS 页面时，快速在浏览器中查看效果。
• 查看 Markdown 渲染：将 .md 文件在浏览器中打开，查看渲染后的排版效果。
• 预览图片 / PDF：直接在浏览器中打开项目内的图片、PDF 等资源文件。
• 轻量化开发：在没有配置 Live Server 等工具时，快速预览静态资源。

💡 便捷操作

• 右键文件 → Open in Default Browser / Open in Other Browsers。
• 快捷键：Alt + B（Windows）/ Option + B（Mac）快速在默认浏览器打开

35.Path Autocomplete

路径自动补全工具

• 模块导入：在 JS/TS 中输入 import {} from './' 时，自动提示同级目录下的文件 / 模块。
• 资源引用：在 HTML 中输入 <img src="./" 或 CSS 中输入 background: url('./') 时，快速定位图片、字体等资源。
• 路径别名补全：配合项目配置（如 Webpack/Vite alias），自动补全 @/utils 等自定义路径

36.Path Intellisense

文件名 / 路径自动补全插件

• 模块导入：在 JS/TS 中输入 import {} from './' 时，快速选择要导入的文件 / 模块。
• 资源引用：在 HTML 中输入 <img src="./" 或 CSS 中输入 background: url('./') 时，定位图片、字体等资源。
• 配置文件引用：在 package.json、tsconfig.json 等配置文件中快速引用其他配置文件。
• 避免路径错误：减少手动输入路径时的拼写错误或层级错误。

37.Pinia Snippets

这是 VS Code 中为 Pinia（Vue 状态管理库） 提供的代码片段工具，通过输入简短前缀快速生成 Pinia 相关代码模板，提升 Vue 项目开发效率。

• 快速创建 Store：在 Vue 3 + Pinia 项目中，一键生成 Store 文件的基础结构，无需手动编写 defineStore 模板
• 规范代码风格：统一团队中 Pinia 代码的写法，避免因手写导致的格式差异
• 学习 Pinia：新手通过片段快速熟悉 Pinia 的 API 结构，降低学习成本

38.Prettier - Code formatter

代码格式化工具

• 个人开发：保持自己代码风格统一，提升代码可读性。
• 团队协作：统一团队代码格式，减少 Code Review 中因格式问题产生的讨论。
• 开源项目：让项目代码风格保持专业、一致，便于其他开发者贡献。
• 学习阶段：帮助新手养成良好的代码排版习惯。

💡 便捷操作

• 手动格式化：右键文件 → Format Document，或快捷键 Ctrl+Shift+I（Windows）/ Cmd+Shift+I（Mac）。
• 自动格式化：在 VS Code 设置中开启 editor.formatOnSave，保存文件时自动格式化。

39.Regex Previewer

正则表达式实时预览工具

• 实时预览匹配：在编辑器中输入正则表达式时，自动在侧边面板预览匹配到的文本片段，高亮显示匹配组。
• 多语言支持：完美适配 JavaScript、TypeScript、PHP 和 Haxe 的正则语法。
• 可视化分组：清晰标注正则中的捕获组（Group 1、Group 2...），方便调试复杂正则。
• 上下文感知：自动识别当前文件中的正则表达式，无需额外配置即可预览。

40.Remote - SSH

微软官方出品的 远程开发核心插件

• 远程文件夹打开：直接打开远程机器上的任意文件夹，像操作本地文件一样编辑、查看。
• 完整 VS Code 功能：支持代码补全、调试、终端、Git 等所有本地功能，无需在远程机器安装额外工具。
• 安全连接：基于 SSH 协议，支持密码、密钥等多种认证方式，保障连接安全。
• 多平台兼容：可连接 Linux、macOS、Windows（需配置 SSH 服务）等几乎所有支持 SSH 的系统。
• 容器 / 云环境适配：常与 WSL、Docker、云服务器等环境配合使用，是云原生开发的必备工具。

41.Remote - SSH: Editing Configuration Files

微软官方出品的 SSH 配置文件编辑辅助插件，是 Remote - SSH 插件的配套工具，专门用于简化 SSH 配置文件（~/.ssh/config）的编辑与管理。

• 配置文件语法高亮：为 SSH 配置文件提供语法高亮、智能提示和自动补全，让配置更易读、易写。
• 智能提示：输入 Host、HostName、User、IdentityFile 等关键字时自动提示，避免拼写错误。
• 快速导航：支持在多个 Host 配置之间快速跳转，方便管理大量远程连接。
• 验证与诊断：实时检查配置语法错误，提示不规范的写法，帮助排查连接问题。
• 无缝配合 Remote - SSH：编辑后的配置会直接被 Remote - SSH 插件识别，无需手动刷新

42.Sass (.sass only)

这是 VS Code 中专门针对 缩进式 Sass（.sass 文件，非 .scss） 提供语法支持的插件，为缩进式 Sass 提供完整的编辑体验。

• 缩进式语法高亮：完美识别 .sass 的缩进语法（无大括号、分号），对变量、混合宏、嵌套规则等进行高亮区分。
• 智能自动补全：自动提示 Sass 变量、混合宏（@mixin）、函数（@function）、CSS 属性等。
• 代码格式化：支持一键格式化 .sass 文件，自动调整缩进、对齐，保持代码风格统一。
• 语法诊断：实时检查缩进错误、语法问题，帮助快速定位 bug。

⚠️ 注意：此插件仅支持 .sass 格式（缩进式），不支持 .scss 格式（大括号式）。

43.Stylelint

这是 Stylelint 官方为 VS Code 提供的样式代码检查插件，专门用于规范 CSS、SCSS、Sass、Less 等样式文件的代码质量与风格。

• 团队协作：统一团队样式代码风格，避免因格式差异导致的代码冲突。
• 项目规范：在大型项目中强制执行样式规范，提升代码可维护性。
• 个人开发：帮助开发者养成良好的编码习惯，减少样式 bug。
• 开源项目：让项目代码风格保持专业、一致，便于社区贡献。

44.svn

这是 VS Code 中集成 Subversion（SVN） 版本控制的插件，让你在编辑器内直接管理 SVN 仓库，无需切换到命令行。

• 完整 SVN 操作：支持 checkout（检出）、update（更新）、commit（提交）、add（新增）、delete（删除）、revert（回滚）等核心 SVN 命令。
• 可视化状态：在资源管理器中直观显示文件状态（修改、新增、冲突等），并在编辑器侧边栏查看变更对比。
• 冲突解决：提供可视化界面处理 SVN 代码冲突，支持与 Git 类似的冲突编辑体验。
• 历史查看：查看文件 / 文件夹的提交历史、版本对比，快速追溯代码变更。
• 无缝集成：与 VS Code 源代码管理面板深度整合，操作习惯与 Git 插件一致，降低学习成本。

45.TypeScript Extension Pack

这是一个 TypeScript 插件合集包，将开发 TypeScript 最常用、最实用的 VS Code 插件打包在一起，一键安装即可获得完整的 TS 开发环境。

• 新手入门：刚接触 TypeScript 的开发者，快速搭建专业开发环境，避免踩坑。
• 新项目初始化：启动新的 TS/React/Vue 项目时，一键安装所有必备插件，提升效率。
• 团队标准化：推荐团队成员统一安装此包，确保开发工具链一致，减少配置差异。

46.TypeScript Importer

这是一款专门为 TypeScript 设计的 自动导入与代码补全插件，能自动扫描工作区中的 TS 类型定义和符号，在你输入时提供智能补全，并自动生成 import 语句。

• 自动符号补全：在输入变量、函数、类、接口等符号时，自动从整个工作区中搜索匹配项，无需手动记忆路径。
• 一键自动导入：选择补全项后，自动在文件顶部生成对应的 import 语句，支持默认导入、命名导入等多种导入形式。
• 类型定义感知：深度识别 .d.ts 类型定义文件，对第三方库的类型也能提供完整补全。
• 智能排序：根据使用频率和上下文相关性对补全结果排序，优先展示最可能需要的符号。