如何用vs code开发react
安装必要工具
确保系统已安装Node.js（建议LTS版本），可通过官网下载安装。Node.js自带npm包管理器，用于后续依赖安装。
打开终端运行以下命令验证安装：
node -v
npm -v配置VS Code
安装VS Code官方提供的扩展：
- ES7+ React/Redux/React-Native snippets：提供React代码片段快捷生成
- Prettier - Code formatter：代码自动格式化
- ESLint：代码质量检查
- Debugger for Chrome：调试React应用
在VS Code设置中（Ctrl+,）启用"Format On Save"，并设置默认格式化工具为Prettier。
创建React项目
通过终端使用Create React App脚手架生成项目：
npx create-react-app my-app
cd my-app
npm start此命令会创建标准React项目结构，包含src/、public/等目录，并自动启动开发服务器（通常为http://localhost:3000）。
项目结构优化
在src/目录下建议采用功能分组结构：
src/
├── components/ # 通用组件
├── pages/ # 页面级组件
├── hooks/ # 自定义Hook
├── utils/ # 工具函数
├── styles/ # 全局样式
└── App.js # 根组件配置路径别名
修改jsconfig.json（若无则新建）以支持路径别名：
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@components/*": ["components/*"],
"@utils/*": ["utils/*"]
}
}
}开发调试技巧
使用F5启动调试时，需配置.vscode/launch.json：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src"
}
]
}常用快捷键
Ctrl+Shift+P：打开命令面板Ctrl+`：打开集成终端Alt+Click：多光标编辑Ctrl+Shift+L：选中所有匹配项Ctrl+K Ctrl+F：格式化选中代码
性能优化配置
在package.json中添加生产环境构建命令：
"scripts": {
"build": "react-scripts build",
"analyze": "source-map-explorer 'build/static/js/*.js'"
}安装分析工具后运行：
npm install --save-dev source-map-explorer
npm run build
npm run analyze
