在VSCode中开发Vue.js或React项目时，有哪些必备的扩展和配置技巧？-VSCode-PHP中文网

在VSCode中开发Vue.js或React项目时，有哪些必备的扩展和配置技巧？

紅蓮之龍

发布： 2025-10-06 09:57:02

原创

893人浏览过

合理配置VSCode扩展与设置可显著提升Vue和React开发效率。1. 必装扩展：Vue项目使用Volar、Vue Language Features、ESLint和Prettier；React项目推荐ES7+ React snippets、JSX Hinting、ESLint和Prettier；通用工具包括Path Intellisense、Auto Rename Tag和Bracket Pair Colorizer。2. 编辑器配置优化：在settings.json中设置保存时自动格式化（formatOnSave）并执行ESLint修复（codeActionsOnSave），指定默认格式化工具为Prettier，Vue文件使用Volar，JavaScript/TypeScript使用Prettier。3. 集成ESLint+Prettier：项目根目录配置.eslintrc.js或.eslintrc.json启用Vue或React规则，添加.prettierrc定义代码风格，安装eslint、prettier及相关插件依赖，实现语法检查与自动修复。4. 自定义代码片段：通过“Preferences: Configure User Snippets”创建全局或项目级代码模板，如Vue 3的setup脚本片段，输入vuse快速生成包含ref、onMounted等常用API的结构。正确组合扩展与配置，让VSCode成为高效前端开发环境。

在vscode中开发vue.js或react项目时，有哪些必备的扩展和配置技巧？

在 VSCode 中开发 Vue.js 或 React 项目时，合理的扩展和配置能大幅提升开发效率和代码质量。以下是经过实践验证的必备扩展与实用配置技巧。

1. 必装扩展推荐

这些扩展覆盖语法高亮、智能提示、格式化、调试等核心需求：

Vue.js 项目：
- Volar：官方推荐的 Vue 语言支持工具，提供类型检查、自动补全、跳转定义等功能（取代已弃用的 Vetur）。
- Vue Language Features (Volar)：配合使用，增强模板和脚本支持。
- ESLint 和 Prettier：统一代码风格和自动修复问题。
React 项目：
- ES7+ React/Redux/React-Native snippets：快速生成函数组件、useEffect、useState 等常用代码片段。
- JSX Hinting：优化 JSX 闭合标签提示。
- ESLint 和 Prettier：同上，保持团队代码一致性。
通用辅助扩展：
- Path Intellisense：自动补全文件路径，尤其适合深层目录结构。
- Auto Rename Tag：修改 HTML 或 JSX 标签时自动重命名闭合标签。
- Bracket Pair Colorizer 或内置配对高亮：让嵌套括号更清晰。

2. 编辑器配置优化（settings.json）

通过调整 .vscode/settings.json 实现自动化和一致性：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ],
  "vetur.validation.template": false, // 若使用 Volar，则关闭 Vetur 模板校验
  "[vue]": {
    "editor.defaultFormatter": "vue.volar"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

登录后复制

说明：保存时自动格式化并执行 ESLint 修复，避免手动处理低级错误。

立即学习“前端免费学习笔记（深入）”；

冬瓜配音

AI在线配音生成器

查看详情

3. 集成 ESLint + Prettier 统一风格

确保项目根目录有正确的配置文件：

创建 .eslintrc.js 或 .eslintrc.json，针对 Vue 或 React 启用相应插件（如 plugin:vue/vue3-recommended 或 plugin:react/recommended）。
添加 .prettierrc 定义格式规则（缩进、引号、结尾逗号等）。

安装依赖：

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

登录后复制

若使用 TypeScript，还需加入 @typescript-eslint/parser 和对应插件。

VSCode 会根据这些配置实时提示并自动修复问题。

4. 使用代码片段提升编码速度

除了安装 snippets 扩展，也可以自定义常用模板：

打开命令面板（Ctrl+Shift+P），输入 “Preferences: Configure User Snippets”。
选择新建全局或项目级片段文件。

例如添加一个快速生成 Vue 3 setup 脚本的 snippet：

"Vue Setup Script": {
      "prefix": "vuse",
      "body": [
        "<script setup>",
        "import { ref, onMounted } from 'vue'",
        "",
        "const data = ref('')",
        "",
        "onMounted(() => {})",
        "</script>"
      ],
      "description": "Vue 3 script setup template"
    }

登录后复制