跳转与定义 #

┌─────────────────────────────────────────────────────────────┐
│                     代码跳转类型                              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  跳转到定义  │  │  查看引用    │  │  查看实现    │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│                                                             │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  类型定义    │  │  查看声明    │  │  快速预览    │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│                                                             │
└─────────────────────────────────────────────────────────────┘

// 在这里调用函数
greet('Alice');

// 光标放在 greet 上，按 F12
// 跳转到函数定义

function greet(name) {
    console.log(`Hello, ${name}!`);
}

在 Windows/Linux 上：
按住 Ctrl 点击符号 → 跳转到定义

在 Mac 上：
按住 ⌘ 点击符号 → 跳转到定义

// 定义变量
const userName = 'Alice';

// 引用 1
console.log(userName);

// 引用 2
return userName;

// 引用 3
updateUser(userName);

// 光标放在 userName 上，按 ⇧F12 / Shift+F12
// 显示所有引用位置

// 定义接口
interface User {
    name: string;
    age: number;
}

// 使用接口
const user: User = {
    name: 'Alice',
    age: 25
};

// 光标放在 User 上，按 ⌘F12 / Ctrl+F12
// 跳转到接口定义

// 定义接口
interface Animal {
    speak(): void;
}

// 实现 1
class Dog implements Animal {
    speak() {
        console.log('Woof!');
    }
}

// 实现 2
class Cat implements Animal {
    speak() {
        console.log('Meow!');
    }
}

// 光标放在 Animal 上，按 ⌘F12 / Ctrl+F12
// 显示所有实现类

Peek 窗口打开后：
• 按 Esc 关闭窗口
• 按 Enter 跳转到定义
• 使用 ↓ ↑ 导航多个引用

声明：告诉编译器符号的存在
定义：提供符号的具体实现

示例（C/C++）：
// 声明
void greet();

// 定义
void greet() {
    printf("Hello!\n");
}

1. 从文件 A 跳转到文件 B（F12）
2. 从文件 B 跳转到文件 C（F12）
3. 按 ⌃- / Alt+← 返回文件 B
4. 再按 ⌃- / Alt+← 返回文件 A

// 原始代码
const userName = 'Alice';
console.log(userName);

// 光标放在 userName 上，按 F2
// 输入新名称 "memberName"

// 重命名后
const memberName = 'Alice';
console.log(memberName);

场景：理解函数的实现逻辑

步骤：
1. 光标放在函数名上
2. 按 F12 跳转到定义
3. 阅读函数实现
4. 按 ⌃- / Alt+← 返回

场景：查找变量在哪些地方被使用

步骤：
1. 光标放在变量名上
2. 按 ⇧F12 / Shift+F12 查看引用
3. 查看所有使用位置
4. 按 Esc 关闭引用列表

场景：查看接口有哪些实现

步骤：
1. 光标放在接口名上
2. 按 ⌘F12 / Ctrl+F12 查看实现
3. 查看所有实现类
4. 选择要查看的实现

┌─────────────────────────────────────────────────────────────┐
│                     代码跳转流程                              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  需要理解代码                                                │
│     │                                                       │
│     ├─────▶ 查看定义？                                       │
│     │           │                                           │
│     │           ├─ 是 ─▶ F12 跳转                           │
│     │           │        或 ⌥F12 / Alt+F12 预览             │
│     │           │                                           │
│     │           └─ 否 ─▶ 查看引用？                          │
│     │                      │                                │
│     │                      ├─ 是 ─▶ ⇧F12 / Shift+F12       │
│     │                      │                                │
│     │                      └─ 否 ─▶ 查看实现？               │
│     │                                     │                 │
│     │                                     └─ ⌘F12 / Ctrl+F12│
│     │                                                       │
│     └─────▶ 返回上一位置                                     │
│                │                                            │
│                └─▶ ⌃- / Alt+←                              │
│                                                             │
└─────────────────────────────────────────────────────────────┘

1. 打开一个项目
2. 找到函数调用
3. 使用 F12 跳转到定义
4. 使用 ⌃- / Alt+← 返回

1. 找到一个变量或函数
2. 使用 ⇧F12 / Shift+F12 查看引用
3. 浏览所有引用位置
4. 使用 ⌥F12 / Alt+F12 预览

1. 找到要重命名的变量
2. 使用 F2 重命名
3. 观察所有引用自动更新