React开发者需在VSCode中安装ESLint等5个核心扩展、配置settings.json启用保存自动格式化与ESLint修复、初始化项目级ESLint/Prettier、启用TS智能提示、配置自定义代码片段。
如果您是React开发者，希望在VSCode中获得更高效的编码体验，则需针对性配置编辑器以支持语法高亮、智能提示、代码格式化与调试能力。以下是实现该目标的具体步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装核心扩展
VSCode本身不内置React专用功能，需通过扩展补全开发支持。这些扩展提供JSX语法识别、组件自动补全、ESLint集成等基础能力。
1、打开VSCode，点击左侧活动栏的扩展图标（或按快捷键 ⇧⌘X）。
2、在搜索框中依次输入并安装以下扩展：ESLint、Prettier、Auto Rename Tag、Bracket Pair Colorizer 2、Reactjs Code Snippets。
3、安装完成后，重启VSCode使扩展完全生效。
二、配置settings.json文件
用户级设置可统一控制格式化行为、括号匹配、保存时自动修复等关键行为，避免项目间配置不一致。
1、按下 ⇧⌘P 打开命令面板，输入 Preferences: Open Settings (JSON) 并回车。
2、在右侧用户设置JSON中粘贴以下配置项：
3、将 "editor.formatOnSave" 设置为 true。
4、将 "editor.codeActionsOnSave" 设为 {"source.fixAll.eslint": true}。
5、添加 "eslint.validate" 数组，包含 ["javascript", "javascriptreact", "typescript", "typescriptreact"]。
三、初始化项目级ESLint与Prettier配置
项目级配置优先级高于用户设置，确保团队协作中代码风格统一，并避免全局配置干扰其他语言项目。
将 React 应用升级到最新版本，从类组件迁移到 Hooks，并采用并发特性。用于现代化改造 React 代码库、迁移到 React Hooks 或升级到最新
1、在React项目根目录下执行命令：npm init @eslint/config，按提示选择 React 和 TypeScript 支持。
2、安装Prettier相关依赖：npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier。
3、在 .eslintrc.js 的 extends 数组末尾添加 "prettier" 和 "plugin:prettier/recommended"。
4、创建 .prettierrc 文件，写入标准配置如 {"semi": true, "singleQuote": true, "tabWidth": 2}。
四、启用TypeScript智能提示增强
TypeScript能显著提升React组件类型安全与IDE响应速度，需确保VSCode正确识别tsconfig.json并启用类型检查。
1、确认项目中存在 tsconfig.json，且 "jsx" 字段值为 "preserve" 或 "react-jsx"。
2、在VSCode中打开任意TSX文件，右下角状态栏点击 TypeScript，选择 Select TypeScript Version → Use Workspace Version。
3、按下 ⇧⌘P，执行 TypeScript: Restart TS Server，强制刷新类型服务。
五、配置自定义代码片段
高频编写的React结构（如函数组件、useEffect模板）可通过用户代码片段减少重复输入，提升初始开发效率。
1、按下 ⇧⌘P，输入 Preferences: Configure User Snippets 并回车。
2、选择 New Global Snippets file，命名为 react-custom。
3、在生成的JSON中添加键 "React Function Component"，其 prefix 设为 rfc，body 包含 const ${1:ComponentName} = () => { return
4、保存文件后，在任意JSX文件中输入 rfc 并按Tab即可展开模板。
