每天在 VS Code 里敲代码的你，真的把这个编辑器的潜力发挥到极致了吗？同样的工作，为什么别人的开发速度总是比你快？答案可能就在这些插件里。今天，我整理了 16 款亲测好用的 VS Code 插件，涵盖代码编辑、版本控制、智能提示等多个维度，帮你从"普通开发者"进化为"高效战士"！

📋 目录

• 为什么需要安装插件？
• 一、代码编辑与格式化类
• 二、代码片段与智能提示类
• 三、Git 版本控制类
• 四、开发工具与预览类
• 五、辅助工具类
• 安装方式
• 总结

为什么需要安装插件？

VS Code 本身已经非常强大，但它的真正魅力在于插件生态系统。通过安装合适的插件，你可以：

一、代码编辑与格式化类

1. 🎨 EditorConfig for VS Code

作用：统一不同编辑器和操作系统的代码风格（缩进、换行符等）。 使用场景： 团队协作时，有人用 Windows 有人用 Mac，有人喜欢 Tab 缩进有人喜欢空格，导致代码风格混乱。EditorConfig 让所有人遵循同一套规则。 核心配置： 在项目根目录创建 .editorconfig 文件：

root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

💡 安装后自动生效，无需额外配置。

2. ✨ Prettier - Code formatter

作用：一键美化代码，统一格式（单双引号、分号、缩进等）。 使用场景： 写完代码后，格式乱糟糟？一键 Shift + Alt + F（Windows）或 Shift + Option + F（Mac），瞬间变整齐。 核心优势：

• 支持 JavaScript、TypeScript、CSS、SCSS、JSON 等多种语言
• 可保存时自动格式化
• 团队风格统一，消灭"格式圣战" 配置示例（ .prettierrc）：

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "semi": true,
  "trailingComma": "es5"
}

3. 🔍 ESLint

作用：JavaScript/TypeScript 代码质量检查，发现潜在错误。 使用场景：

• 忘记声明变量
• 使用了未定义的函数
• React Hooks 使用违规
• 不建议的语法写法 功能亮点：
• 实时在代码中显示错误和警告
• 提供自动修复建议
• 支持 React、Vue、TypeScript 等框架

⚠️ 建议配合 Prettier 使用：ESLint 管质量，Prettier 管颜值。

4. 🎭 Stylelint

作用：CSS/SCSS/Less 样式代码检查与自动修复。 使用场景：

• CSS 冗余代码（重复定义）
• 颜色格式不统一
• 选择器写法不规范
• SCSS 语法错误 配置示例（ .stylelintrc.json）：

{
  "extends": ["stylelint-config-standard"],
  "rules": {
    "selector-class-pattern": null
  }
}

5. 🌈 indent-rainbow

作用：让缩进层级显示为彩色，像彩虹一样。 使用场景：

• 长嵌套代码快速识别层级
• 避免缩进错误（多空格或少空格）
• 代码阅读更愉悦 效果预览：

function example() {
  if (true) {        // 红色缩进
    const arr = [   // 绿色缩进
      1,             // 蓝色缩进
      2,
      3
    ];
  }
}

🎯 小技巧：适合初学者识别代码块边界，老手可选择性安装。

二、代码片段与智能提示类

6. ⚡ ES7+ React/Redux/React-Native snippets

作用：提供 React 常用代码片段的快速输入。 使用场景： 再也不用每次手写 useEffect、useCallback、React.memo 的完整模板，输入简写自动展开。 常用触发词：

// 输入 rafce + Tab，自动展开：
import React from 'react'
const MyComponent = () => {
  return (
    <div>rafce</div>
  )
}
export default MyComponent

7. 🎯 Tailwind CSS IntelliSense

作用：Tailwind CSS 类名智能提示、悬停预览、自动补全。 使用场景：

• 不记得某个工具类名怎么写
• 想知道某个类名的具体样式
• 防止拼写错误（如 bg-red500 写成 bg-red-500） 核心功能：
• ✅ 实时类名补全
• ✅ Hover 显示具体样式值
• ✅ Lint 提示未知类名
• ✅ 支持自定义配置文件读取

💡 Tailwind 开发者的必备神器，效率提升 50%+！

8. 💚 Vue (Official)

作用：Vue 官方插件，提供语法高亮、智能提示、代码片段。 使用场景：

• Vue 2/3 项目开发必备
• .vue 文件语法高亮
• Vue 指令自动补全
• Props、Emits 类型提示 支持特性：
• ✅ 单文件组件（SFC）完整支持
• ✅ TypeScript 支持
• ✅ Pinia 状态库集成
• ✅ Vite 模块智能解析

三、Git 版本控制类

9. 🔬 GitLens — Git supercharged

作用：VS Code 中最强大的 Git 增强插件。 核心功能：

• 按 Ctrl + Shift + G 打开 Git 面板
• 点击代码行左侧的 Git 图标查看作者
• 使用 "GitLens: Toggle File Blame" 查看整个文件的 blame

🏆 被称为 Git 必装插件，强烈推荐！

10. 📊 Git Graph

作用：以可视化图形展示 Git 提交历史和分支关系。 使用场景：

• 直观查看分支合并情况
• 快速切换分支
• 查看 tag 标签
• 找到某个 commit 的父节点 功能亮点：
• 🌳 树状图展示提交历史
• 🏷️ 显示标签（Tags）
• 🔀 显示远程分支
• ⬇️ 支持 fetch/pull/push 操作

💡 按 Ctrl + Shift + G 打开 Git 面板，点击 "Git Graph" 查看图形。

11. 📜 Git History

作用：查看文件或目录的 Git 历史记录。 核心功能：

• 查看某个文件的所有提交历史
• 比较两个版本的差异
• 恢复文件到某个历史版本
• 搜索特定提交 使用方式：

1. 右键点击文件
2. 选择 "Git: View File History"
3. 点击某个 commit 查看详细变更
4. 点击 "Open File" 可查看历史版本

四、开发工具与预览类

12. 🌐 Live Server

作用：启动本地开发服务器，支持热更新。 使用场景：

• HTML/CSS/JavaScript 原型开发
• 静态页面实时预览
• 修改代码后浏览器自动刷新 核心优势：
• ✅ 一键启动服务器
• ✅ 支持实时热更新
• ✅ 支持跨域请求
• ✅ 可自定义端口号 使用方式：

1. 右键点击 index.html
2. 选择 "Open with Live Server"
3. 浏览器自动打开 http://127.0.0.1:5500/

⚡ 前端开发必备，告别手动刷新！

13. 🚀 open in browser

作用：一键在浏览器中打开当前 HTML 文件。 使用场景：

• 快速预览静态页面
• 支持 Chrome、Firefox、Edge 等多浏览器
• 无需启动服务器 快捷键： | 操作 | Windows/Linux | Mac | |:---|:---|:---| | 在默认浏览器打开 | Ctrl + B | Cmd + B |

14. 🖼️ Svg Preview

作用：实时预览 SVG 图片，支持代码与视图同步。 使用场景：

• SVG 图标调试
• 查看路径、坐标、颜色
• 实时修改代码预览效果 核心功能：
• ✅ 分屏显示：左侧代码，右侧预览
• ✅ 支持拖拽 SVG 文件直接预览
• ✅ 显示 SVG 的尺寸、路径信息
• ✅ 支持动画预览

五、辅助工具类

15. 🔖 Bookmarks

作用：在代码中设置书签，快速跳转到重要位置。 使用场景：

• 跨多个文件快速定位
• 记住某个函数的位置
• 大文件中标记关键段落 快捷键： | 操作 | 快捷键 | |:---|:---| | 切换书签 | Ctrl + Alt + K | | 跳转到上一个书签 | Ctrl + Alt + J | | 跳转到下一个书签 | Ctrl + Alt + L | | 清除所有书签 | Ctrl + Shift + K | 效果展示：

// 🔖 书签标记在函数名前
function importantFunction() {
  // 这是一个重要函数，需要频繁查看
  console.log('Hello');
}
// 🔖 另一个书签
function anotherFunction() {
  // ...
}

💡 适合调试大项目时记录关键位置！

16. ✅ Code Spell Checker

作用：检查代码中的拼写错误，避免因单词写错导致的 Bug。 使用场景：

• 变量名拼写错误（ consoel.log → console.log）
• 注释中的英文拼写错误
• 防止复制粘贴引入的错别字 核心功能：
• ✅ 实时拼写检查
• ✅ 支持驼峰命名识别
• ✅ 可添加自定义字典
• ✅ 支持多种语言 配置示例（添加自定义词汇）：

"cSpell.words": [
  "react",
  "tailwindcss",
  "github"
]

🎯 特别适合非英语母语开发者，减少低级拼写错误！

17. 🎨 Icon Theme: Material

作用：为文件和文件夹提供精美的 Material Design 风格图标。 视觉提升：

• ✅ 一眼识别文件类型
• ✅ 文件夹颜色区分（src、dist、node_modules）
• ✅ 提升视觉愉悦度
• ✅ 支持自定义图标主题

🌈 强烈推荐安装，让编辑器颜值提升一个档次！

安装方式

方法一：通过扩展商店安装（推荐）

1. 打开 VS Code
2. 按 Ctrl + Shift + X（Mac： Cmd + Shift + X）打开扩展面板
3. 在搜索框中输入插件名称
4. 点击 "Install" 安装

方法二：命令面板安装

1. 按 Ctrl + Shift + P（Mac： Cmd + Shift + P）
2. 输入 Extensions: Install Extensions
3. 搜索并安装

方法三：通过 setting.json 自动格式化配置

在项目根目录中先创建.vscode目录，然后在.vscode目录中创建一个setting.json文件，配置自动格式化规则。

{
  "editor.fontSize": 12,
  "editor.tabSize": 2,
  "eslint.enable": true,
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "eslint.validate": [
    "vue",
    "html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ],
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.requireConfig": true,
  "prettier.semi": false,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.fixAll.eslint": "explicit",
    "source.fixAll.stylelint": "explicit"
  },
  "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/target": true,
    "**/logs": true
  },
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "stylelint.validate": [
    "css",
    "less",
    "postcss",
    "scss",
    "sass",
    "stylus",
    "vue"
  ],
  "git.autofetch": true,
  "cSpell.userWords": [
    "antd",
    "axios",
    "childs",
    "commitlint",
    "daterange",
    "echarts",
    "graphlib",
    "loadfj",
    "moveend",
    "tailwindcss",
    "vuepress",
    "vuex",
  ],
  "workbench.startupEditor": "none",
  "diffEditor.ignoreTrimWhitespace": false,
  "workbench.iconTheme": "material-icon-theme"
}

方法四：通过 extensions.json 批量安装

在.vscode目录中创建一个 extensions.json 文件，记录团队推荐插件，新成员可一键同步。

{
  "recommendations": [
    // 代码编辑与格式化
    "esbenp.prettier-vscode",          // Prettier - Code formatter
    "dbaeumer.vscode-eslint",          // ESLint
    "stylelint.vscode-stylelint",      // Stylelint
    "EditorConfig.EditorConfig",       // EditorConfig for VS Code
    "oderwat.indent-rainbow",          // indent-rainbow

    // 代码片段与智能提示
    "dsznajder.es7-react-js-snippets", // ES7+ React/Redux/React-Native snippets
    "bradlc.vscode-tailwindcss",       // Tailwind CSS IntelliSense
    "Vue.volar",                       // Vue (Official)

    // Git 版本控制
    "eamodio.gitlens",                 // GitLens — Git supercharged
    "mhutchie.git-graph",              // Git Graph
    "donjayamanne.githistory",         // Git History

    // 开发工具与预览
    "ritwickdey.liveserver",           // Live Server
    "techer.open-in-browser",          // open in browser
    "SimonSiefke.svg-preview",         // Svg Preview

    // 辅助工具
    "alefragnani.bookmarks",           // Bookmarks
    "streetsidesoftware.code-spell-checker", // Code Spell Checker
    "PKief.material-icon-theme"        // Icon Theme: Material
  ]
}

生效方式

团队协作：将 .vscode/extensions.json 和 .vscode/extensions.json 提交到 Git 仓库。 拉取代码：当团队成员 git pull 代码并在 VS Code 打开该项目时，右下角会弹出提示。 一键安装：点击弹窗中的“安装全部”按钮，VS Code 就会自动帮你装好所有插件。

总结

今天介绍的 16 款插件涵盖了前端开发的各个环节：

• 🌟 必装（5款）：ESLint、Prettier、GitLens、Live Server、ES7+ React Snippets
• 🌟 推荐（6款）：EditorConfig、Tailwind CSS IntelliSense、Git Graph、Bookmarks、Code Spell Checker、Icon Theme: Material
• 💡 可选（5款）：Stylelint、indent-rainbow、Vue (Official)、open in browser、Svg Preview（根据技术栈选择）

💡 小贴士：不要一次安装过多插件，根据项目需求逐步添加，避免 VS Code 变得卡顿。

希望这篇教程对你有所帮助！如有问题，欢迎交流讨论。