VSCode 前端开发插件推荐

本文详细介绍前端开发中最实用的 VSCode 插件，包括安装配置、使用技巧和最佳实践。

🎯 核心开发插件

Vue 开发插件

Vue (Official) - Vue 3 官方插件

json

{
  "id": "Vue.volar",
  "name": "Vue - Official",
  "description": "Vue 3 官方语言支持插件"
}

主要功能：

Vue 3 Composition API 支持
TypeScript 集成
模板语法高亮
组件智能提示
单文件组件支持

配置示例：

json

{
  "vue.inlayHints.missingProps": true,
  "vue.inlayHints.optionsWrapper": true,
  "vue.inlayHints.inlineHandlerLeading": true,
  "vue.complete.casing.tags": "kebab",
  "vue.complete.casing.props": "camel"
}

Vetur - Vue 2 支持插件

json

{
  "id": "octref.vetur",
  "name": "Vetur",
  "description": "Vue 2 语言支持插件"
}

注意： Vue 2 项目使用 Vetur，Vue 3 项目使用 Vue (Official)，不要同时启用。

React 开发插件

ES7+ React/Redux/React-Native snippets

json

{
  "id": "dsznajder.es7-react-js-snippets",
  "name": "ES7+ React/Redux/React-Native snippets",
  "description": "React 代码片段集合"
}

常用代码片段：

javascript

// rfc - React Function Component
import React from 'react'

interface Props {
  
}

const ComponentName: React.FC<Props> = () => {
  return (
    <div>
      
    </div>
  )
}

export default ComponentName

// useState - React useState Hook
const [state, setState] = useState(initialState)

// useEffect - React useEffect Hook
useEffect(() => {
  
}, [])

React Extension Pack

json

{
  "id": "jawandarajbir.react-vscode-extension-pack",
  "name": "React Extension Pack",
  "description": "React 开发插件包"
}

包含插件：

ES7+ React/Redux/React-Native snippets
Bracket Pair Colorizer
Auto Rename Tag
Auto Close Tag

🔧 代码质量插件

ESLint - JavaScript 代码检查

json

{
  "id": "dbaeumer.vscode-eslint",
  "name": "ESLint",
  "description": "JavaScript 和 TypeScript 代码检查"
}

配置示例：

json

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ],
  "eslint.format.enable": true,
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "eslint.run": "onType",
  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ]
}

Prettier - 代码格式化

json

{
  "id": "esbenp.prettier-vscode",
  "name": "Prettier - Code formatter",
  "description": "代码格式化工具"
}

配置示例：

json

{
  "prettier.requireConfig": true,
  "prettier.useEditorConfig": false,
  "prettier.documentSelectors": ["**/*.vue"],
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Stylelint - CSS 代码检查

json

{
  "id": "stylelint.vscode-stylelint",
  "name": "Stylelint",
  "description": "CSS/SCSS/Less 代码检查"
}

配置示例：

json

{
  "stylelint.validate": ["css", "scss", "vue", "html", "postcss"],
  "stylelint.snippet": ["css", "scss", "postcss"],
  "css.validate": false,
  "scss.validate": false,
  "less.validate": false
}

EditorConfig - 编辑器配置

json

{
  "id": "editorconfig.editorconfig",
  "name": "EditorConfig for VS Code",
  "description": "统一编辑器配置"
}

.editorconfig 示例：

ini

root = true

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

[*.md]
trim_trailing_whitespace = false

[*.{yml,yaml}]
indent_size = 2

🎨 界面增强插件

Material Icon Theme - 文件图标

json

{
  "id": "pkief.material-icon-theme",
  "name": "Material Icon Theme",
  "description": "Material Design 风格文件图标"
}

配置示例：

json

{
  "workbench.iconTheme": "material-icon-theme",
  "material-icon-theme.folders.associations": {
    "components": "component",
    "utils": "tools",
    "hooks": "custom",
    "stores": "state",
    "types": "typescript",
    "apis": "api",
    "assets": "images",
    "styles": "css"
  },
  "material-icon-theme.files.associations": {
    "*.env.local": "tune",
    "*.env.development": "tune",
    "*.env.production": "tune"
  }
}

One Dark Pro - 主题

json

{
  "id": "zhuangtongfa.material-theme",
  "name": "One Dark Pro",
  "description": "Atom One Dark 主题"
}

Indent Rainbow - 缩进彩虹

json

{
  "id": "oderwat.indent-rainbow",
  "name": "Indent Rainbow",
  "description": "缩进层级彩色显示"
}

配置示例：

json

{
  "indentRainbow.colors": [
    "rgba(255,255,64,0.07)",
    "rgba(127,255,127,0.07)",
    "rgba(255,127,255,0.07)",
    "rgba(79,236,236,0.07)"
  ],
  "indentRainbow.errorColor": "rgba(128,32,32,0.6)",
  "indentRainbow.tabmixColor": "rgba(128,32,96,0.6)"
}

Color Highlight - 颜色高亮

json

{
  "id": "naumovs.color-highlight",
  "name": "Color Highlight",
  "description": "CSS 颜色值高亮显示"
}

🔗 Git 集成插件

GitLens - Git 增强

json

{
  "id": "eamodio.gitlens",
  "name": "GitLens — Git supercharged",
  "description": "Git 功能增强"
}

主要功能：

行内 Git blame 信息
文件历史查看
分支比较
提交历史可视化

配置示例：

json

{
  "gitlens.blame.compact": false,
  "gitlens.blame.format": "${message|50?} ${agoOrDate|14-}",
  "gitlens.defaultDateFormat": "MMMM Do, YYYY h:mma",
  "gitlens.hovers.currentLine.over": "line",
  "gitlens.statusBar.enabled": true,
  "gitlens.codeLens.enabled": false
}

Git Graph - Git 图形化

json

{
  "id": "mhutchie.git-graph",
  "name": "Git Graph",
  "description": "Git 提交图形化显示"
}

GitHub Pull Requests - GitHub 集成

json

{
  "id": "github.vscode-pull-request-github",
  "name": "GitHub Pull Requests and Issues",
  "description": "GitHub PR 和 Issue 管理"
}

🚀 开发辅助插件

Auto Rename Tag - 自动重命名标签

json

{
  "id": "formulahendry.auto-rename-tag",
  "name": "Auto Rename Tag",
  "description": "自动重命名配对的 HTML/XML 标签"
}

Auto Close Tag - 自动闭合标签

json

{
  "id": "formulahendry.auto-close-tag",
  "name": "Auto Close Tag",
  "description": "自动闭合 HTML/XML 标签"
}

Path Intellisense - 路径智能提示

json

{
  "id": "christian-kohler.path-intellisense",
  "name": "Path Intellisense",
  "description": "文件路径自动补全"
}

配置示例：

json

{
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src",
    "~": "${workspaceRoot}",
    "components": "${workspaceRoot}/src/components"
  }
}

Tailwind CSS IntelliSense - Tailwind 支持

json

{
  "id": "bradlc.vscode-tailwindcss",
  "name": "Tailwind CSS IntelliSense",
  "description": "Tailwind CSS 智能提示"
}

配置示例：

json

{
  "tailwindCSS.includeLanguages": {
    "vue": "html",
    "vue-html": "html"
  },
  "tailwindCSS.experimental.classRegex": [
    "class:\\s*?[\"'`]([^\"'`]*).*?[\"'`]",
    "className:\\s*?[\"'`]([^\"'`]*).*?[\"'`]"
  ]
}

🧪 测试和调试插件

Jest - 测试支持

json

{
  "id": "orta.vscode-jest",
  "name": "Jest",
  "description": "Jest 测试框架支持"
}

Live Server - 本地服务器

json

{
  "id": "ritwickdey.liveserver",
  "name": "Live Server",
  "description": "本地开发服务器"
}

REST Client - API 测试

json

{
  "id": "humao.rest-client",
  "name": "REST Client",
  "description": "HTTP 请求测试工具"
}

使用示例：

http

### 获取用户信息
GET https://api.example.com/users/1
Content-Type: application/json

### 创建用户
POST https://api.example.com/users
Content-Type: application/json

{
  "name": "John Doe",
  "email": "john@example.com"
}

📝 文档和注释插件

Better Comments - 增强注释

json

{
  "id": "aaron-bond.better-comments",
  "name": "Better Comments",
  "description": "彩色注释增强"
}

注释类型：

javascript

// ! 重要提醒
// ? 疑问注释
// TODO: 待办事项
// * 重点说明
// // 删除的代码

Document This - 自动文档

json

{
  "id": "oouo-diogo-perdigao.docthis",
  "name": "Document This",
  "description": "自动生成 JSDoc 注释"
}

Markdown All in One - Markdown 支持

json

{
  "id": "yzhang.markdown-all-in-one",
  "name": "Markdown All in One",
  "description": "Markdown 编辑增强"
}

🔧 工具类插件

Bracket Pair Colorizer 2 - 括号配对

json

{
  "id": "coenraads.bracket-pair-colorizer-2",
  "name": "Bracket Pair Colorizer 2",
  "description": "括号配对彩色显示"
}

注意： VSCode 1.60+ 版本已内置此功能，可通过以下配置启用：

json

{
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active"
}

Settings Sync - 设置同步

json

{
  "id": "shan.code-settings-sync",
  "name": "Settings Sync",
  "description": "设置和插件同步"
}

注意： VSCode 已内置设置同步功能，建议使用内置功能。

📦 推荐插件包

前端开发基础包

json

{
  "recommendations": [
    "vue.volar",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "stylelint.vscode-stylelint",
    "editorconfig.editorconfig",
    "pkief.material-icon-theme",
    "eamodio.gitlens"
  ]
}

React 开发包

json

{
  "recommendations": [
    "dsznajder.es7-react-js-snippets",
    "ms-vscode.vscode-typescript-next",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "formulahendry.auto-rename-tag",
    "formulahendry.auto-close-tag"
  ]
}

Vue 开发包

json

{
  "recommendations": [
    "vue.volar",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "stylelint.vscode-stylelint",
    "bradlc.vscode-tailwindcss"
  ]
}

💡 插件管理最佳实践

1. 插件选择原则

优先选择官方或知名开发者的插件
避免功能重复的插件
定期清理不使用的插件
关注插件的更新频率和社区活跃度

2. 性能优化

禁用不需要的内置插件
使用工作区推荐插件功能
避免安装过多插件影响性能
定期检查插件的资源占用

3. 团队协作

使用 .vscode/extensions.json 统一团队插件
建立插件使用规范
定期同步和更新插件列表
记录插件配置和使用说明

通过合理选择和配置插件，可以显著提升 VSCode 的开发体验和效率。

VSCode 前端开发插件推荐 ​

🎯 核心开发插件 ​

Vue 开发插件 ​

Vue (Official) - Vue 3 官方插件 ​

Vetur - Vue 2 支持插件 ​

React 开发插件 ​

ES7+ React/Redux/React-Native snippets ​

React Extension Pack ​

🔧 代码质量插件 ​

ESLint - JavaScript 代码检查 ​

Prettier - 代码格式化 ​

Stylelint - CSS 代码检查 ​

EditorConfig - 编辑器配置 ​

🎨 界面增强插件 ​

Material Icon Theme - 文件图标 ​

One Dark Pro - 主题 ​

Indent Rainbow - 缩进彩虹 ​

Color Highlight - 颜色高亮 ​

🔗 Git 集成插件 ​

GitLens - Git 增强 ​

Git Graph - Git 图形化 ​

GitHub Pull Requests - GitHub 集成 ​

🚀 开发辅助插件 ​

Auto Rename Tag - 自动重命名标签 ​

Auto Close Tag - 自动闭合标签 ​

Path Intellisense - 路径智能提示 ​

Tailwind CSS IntelliSense - Tailwind 支持 ​

🧪 测试和调试插件 ​

Jest - 测试支持 ​

Live Server - 本地服务器 ​

REST Client - API 测试 ​

📝 文档和注释插件 ​

Better Comments - 增强注释 ​

Document This - 自动文档 ​

Markdown All in One - Markdown 支持 ​

🔧 工具类插件 ​

Bracket Pair Colorizer 2 - 括号配对 ​

Settings Sync - 设置同步 ​

📦 推荐插件包 ​

前端开发基础包 ​

React 开发包 ​

Vue 开发包 ​

💡 插件管理最佳实践 ​

1. 插件选择原则 ​

2. 性能优化 ​

3. 团队协作 ​

VSCode 前端开发插件推荐

🎯 核心开发插件

Vue 开发插件

Vue (Official) - Vue 3 官方插件

Vetur - Vue 2 支持插件

React 开发插件

ES7+ React/Redux/React-Native snippets

React Extension Pack

🔧 代码质量插件

ESLint - JavaScript 代码检查

Prettier - 代码格式化

Stylelint - CSS 代码检查

EditorConfig - 编辑器配置

🎨 界面增强插件

Material Icon Theme - 文件图标

One Dark Pro - 主题

Indent Rainbow - 缩进彩虹

Color Highlight - 颜色高亮

🔗 Git 集成插件

GitLens - Git 增强

Git Graph - Git 图形化

GitHub Pull Requests - GitHub 集成

🚀 开发辅助插件

Auto Rename Tag - 自动重命名标签

Auto Close Tag - 自动闭合标签

Path Intellisense - 路径智能提示

Tailwind CSS IntelliSense - Tailwind 支持

🧪 测试和调试插件

Jest - 测试支持

Live Server - 本地服务器

REST Client - API 测试

📝 文档和注释插件

Better Comments - 增强注释

Document This - 自动文档

Markdown All in One - Markdown 支持

🔧 工具类插件

Bracket Pair Colorizer 2 - 括号配对

Settings Sync - 设置同步

📦 推荐插件包

前端开发基础包

React 开发包

Vue 开发包

💡 插件管理最佳实践

1. 插件选择原则

2. 性能优化

3. 团队协作