使用 VSCode 开发 React

Visual Studio Code（简称 VS Code）是一个由微软开发的免费、开源的代码编辑器，支持多种编程语言，并提供了代码高亮、智能代码补全、代码重构、调试等功能。

VS Code 内置终端，可以直接在编辑器中运行命令行工具，如 npm、yarn 等，方便项目构建和管理。

如果你希望拥有更丰富的 Vue.js 开发环境，可以安装 Volar 和 Volar for TypeScript 扩展，这些扩展提供了 Vue.js 的智能提示

如果你还不了解 VS Code 或者还未安装，可以参考：VSCode 教程。

为什么选择 VS Code 开发 React？

  • 智能补全：对 JSX、React Hooks、Props 等有完美支持。
  • 插件丰富：一键安装 ESLint、Prettier、代码片段等，提升效率。
  • 集成终端：直接在编辑器里运行 npm run dev 等命令。
  • 调试工具：内置调试器 + React DevTools 配合，神级体验。
  • 跨平台：Windows、macOS、Linux 都完美支持。
  • 免费开源：由 Microsoft 维护，社区活跃。

下载和安装 VS Code

  • 访问官网：https://code.visualstudio.com/

  • 点击大大的 Download 按钮，选择你的操作系统：

    • Windows：下载 .exe 安装包
    • macOS：下载 .dmg（拖拽到 Applications）
    • Linux：根据发行版选择 .deb 或 .rpm

  • 安装过程：

    • Windows/macOS：双击安装包，一路 Next/继续。
    • 推荐勾选"添加到 PATH" 和 "注册为代码编辑器"（方便命令行打开）。

  • 验证安装：

    • 打开 VS Code，你会看到欢迎界面。
    • Windows 用户可以在命令行输入 code --version 测试。

打开你的 React 项目

  1. 打开 VS Code。

  2. 方法一：菜单 File → Open Folder，选择你的项目文件夹（例如 my-first-react-app）。

  3. 方法二（推荐）：在终端进入项目目录，然后一键打开：

    cd my-first-react-app
code .

    （code . 命令会直接用 VS Code 打开当前文件夹）

现在你看到左侧文件 explorer，显示项目结构（如 src、public 等）。

安装必备插件（Extensions）

VS Code 的强大在于插件。点击左侧活动栏的 Extensions 图标（四个方块），或按快捷键 Ctrl+Shift+X（macOS: Cmd+Shift+X）打开扩展市场。

搜索并安装以下插件（点击 Install）：

  • ESLint（作者：Microsoft）

    • 实时检查代码规范，React 官方推荐。
    • 安装后会在代码中标红错误。

  • Prettier - Code formatter（作者：Prettier）

    • 自动格式化代码，保持风格统一。

  • ES7+ React/Redux/React-Native snippets（作者：dsznajder）

    • 代码片段神器！输入快捷键快速生成组件。
    • 常见片段：
      • rafce → 生成箭头函数组件 + export default
      • rfc → 生成函数组件
      • useState → 快速生成 useState

  • Path Intellisense（作者：Christian Kohler）

    • 导入路径自动补全（import 时超级好用）。

  • Bracket Pair Colorizer 2 或内置括号着色（VS Code 1.60+ 已内置）

    • 括号颜色区分，便于阅读嵌套 JSX。

  • GitLens（可选，但强烈推荐）

    • Git 增强，查看代码提交历史。

React 专属推荐（可选进阶）：

  • Tailwind CSS IntelliSense（如果用 Tailwind）
  • React Developer Tools（浏览器插件已安装，这里不需要）

安装完成后，重启 VS Code（或按 Ctrl+Shift+P → Reload Window）。

配置 VS Code 提升 React 开发体验

按 Ctrl+Shift+P（macOS: Cmd+Shift+P）打开命令面板，输入 "Preferences: Open Settings (JSON)" 打开 settings.json。

在项目根目录创建 .vscode/settings.json（推荐项目级配置），添加以下内容：

{
  // 保存时自动格式化
  "editor.formatOnSave": true,
  // 默认使用 Prettier 格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // ESLint 自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // JSX/TSX 文件也应用 Prettier
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // 显示行号、缩进指南
  "editor.rulers": [80],
  "editor.guides.indentation": true
}

保存后生效。现在每次保存代码，Prettier 会自动格式化，ESLint 会自动修复常见问题。

验证：故意写一段不规范代码（如缺少分号），保存后看是否自动修复。

实际编写 React 代码：从零创建一个组件

在左侧 Explorer，右键 src 文件夹 → New Folder → 创建 components 文件夹。

右键 components → New File → 创建 Greeting.jsx。

使用代码片段快速生成组件：

  • 输入 rafce（react arrow function component export）
  • 按 Tab 键，自动生成模板：
import React from 'react'

const Greeting = () => {
  return (
    <div>Greeting</div>
  )
}

export default Greeting

修改成完整组件（演示状态和 Props）：

实例

import { useState } from 'react';

const Greeting = ({ name = '陌生人' }) => {
  const [count, setCount] = useState(0);

  return (
    <div style={{ padding: '20px', border: '1px solid #ccc' }}>
      <h2>你好，{name}！</h2>
      <p>你已经点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
        点击我 +1
      </button>
    </div>
  );
};

export default Greeting;

在 src/App.jsx 中引入并使用：

实例

import Greeting from './components/Greeting.jsx';

// 在 return 中添加：
<div>
  <Greeting name="Runoob" />
  <Greeting />  {/* 使用默认 name */}
</div>

保存所有文件（Ctrl+S），切换到浏览器，热更新自动显示新组件！

体验亮点：

  • 输入 useState 时，智能补全会提示。
  • 导入路径 ./components/Greeting.jsx 时，Path Intellisense 会自动补全。
  • 保存后 Prettier 自动格式化缩进。
  • 如果有错误，ESLint 会在问题面板（底部）标红。

集成终端与调试技巧

内置终端：菜单 Terminal → New Terminal，或 Ctrl+`（反引号）。

  • 直接运行 pnpm dev，服务器输出就在这里。

调试 React 代码：

  1. 安装浏览器插件 React Developer Tools（如果还没装）。
  2. 在 VS Code，按 F5 启动调试（需先配置 launch.json，但入门阶段先用浏览器 DevTools）。
  3. 在浏览器 F12 → Components 标签查看你的 Greeting 组件的 Props 和 state。

常见快捷键（必背）：

  • Ctrl + S：保存
  • Ctrl + /：注释行
  • Alt + ↑/↓：移动行
  • Ctrl + D：多光标选中相同词
  • Ctrl + Shift + P：命令面板（万能）

小练习：构建一个卡片组件

  1. 创建 components/Card.jsx，用 rafce 生成。
  2. 实现一个卡片组件，接收 title、content、imageUrl 三个 Props。
  3. 在 App.jsx 中使用两次，展示不同内容。
  4. 加点内联样式美化。

完成后，你的页面会有多个漂亮的卡片！

步骤 1：创建 Card.jsx 组件

  1. 在 src 文件夹下，右键 → New Folder → 创建 components 文件夹（如果还没有）。

  2. 右键 components 文件夹 → New File → 创建 Card.jsx。

  3. 在 Card.jsx 中输入 rafce（按 Tab 键自动生成模板），然后修改成以下代码：

Card.jsx 文件代码：

import React from 'react';

const Card = ({ title, content, imageUrl }) => {
  return (
    <div
      style={{
        width: '300px',
        border: '1px solid #ccc',
        borderRadius: '12px',
        overflow: 'hidden',
        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
        margin: '20px auto',
        backgroundColor: '#fff',
        fontFamily: 'Arial, sans-serif',
      }}
    >
      {imageUrl && (
        <img
          src={imageUrl}
          alt={title}
          style={{
            width: '100%',
            height: '200px',
            objectFit: 'cover',
          }}
        />
      )}
      <div style={{ padding: '20px' }}>
        <h3 style={{ margin: '0 0 10px 0', color: '#333' }}>{title}</h3>
        <p style={{ margin: 0, color: '#666', lineHeight: '1.5' }}>
          {content}
        </p>
      </div>
    </div>
  );
};

export default Card;

说明：

  • 使用解构 Props：{ title, content, imageUrl }。
  • 内联样式美化：圆角、阴影、图片自适应、间距等，让卡片看起来现代专业。
  • 条件渲染图片：如果没有 imageUrl，就不显示图片（用 && 实现）。

步骤 2：修改 App.jsx，使用 Card 组件两次

打开 src/App.jsx，替换内容为以下代码（保留了原来的部分结构，清理了默认计数器，专注于卡片展示）：

src/App.jsx 文件代码：

import './App.css';
import Card from './components/Card.jsx';

function App() {
  return (
    <div
      style={{
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'center',
        padding: '40px',
        backgroundColor: '#f0f0f0',
        minHeight: '100vh',
      }}
    >
      {/* 第一张卡片：关于 React */}
      <Card
        title="React 是什么？"
        content="React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发。它采用组件化方式，让代码更易复用和维护。"
        imageUrl="https://react.dev/images/uwu.png"
      />

      {/* 第二张卡片：关于 Vite */}
      <Card
        title="Vite 的优势"
        content="Vite 是新一代前端构建工具，开发服务器启动极快，支持热模块替换（HMR），是现代 React 项目的首选。"
        imageUrl="https://vite.dev/logo-without-border.svg"
      />

      {/* 你可以再加第三张试试！ */}
    </div>
  );
}

export default App;

说明：

  • 导入 Card 组件。
  • 使用 <Card /> 两次，传递不同的 Props。
  • App 的外层 div 使用 flex 布局，让多个卡片横向排列（响应式换行）。
  • 图片 URL 使用了官方公开图片（React 的小图标和 Vite 的 Logo），无需本地资源，直接在线加载。

步骤 3：运行并查看效果

  1. 保存所有文件（Ctrl+S）。
  2. 如果开发服务器没运行，在 VS Code 终端执行： 
    npm run dev
  3. 浏览器打开 http://localhost:5173，你会看到两张（或更多）漂亮的卡片，居中排列，带图片、标题和内容！

效果预览（文字描述）：

  • 卡片有阴影和圆角，看起来像 Material Design 风格。
  • 图片顶部占满宽度，文字部分有舒适间距。
  • 背景浅灰，卡片白色，视觉清晰。