如何用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