在 VS Code 中搭建 react/jsX 开发环境需精简插件、正确配置 jsconfig.json 或 tsconfig.json、关联 .jsx 文件类型、启用 ESLint/Prettier 自动校验与格式化，并善用内置终端和调试功能。
在 VS Code 中搭建 React 和 JSX 开发环境，核心是配置好语法支持、智能提示、代码格式化和热重载体验，而不是装一堆插件堆砌功能。
必备插件：轻量但精准
只装真正影响开发流的几个插件，避免拖慢编辑器：
- ES7+ React/Redux/React-Native snippets：按
rfc快速生成函数组件骨架，imrc自动导入React和Component，省去手敲重复代码 - auto Rename Tag：改一个 JSX 标签名，闭合标签自动同步，对嵌套结构特别友好
- Prettier：配合 ESLint 使用（见下条），统一 JSX 缩进、括号换行风格，比如把
<div classname="box">...</div>自动格式化为多行可读形式 - ESLint：必须启用“Run on save”并配置
eslint.config.js或.eslintrc.cjs，推荐用eslint-config-react-app基础规则，能即时标出useState写错位置、JSX 中用=代替{}等典型错误
关键配置：让 JSX 不再“失色”
VS Code 默认对 JSX 支持有限，需手动告诉它当前是 React 环境：
- 在项目根目录创建
jsconfig.json（非 typescript 项目）或tsconfig.json（TS 项目），确保含"jsx": "react-jsx"字段 - 在 VS Code 设置中搜索
files.associations，添加"*.jsx": "javascriptreact"，否则.jsx文件可能被当普通 JS 处理，语法高亮和 Emmet 都失效 - 关闭
javascript.suggest.autoImports（默认开启），避免在 JSX 中误补全非 React API 的全局变量
终端与调试：本地服务不跳出编辑器
用好 VS Code 内置终端和任务系统，减少窗口切换：
- 用
Ctrl+`唤出集成终端，运行npm start或yarn dev，输出日志直接可见；右键终端标签可“Split Terminal”并行跑服务+测试 - 在
.vscode/tasks.json中定义构建任务，比如build:prod一键打包，绑定快捷键Ctrl+Shift+B - 安装
Debugger for chrome或Debugger for edge，配合launch.json启动带断点的调试会话，直接在 JSX 行打点看props值变化
小而实用的习惯配置
几处细节能明显提升日常编码节奏：
- 设置
"editor.formatOnSave": true，保存即格式化，Prettier + ESLint 规则自动生效 - 启用
"emeraldwalk.runonsave"插件（可选），保存 JSX 文件时自动运行 ESLint 修复（--fix），比如自动补全缺失的key属性警告 - 在
settings.json里加"files.watcherExclude": {"**/node_modules/**": true}，防止大项目中文件监听卡顿
基本上就这些。不需要复杂工具链，关键是让 VS Code “懂” React，而不是让它变重。