vscode 中高效 react 开发需配置核心插件、ESLint 与 Prettier 协同、typescript 支持、自定义代码片段及本地断点调试。
如果您使用 VSCode 进行 React 开发，但尚未配置高效的工作流，则可能错失大量提升编码速度与代码质量的机会。以下是针对 React 开发者在 VSCode 中实现高效开发的多种实用方法：
本文运行环境：macbook Air，macos Sequoia
一、安装核心扩展插件
VSCode 本身不内置 React 支持，需通过扩展提供语法高亮、智能提示、组件预览等能力。合理选择插件可显著降低错误率并加速开发节奏。
1、打开 VSCode 左侧活动栏中的扩展图标（或按 Cmd+Shift+X）。
2、在搜索框中依次输入并安装以下插件：ES7+ React/Redux/React-Native snippets、Prettier、ESLint、auto Rename Tag、Bracket Pair Colorizer。
3、重启 VSCode 使部分插件生效。
二、配置 ESLint 与 Prettier 协同工作
ESLint 检查代码逻辑与规范，Prettier 统一格式化风格；二者若未正确集成，会导致保存时反复格式化或报错冲突。
1、在项目根目录创建 .eslintrc.json 文件，内容包含 react 和 react-hooks 插件规则。
2、在项目根目录创建 .prettierrc 文件，设置 semi: false、singleQuote: true 等基础选项。
3、在 VSCode 设置中搜索 format on save，勾选启用；再搜索 default formatter，将默认格式化工具设为 esbenp.prettier-vscode。
三、启用 TypeScript 类型支持
React 项目若使用 TypeScript，VSCode 可提供精准的类型推导、接口跳转与错误实时标记，前提是工作区正确识别 tsconfig.json 并启用语义检查。
1、确保项目中存在 tsconfig.json，且 compilerOptions.jsx 设为 “preserve” 或 “react-jsx”。
2、在 VSCode 命令面板（Cmd+Shift+P）中输入 TypeScript: select TypeScript Version，选择 Use Workspace Version。
3、右键任意 .tsx 文件，选择 go to Type Definition 验证能否跳转至 React 类型声明。
四、自定义代码片段提升组件编写效率
重复编写函数组件、useEffect、useState 等结构会消耗大量时间；通过用户代码片段可一键生成符合团队规范的模板。
1、在 VSCode 中打开命令面板，输入 Preferences: Configure User Snippets，选择 New Global Snippets file，命名为 react-ts.code-snippets。
2、在该文件中添加键为 rfc 的片段，前缀设为 rfc，body 包含 const ComponentName = () => { return
; }; 结构。
3、保存后，在 .tsx 文件中输入 rfc 并按 Tab 键，即可展开完整组件框架。
五、调试 React 应用的本地断点流程
无需切换到浏览器开发者工具，VSCode 可直接附加到 chrome 或 edge 中运行的 React 应用，实现源码级断点调试。
1、在项目中运行 npm start 启动开发服务器。
2、在 VSCode 中点击左侧调试图标，选择 create a launch.json file，环境选 Chrome。
3、修改生成的 launch.json 中的 url 字段为 http://localhost:3000，并确保 webRoot 指向项目 src 目录。
4、在 JSX 或 Hook 调用处左侧边栏点击添加断点，按 F5 启动调试，Chrome 将自动打开并暂停执行。