当前位置：首页 > React

vscode如何配置react运行

2026-02-12 10:06:27React

安装必要工具

确保已安装最新版Node.js（包含npm/npx）。可通过终端输入node -v和npm -v验证版本。React项目通常需要Node.js 14或更高版本。

创建React项目

使用Vite或Create React App快速搭建项目。推荐Vite因其更快的启动速度：

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

或传统CRA方式：

npx create-react-app my-react-app

安装VS Code插件

安装以下扩展提升开发体验：

vscode如何配置react运行

ES7+ React/Redux/React-Native snippets：提供代码片段快捷方式
Prettier - Code formatter：代码格式化
ESLint：代码质量检查
Live Server：快速启动本地服务器（可选）

配置项目设置

在项目根目录创建.vscode/settings.json，添加基础配置：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

启动开发服务器

进入项目目录并运行开发命令：

vscode如何配置react运行

cd my-react-app
npm run dev  # Vite项目
或
npm start    # CRA项目

终端会输出本地访问地址（通常为http://localhost:3000）。

调试配置

在.vscode/launch.json中添加Chrome调试配置：

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

可选优化配置

在vite.config.js或webpack.config.js中调整构建配置。例如Vite可添加：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true
  }
})