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 统一格式化风格；二者若未正确集成，会导致保存时反复格式化或报错冲突。
1、在项目根目录创建 .eslintrc.json 文件，内容包含 react 和 react-hooks 插件规则。
2、在项目根目录创建 .prettierrc 文件，设置 semi: false、singleQuote: true 等基础选项。
3、在 VSCode 设置中搜索 format on save，勾选启用；再搜索 default formatter，将默认格式化工具设为 esbenp.prettier-vscode。
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 键，即可展开完整组件框架。
无需切换到浏览器开发者工具，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 将自动打开并暂停执行。
# react
# 接口
# default
# macos
# http
# 设为
# 自定义
# 跳转
# 运行环境
# 如果您
# 工作流
# 右键
# 报错
# 可直接
# auto
# const
# vscode
# js
# json
# go
# typescript
# npm
# 编码
# 浏览器
# edge
# macbook
# chrome
# select
# format
# 则可
