vscode如何运行react

运行 React 项目的基本步骤

确保已安装 Node.js（建议版本 16+）和 npm/yarn。若未安装，可从 Node.js 官网 下载。

在 VSCode 中打开终端（快捷键 Ctrl+` 或通过菜单栏 Terminal > New Terminal），执行以下命令创建 React 项目：

npx create-react-app my-app

创建完成后，进入项目目录：

cd my-app

启动开发服务器：

npm start

项目将自动在浏览器中打开 http://localhost:3000。

关键配置与插件推荐

安装 ESLint 和 Prettier 扩展以提升代码质量。通过 VSCode 扩展市场搜索并安装：

• ESLint
• Prettier - Code formatter

配置 .eslintrc.json（若不存在需创建）：

{
  "extends": ["react-app", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

调试 React 应用

安装 Debugger for Chrome 或 Debugger for Firefox 扩展。配置 launch.json：

1. 点击左侧调试图标
2. 选择 Create a launch.json file
3. 选择 Chrome 或 Firefox

示例配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

常见问题解决

端口冲突：若 3000 端口被占用，修改启动命令：

PORT=3001 npm start

依赖问题：删除 node_modules 并重新安装：

rm -rf node_modules
npm install

性能优化：在大型项目中，可尝试使用 Vite 替代 Create React App：

npm create vite@latest my-app --template react