VSCode React开发需安装ES7+React、Prettier、ESLint等插件，配置ESLint与Prettier协同、TypeScript支持、自定义代码片段及Chrome调试环境。
如果您正在使用 Visual Studio Code 进行 React 开发，但发现代码提示不准确、组件结构难以识别或 JSX 语法高亮异常，则可能是开发环境缺少针对性插件与合理配置。以下是提升 React 开发体验的关键插件与配置方法：
本文运行环境：MacBook Pro，macOS Sequoia。
一、安装核心插件
这些插件为 React 项目提供语法支持、智能补全与实时错误检测，是开发流程的基础支撑。
1、打开 VSCode，点击左侧活动栏的扩展图标（或按 Cmd+Shift+X）。
2、在搜索框中依次输入并安装以下插件：ES7+ React/Redux/React-Native snippets、Reactjs code snippets、Prettier、ESLint、Auto Rename Tag。
3、安装完成后，重启 VSCode 使插件完全加载。
二、配置 ESLint 与 Prettier 协同工作
避免代码格式化冲突，确保 ESLint 检查逻辑与 Prettier 格式化规则统一输出，防止保存时反复修改同一行。
1、在项目根目录创建 .eslintrc.json 文件，写入 React 官方推荐配置及 hooks 规则。
2、在项目根目录创建 .prettierrc 文件，设置 semi: false、singleQuote: true、tabWidth: 2 等基础项。
3、在 VSCode 设置中搜索 format on save，勾选启用；再搜索 default formatter，将其设为 esbenp.vscode-eslint。
三、启用 TypeScript 支持（适用于 .tsx 项目）
当项目使用 TypeScript 编写 React 组件时，需激活类型感知能力，使 props 接口、泛型组件和 hook 返回值具备完整推导。
1、确认项目中已安装 @types/react 和 @types/react-dom。
2、在 VSCode 中打开命令面板（Cmd+Shift+P），执行 TypeScript: Select TypeScript Version，选择 Use Workspace Version。
3、在项目根目录添加 tsconfig.json，确保 jsx 字段设为 preserve 或 react-jsx。
四、自定义代码片段提升 JSX 编写效率
通过手动编写或导入定制 snippet，可一键生成常用 React 函数组件、useEffect 模板或 Context 创建结构，减少重复键入。
1、按下 Cmd+Shift+P，输入 Configure User Snippets，选择 New Global Snippets file，命名为 react-custom.code-snippets。
2、在弹出的 JSON 文件中添加如下片段：
3、粘贴内容：{"rfc": {"prefix": "rfc","body": ["const $1 = () => {"," return ("," $0$2>"," );","};","export default $1;"],"description": "React Function Component"}}。
五、调试配置：集成 Chrome Debugger
直接在 VSCode 中断点调试 React 应用，查看组件状态、props 变化与 hook 执行顺序，无需切换至浏览器 DevTools。
1、安装官方插件 Debugger for Chrome（如使用 Edge，则安装 Debugger for Edge）。
2、在项目根目录创建 .vscode/launch.json，配置 type 为 pwa-chrome，url 指向本地启动地址（如 http://localhost:3000）。
3、确保应用已通过 npm start 运行，然后在 VSCode 中点击绿色三角形启动调试会话。
