使用 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';constGreeting=({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>);};exportdefaultGreeting;

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

importGreeting from'./components/Greeting.jsx';// 在 return 中添加：<div><Greeting name="ez4code"/><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 键自动生成模板），然后修改成以下代码：

importReact from'react';constCard=({title,content,imageUrl})=>{return(<divstyle={{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&&(<imgsrc={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>);};exportdefaultCard;

说明 ：

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

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

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

import'./App.css';importCard from'./components/Card.jsx';functionApp(){return(<divstyle={{display:'flex',flexWrap:'wrap',justifyContent:'center',padding:'40px',backgroundColor:'#f0f0f0',minHeight:'100vh',}}>{/* 第一张卡片：关于 React */}<Cardtitle="React 是什么？"content="React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发。它采用组件化方式，让代码更易复用和维护。"imageUrl="https://react.dev/images/uwu.png"/>{/* 第二张卡片：关于 Vite */}<Cardtitle="Vite 的优势"content="Vite 是新一代前端构建工具，开发服务器启动极快，支持热模块替换（HMR），是现代 React 项目的首选。"imageUrl="https://vite.dev/logo-without-border.svg"/>{/* 你可以再加第三张试试！ */}</div>);}exportdefaultApp;

说明 ：

• 导入 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 风格。
• 图片顶部占满宽度，文字部分有舒适间距。
• 背景浅灰，卡片白色，视觉清晰。