配置vscode进行react开发需安装ESLint、Prettier等扩展，设置保存时自动格式化并协同工作，通过.eslintrc.json和.prettierrc文件统一代码规范，启用Editor: format On Save及默认格式化程序，结合内置终端运行项目，提升开发效率。

使用 VSCode 进行 React 开发，配置得当能大幅提升编码效率和开发体验。重点在于安装合适的扩展、启用语法高亮与智能提示、配置格式化工具，并结合 ESLint 和 Prettier 实现代码规范统一。

安装必要扩展

VSCode 的强大之处在于其丰富的插件生态。以下是 React 开发推荐安装的扩展：

• ESLint：实时检查 javaScript/JSX 代码质量，配合 Airbnb 或其他规范自动提示错误。
• Prettier – Code formatter：统一代码格式，支持保存时自动美化。
• javascript and typescript Nightly（可选）：获取最新的语言支持特性。
• Reactjs code snippets：提供常用 React 代码片段，如 rafce 快速生成函数组件。
• Path Intellisense：自动补全文件路径，适合模块引用较多的项目。

配置 ESLint 与 Prettier 协同工作

避免格式化冲突，需让 Prettier 遵从 ESLint 规则。在项目根目录确保已安装以下依赖：

npm install –save-dev eslint prettier eslint-config-prettier eslint-plugin-react eslint-plugin-react-hooks

创建或更新 .eslintrc.json 文件：

{   "extends": [     "eslint:recommended",     "plugin:react/recommended",     "plugin:react-hooks/recommended",     "prettier"   ],   "parserOptions": {     "ecmaVersion": 2021,     "sourceType": "module",     "ecmaFeatures": {       "jsx": true     }   },   "settings": {     "react": {       "version": "detect"     }   },   "rules": {} }

添加 .prettierrc 文件定义格式偏好：

{   "semi": true,   "trailingComma": "es5",   "singleQuote": true,   "printWidth": 80,   "tabWidth": 2 }

启用保存时自动格式化

在 VSCode 设置中启用保存时自动格式化，确保代码整洁一致。

行者AI

行者AI绘图创作，唤醒新的灵感，创造更多可能

100

查看详情

打开设置（Ctrl + ,），搜索 format on save，勾选 Editor: Format On Save。

若存在多个格式化工具，指定默认格式化程序：

• 右键编辑器 -> “格式化文档时” -> 选择 “Prettier”。
• 或在 .vscode/settings.json 中配置：

{   "editor.defaultFormatter": "esbenp.prettier-vscode",   "editor.formatOnSave": true,   "editor.codeActionsOnSave": {     "source.fixAll.eslint": true   } }

这样保存文件时，ESLint 会自动修复可修复的问题，Prettier 负责格式化。

调试与运行建议

虽然 VSCode 可集成调试，但 React 项目通常通过 npm start 启动开发服务器。建议：

• 使用内置终端（Ctrl + `）运行 npm run start。
• 安装 Debugger for chrome 扩展，配合 launch.json 调试前端代码（需配置启动项）。
• 利用 VSCode 的“问题”面板查看 ESLint 报错，快速定位修复。

基本上就这些。合理配置后，VSCode 能成为高效且舒适的 React 开发环境。