vscode如何配置react运行

安装必要工具

确保系统已安装 Node.js（建议 LTS 版本），可通过终端输入 node -v 和 npm -v 验证是否安装成功。若未安装，需从 Node.js 官网 下载并安装。

创建 React 项目

通过终端运行以下命令创建新的 React 项目（需提前安装 create-react-app）：

npx create-react-app my-react-app

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

cd my-react-app

配置 VS Code 插件

安装以下推荐插件以提升开发体验：

• ESLint：代码规范检查
• Prettier：代码格式化
• Reactjs code snippets：React 代码片段快捷生成
• Debugger for Chrome/Firefox：浏览器调试支持

配置调试环境

在 VS Code 中打开项目文件夹，创建或编辑 .vscode/launch.json 文件，添加以下配置：

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

运行开发服务器

在终端启动开发服务器：

npm start

默认情况下，浏览器会自动打开 http://localhost:3000 并显示 React 应用页面。

配置代码格式化

在项目根目录创建 .prettierrc 文件，示例配置：

{
  "singleQuote": true,
  "semi": false
}

在 VS Code 设置中启用 Format On Save，并设置默认格式化工具为 Prettier。

扩展功能配置

如需支持 TypeScript，可在创建项目时使用模板：

npx create-react-app my-app --template typescript

对于状态管理（如 Redux），可通过以下命令安装：

npm install redux react-redux