vscode如何配置react运行

安装必要工具

确保系统中已安装Node.js（建议使用LTS版本），可通过官网下载安装。Node.js自带npm包管理器，用于后续依赖安装。

创建React项目

在终端或VSCode集成终端中运行以下命令创建React应用：

npx create-react-app my-app
cd my-app

此命令会生成标准React项目结构，包含基础配置和依赖。

安装VSCode扩展

在VSCode扩展市场中安装以下关键插件：

• ESLint：代码质量检查
• Prettier：代码格式化
• Reactjs code snippets：React代码片段快捷生成
• Debugger for Chrome：调试支持

配置项目设置

在项目根目录创建.vscode/settings.json文件，添加以下配置：

{
  "editor.formatOnSave": true,
  "eslint.validate": ["javascript", "javascriptreact"],
  "prettier.eslintIntegration": true
}

这实现保存时自动格式化并与ESLint规则同步。

启动开发服务器

在终端运行开发命令：

npm start

默认会在http://localhost:3000启动实时热更新的开发服务器。

调试配置

创建.vscode/launch.json文件配置调试：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "React Debug",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

按F5即可在Chrome中调试React组件。

可选优化

安装常用依赖提升开发体验：

npm install -D @types/react @types/react-dom

为TypeScript支持添加类型定义。