这个 VS Code 插件让我的 AI Coding 又快又稳 - 旧瓶装新酒

几年前我写过一篇《造个 vscode 插件让工作不再 996》，当时的核心想法很简单：通过快捷键能把几个高频用的代码块快速输出。所以我做了一个 snippets 插件，把常用组件、Hooks、Redux 模板变成几个短前缀。比如输入 rafcts，快速生成一个 TypeScript React 函数组件。

这个思路到现在依然有用，AI Coding 时代来了以后，我发现另一个更高频、更隐形的痛点出现了：

写代码不只是"生成代码"慢，给 AI 准确描述代码位置也很慢。

和 AI 协作时，最烦的不是提问，而是定位

现在很多开发者都会把 Cursor、Claude Code、Codex、ChatGPT 或其他 AI agent 当作开发搭子。

但只要项目稍微复杂一点，我们经常会这样描述问题，路径长了还得手动去vscode复制路径：

你看一下 src/components/UserCard.tsx 里面那个处理保存的函数，大概在 30 多行附近，有个 showWarningMessage 的地方，我想调整一下逻辑......

这句话人能懂，AI 也能懂，但是AI会花大量的时间去通过bash操作grep，找到包含UserCard关键词的代码，然后再一步步定位具体代码

如果同一个文件里有多个相似函数、多个同名变量、多个保存逻辑，AI 很容易问你：

你说的是哪一段？

于是你又要手动复制：

文件路径
函数名
行号
相关代码
有时候还要解释这是 class、function、method、type 还是 interface

这些动作本身没什么技术含量，但非常打断思路，而且AI思考太久以后影响效率。

所以我给原来的插件加了一个新功能：一键复制源码定位信息。

新功能：Copy AI Source Reference

现在，在 VS Code 里选中一段代码，或者把光标放在某一行，然后按快捷键：

macOS：Cmd + Alt + S
Windows / Linux：Ctrl + Alt + S

插件会先保存当前文件，然后复制一段适合发给 AI agent 的 Markdown 文本：

vbnet 复制代码

File: src/extension.ts
Symbol: copyAiSourceReference
Kind: Function
Range: L30

```ts
vscode.window.showWarningMessage('Could not save the current document.');
```

这段信息包含了 AI 最需要的几个坐标：

File：文件相对路径
Symbol：当前代码所在的函数、类、方法、变量或类型名
Kind：Symbol 类型，比如 Function、Class、Method、Interface、Variable
Range：代码所在行号范围
代码块：真实代码内容

把这段直接粘给 AI，它基本可以马上知道你在说哪里。

效果也很好，上面代码的精准定位，让AI也感觉非常好用，思考的速度大大降低。

Symbol 有什么用？

很多时候，只给行号还不够。

比如：

makefile 复制代码

Range: L30

这只能告诉 AI 是第 30 行。

但如果加上：

vbnet 复制代码

Symbol: copyAiSourceReference
Kind: Function

AI 就知道这行代码属于 copyAiSourceReference 这个函数。它不仅能定位，还能理解上下文。

这对大型文件尤其重要。一个文件里可能有几十个函数、多个 React component、多个 hook、多个类型声明。Symbol 就像一个"语义坐标"，能把代码从"某一行"提升到"某个逻辑单元"。

它和普通复制代码有什么区别？

普通复制代码只解决"内容"问题。

这个功能解决的是"上下文"问题。

比如你只复制：

vbnet 复制代码

vscode.window.showWarningMessage('Could not save the current document.');

AI 只能猜：这是哪里？保存什么？失败后还有没有 return？

但如果复制的是：

vbnet 复制代码

File: src/extension.ts
Symbol: copyAiSourceReference
Kind: Function
Range: L30

```ts
vscode.window.showWarningMessage('Could not save the current document.');
```

AI 就能知道：

这是 src/extension.ts 里的代码
它在 copyAiSourceReference 函数中
它处理的是保存失败提示
它位于第 30 行

这会明显减少来回解释。

旧功能也升级了：React 19 Hooks snippets

除了源码定位复制，我也顺手把原来的 React Hooks snippets 补到了 React 19。

现在包含：

useState
useEffect
useContext
useReducer
useRef
useMemo
useCallback
useTransition
useDeferredValue
useId
useOptimistic
useActionState
useSyncExternalStore
useInsertionEffect
useEffectEvent
useFormStatus

常用前缀例如：

前缀	展开内容
`rafcts`	React TSX 箭头函数组件
`uss`	`useState`
`use`	`useEffect`
`ustrs`	`useTransition`
`rdxact`	Redux action
`expinf`	export interface

也就是说，它依然是一个 React snippets 插件，但现在多了一个更适合 AI Coding 的源码协作能力。

简单说一下实现

这个功能本身并不复杂，主要用了 VS Code Extension API：

vscode.window.activeTextEditor 获取当前编辑器
document.save() 先保存当前文件
editor.selection 获取选区
document.getText(range) 获取代码
vscode.workspace.asRelativePath() 获取相对路径
vscode.commands.executeCommand('vscode.executeDocumentSymbolProvider') 获取当前文件的符号信息
vscode.env.clipboard.writeText() 写入剪贴板

关键点是 Document Symbol Provider。

VS Code 本身已经知道一个文件里有哪些函数、类、方法、interface、type、变量。插件只需要拿到这些 symbol，再根据当前光标位置找到"最小包含范围"的那个 symbol，就能判断当前代码属于哪个逻辑单元。

如果当前语言没有 symbol 信息，也不会报错，只会降级成：

makefile 复制代码

Symbol: Unknown
Kind: Unknown

适合哪些场景？

我现在主要在这些场景里用它：

选中函数里关键几行，一键复制，直接发给 AI。
复制报错附近代码，带上文件路径和函数名，AI 更容易推断上下文。
VS Code 里复制，粘到 ChatGPT、Claude、Codex、飞书文档、Issue 或 PR 评论里。

为什么快捷键是保存？

我把快捷键设计成：

macOS：Cmd + Alt + S
Windows / Linux：Ctrl + Alt + S

一方面是因为 S 代表 Save，比较好记。

另一方面，这个命令确实会先保存文件。这样给 AI 的代码和磁盘上的源码是一致的，不会出现"我复制的是未保存状态，AI 读到的是旧文件"的问题。

这个小细节在使用 agent 修改本地项目时挺重要。

安装和使用

插件名暂时还是：React Tsx Hooks Snippets

如果你已经安装旧版本，可以直接升级。

使用方式：

基础功能：输入 snippet 前缀，比如 rafcts、uss
把光标放在目标代码上，按 Cmd + Alt + S / Ctrl + Alt + S
把复制出来的上下文粘给 AI agent

最后

以前做 snippets，是为了少敲重复代码，现在加 source reference，是为了少解释重复上下文。

AI Coding 让"写代码"变快了，但"准确告诉 AI 你在说哪段代码"也变成了新的效率入口。这个插件就是把这件小事做成一个快捷键。

如果你也经常在 VS Code 和 AI agent 之间来回切换，可以试试看。它不复杂，但很顺手。

参考文章📚：

造个 vscode 插件让工作不再 996