1
2
3
4
5
6
7

# 输入以下简写，按 Tab 键，自动生成代码！
rfc         -> React 函数组件（最常用！）
rcc         -> React Class 组件（Class 组件写法）
rsc         -> React 箭头函数组件
useState    -> React Hook: useState
useEffect   -> React Hook: useEffect
useRef      -> React Hook: useRef

1
2
3
4
5
6
7
8
9

import React from 'react';

export default function MyComponent() {
  return (
    <div>
      <h1>MyComponent</h1>
    </div>
  );
}

1
2

// 你想把 <div className="container"> 改成 <main className="container">
// 只需要改开始标签 <div> -> <main>，结束标签 </div> 会自动变成 </main>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// 1. 未使用的变量
const unused = '我是没用的变量';  // ESLint 会警告：unused 变量
console.log('Hello');

// 2. 缩进不规范
function bad() {
 console.log('缩进错误');  // ESLint 会要求统一用 2 空格缩进
}

// 3. 危险的 == 用法
if (value == 1) { }  // ESLint 建议用 === 替代 ==

1
2

npm install -D eslint
npx eslint --init  # 初始化 ESLint 配置，生成 .eslintrc.cjs 文件

1
2
3

// 这行代码有问题，Error Lens 会在这行末尾直接显示：
// Expected '===' and instead saw '=='.eslint(eqeqeq)
if (value == 1) { }

1
2
3
4
5

imr     -> import React from 'react'           # React 导入语句
imrn    -> import React, { useState } from 'react'  # React + Hooks 导入
ffc     -> React 箭头函数组件（无状态）
usf     -> useState 的完整写法
udf     -> useEffect 的完整写法

1
2
3
4

Ctrl + P        # 快速打开文件（输入文件名，不用记完整路径）
Ctrl + Tab     # 切换到上一个打开的文件
Ctrl + W        # 关闭当前文件
Ctrl + K + S   # 打开快捷键设置（查看所有快捷键）

1
2
3
4
5

Ctrl + Shift + P   # 打开命令行面板，输入命令名称执行
# 常用命令示例：
# "Format Document"      -> 格式化当前文件
# "Toggle Terminal"       -> 显示/隐藏终端
# "Git: Pull"            -> 执行 Git Pull

1
2

Ctrl + `        # 显示/隐藏内置终端（` 是 Tab 键上面的那个反引号）
Ctrl + Shift + ` # 新建一个终端窗口

1
2
3
4
5

Ctrl + B        # 显示/隐藏左侧资源管理器（Explorer）
Ctrl + Shift + E  # 聚焦资源管理器
Ctrl + Shift + G  # 打开 Git 源代码管理面板
Ctrl + Shift + X  # 打开扩展（Extensions）面板
Ctrl + Shift + F   # 全局搜索（Search）面板

1
2
3
4
5
6

Ctrl + /        # 注释/取消注释当前行（或者选中的多行）
Alt + ↑ / ↓     # 将当前行向上/向下移动
Shift + Alt + ↑ / ↓  # 向上/向下复制当前行
Ctrl + D        # 选中下一个相同的内容（多光标编辑必备）
Alt + 单击       # 在多处创建光标（多光标编辑）
Ctrl + Shift + L  # 选中所有相同的内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

{
  "React Functional Component with PropTypes": {
    "prefix": "rfcp",           // 触发词，输入 rfcp 按 Tab
    "body": [
      "import React from 'react';",
      "import PropTypes from 'prop-types';",
      "",
      "function ${1:MyComponent}({ $2 }) {",
      "  return (",
      "    <div className=\"${TM_FILENAME_BASE}\">",
      "      $3",
      "    </div>",
      "  );",
      "}",
      "",
      "${1:MyComponent}.propTypes = {",
      "  $2: PropTypes.",
      "};",
      "",
      "export default ${1:MyComponent};"
    ],
    "description": "React 函数组件 + PropTypes"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",           // 配置名称
      "type": "chrome",                 // 调试器类型
      "request": "launch",              // launch=启动新浏览器，attach=附加到已有浏览器
      "url": "http://localhost:5173",   // 你的开发服务器地址
      "webRoot": "${workspaceFolder}",  // 项目根目录
      "sourceMaps": true,               // 启用 Source Map（方便调试压缩后的代码）
      "preLaunchTask": "npm: dev"       // 调试前先运行 dev 任务（启动开发服务器）
    },
    {
      "name": "Attach to Chrome",        // 附加到已打开的浏览器
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:5173",
      "port": 9222,                     // Chrome 调试端口
      "webRoot": "${workspaceFolder}"
    }
  ]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "npm: dev",       // 这个名字要和 launch.json 里的 preLaunchTask 对应
      "type": "npm",
      "script": "dev",
      "isBackground": true,      // 后台运行，不阻塞调试过程
                               // 设置为 true 时，VS Code 不会等任务"结束"（因为 dev 服务器永远不停止）
                               // 而是让它在后台运行，这样开发服务器和调试器可以同时工作
      "problemMatcher": {
        "owner": "custom",
        "pattern": {
          "regexp": "^$"          // 匹配空行（后台任务不需要匹配错误）
                                   // "^$" 匹配空字符串，意味着永远不匹配任何内容
                                   // 这样即使服务器持续输出日志，VS Code 也不会误认为是错误
        },
        "activeForm": "starting dev server..."
      },
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

1
2
3
4
5
6
7
8

// 1. 在代码行号左侧点击，添加断点（红色圆点）
function calculateTotal(items) {
  const total = items.reduce((sum, item) => {
    debugger;  // 2. 或者直接在代码里写 debugger，程序会在这一行暂停
    return sum + item.price;
  }, 0);
  return total;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// 假设有这样一个组件树
<App>
  <Navbar>
    <Logo />
    <Menu items={[...]} />
  </Navbar>
  <Main>
    <UserCard user={{ name: '张三', age: 25 }} />
    <PostList posts={[...]} />
  </Main>
</App>

// 在 React DevTools Components 面板里：
// 1. 点击 <UserCard> 组件，右侧面板显示 props: { user: { name: '张三', age: 25 } }
// 2. 点击 state 字段，可以实时修改 state 值（会实时反映到页面上！）
// 3. 点击 "Highlight updates" 按钮，渲染的组件会闪烁高亮，方便你找出不必要的重渲染