vscode如何开发react
使用 VSCode 开发 React 的配置指南
安装必要工具
确保 Node.js 和 npm/yarn 已安装，可以通过终端输入 node -v 和 npm -v 检查版本。若未安装，需从官网下载并安装。
创建 React 项目
使用 Create React App 快速初始化项目，运行命令 npx create-react-app my-app。完成后进入项目目录 cd my-app，启动开发服务器 npm start。
安装 VSCode 插件 推荐安装以下插件以提升开发效率：
- ES7+ React/Redux/React-Native snippets：提供 React 代码片段
- Prettier - Code formatter：代码自动格式化
- ESLint：代码质量检查
- Auto Import：自动导入模块
配置代码格式化
在项目根目录创建 .prettierrc 文件，配置格式化规则。例如：
{
"singleQuote": true,
"semi": false
}在 VSCode 设置中启用 Format On Save，确保保存时自动格式化。
启用 ESLint
若项目未自带 ESLint，可通过 npm install eslint --save-dev 安装。创建 .eslintrc.json 文件配置规则，或扩展已有配置如 eslint-config-airbnb。
调试配置
在 VSCode 中点击左侧调试图标，生成 launch.json 文件。选择 Chrome 调试环境，配置如下：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}项目结构优化
根据需求调整 src 目录结构，常见组织方式包括按功能或路由划分模块。例如：
src/
components/
pages/
utils/
App.js
index.js热重载与快速刷新
Create React App 默认支持热重载。修改代码后浏览器会自动更新，无需手动刷新。若需自定义配置，可参考 react-refresh 文档。
扩展工具推荐
- React Developer Tools：浏览器扩展，用于检查 React 组件树
- Redux DevTools：调试 Redux 状态管理
- Jest Runner：VSCode 插件，直接运行测试用例
