VSCode开发React/Vue项目需安装ESLint、Prettier、Volar等扩展，配置.vscode/settings.json启用框架校验与补全，手动设置.vue/.jsx文件语言模式，通过tasks.json集成热重载，并自定义代码片段提升编码效率。

如果您正在使用VSCode进行React或Vue项目的开发，但尚未充分利用其扩展与配置能力，则可能面临代码提示不全、组件跳转失效、语法高亮异常等问题。以下是提升开发效率的具体操作步骤：

本文运行环境：MacBook Air，macOS Sequoia。

一、安装核心扩展插件

VSCode本身不内置前端框架专属支持，需通过官方认证的扩展补足语言服务、调试能力和项目导航功能。

1、打开VSCode，点击左侧活动栏的扩展图标（或按快捷键Cmd+Shift+X）。

2、在搜索框中依次输入并安装以下扩展：ESLint、Prettier、Volar（Vue 3专用）、ES7+ React/Redux/React-Native snippets。

3、安装完成后，重启VSCode使语言服务器完全加载。

二、配置工作区设置文件

项目级配置可避免全局设置冲突，确保团队成员获得一致的编辑体验，并启用框架特有功能如Vue SFC语法校验或JSX自动闭合。

1、在项目根目录下创建名为.vscode/settings.json的文件。

2、写入以下内容（以Vue项目为例）：

3、将"vetur.validation.template"设为true，启用模板语法验证。

4、对React项目，添加"javascript.preferences.jsxAttributeCompletion": "auto"以支持JSX属性自动补全。

三、启用框架专属语言模式

VSCode需识别单文件组件（SFC）或JSX文件的真实语言类型，否则无法触发对应语法高亮与智能提示。

1、打开任意.vue文件，在右下角状态栏点击当前语言标识（如“Plain Text”）。

2、在弹出菜单中选择Vue，而非“HTML”或“JavaScript”。

3、对.jsx或.tsx文件，同样点击状态栏语言标识，选择JavaScript React。

四、配置热重载与本地服务集成

将VSCode终端与框架开发服务器深度绑定，可实现在编辑器内直接启动、重启及查看控制台输出，减少上下文切换。

1、按下Cmd+Shift+P调出命令面板，输入并选择Tasks: Configure Task。

2、选择Create tasks.json from template → Others。

3、在生成的.vscode/tasks.json中，填入"command": "npm"与"args": ["run", "dev"]，并设置"isBackground": true。

4、保存后，按Cmd+Shift+B即可一键启动开发服务器。

五、自定义代码片段提升编写速度

针对高频结构（如Vue组件导出、React函数组件模板），通过用户代码片段可实现一键插入标准化代码块。

1、按下Cmd+Shift+P，输入并选择Preferences: Configure User Snippets。

2、选择New Global Snippets file，命名为react-vue.code-snippets。

3、在JSON中添加一个key为rfc的片段，前缀设为rfc，body填入函数组件基础结构，包括export default与props解构。

4、保存后，在React文件中输入rfc并回车，即可插入完整组件骨架。

# vue  # npm  # json  # 前端  # js  # html  # vscode  # java  # javascript  # react  # 编码