React Tsx Hooks Snippets

React Tsx Hooks Snippets 是一个 VS Code 代码片段扩展，提供 React、React Hooks、Redux 和 TypeScript/TSX 常用模板。扩展支持 typescript 和 typescriptreact 文件。

功能特性

• 提供 React 函数组件、类组件、memo 组件和 PureComponent 模板。
• 提供 React 19 Hooks 片段：useState、useEffect、useActionState、useOptimistic、useTransition、useSyncExternalStore 等。
• 提供 Redux 常用片段：action、reducer、selector、useDispatch、useSelector、connect 类组件。
• 提供 TypeScript 导出片段：interface 和 type。
• 提供 AI 源码定位复制命令，一键复制文件路径、符号名、行号范围和代码片段。

使用方式

在 .ts 或 .tsx 文件中输入片段前缀，然后选择 VS Code 提示项并按 Tab 或 Enter 展开。

示例：

// 输入 rafcts 展开 React TSX 函数组件
const ${1:${TM_FILENAME_BASE}} = (props: Props) => {
  return (
    <div>
      $0
    </div>
  )
}

AI 源码定位复制

在编辑器中选中代码，或把光标放在目标行上，然后执行命令：

• 命令面板：Copy AI Source Reference
• macOS 快捷键：Cmd+Alt+S
• Windows/Linux 快捷键：Ctrl+Alt+S

命令会先保存当前文件，再复制适合粘贴给 AI agent 的 Markdown 文本：

File: src/components/UserCard.tsx
Symbol: UserCard
Kind: Function
Range: L12-L38

```tsx
const UserCard = ({ user }: Props) => {
  return <div>{user.name}</div>
}
```

符号信息来自 VS Code 的 Document Symbol Provider，可识别函数、类、方法、interface、type、变量和常见 React 组件。如果当前文件没有可用符号信息，会自动降级为 Unknown。

片段列表

React

Hooks

Redux 与 TypeScript

开发与构建

片段源码位于 example/ 目录，按 react/、redux/、typescript/ 分类。构建脚本 compiler.js 会读取示例文件中的元数据并生成 snippets/snippets.json。

npm run build

新增片段时，请在 example/ 下创建 .tsx 文件，并在文件顶部添加：

// @name: SnippetName
// @prefix: prefix
// @description: Snippet description

随后运行 npm run build，并在 VS Code Extension Host 中验证展开效果。

English

React Tsx Hooks Snippets is a VS Code snippets extension for React, React Hooks, Redux, and TypeScript/TSX. It contributes snippets to both typescript and typescriptreact files.

Features

• React component templates for function components, class components, memo components, and PureComponent.
• React 19 Hooks snippets, including useState, useEffect, useActionState, useOptimistic, useTransition, and useSyncExternalStore.
• Redux snippets for actions, reducers, selectors, useDispatch, useSelector, and connected class components.
• TypeScript export snippets for interface and type.
• AI source reference command for copying file paths, symbols, line ranges, and code blocks for AI agents.

Usage

Type a snippet prefix in a .ts or .tsx file, then select the VS Code suggestion and press Tab or Enter.

Common prefixes:

• React components: rafcts, rfcts, rfmcts, rccts, rcpcts
• Hooks: uss, use, usle, uscb, usmm, usref, usctx, usrdcer, usactst, usopt, ustrs
• React 19 / DOM hooks: usdfrv, useevt, usid, usinsfx, ussxstr, usfmsts
• Redux: rdxact, rdxrdcer, rdxsltor, usdpch, ussltor
• TypeScript: expinf, exptp

AI Source Reference

Select code, or place the cursor on a target line, then run:

• Command Palette: Copy AI Source Reference
• macOS: Cmd+Alt+S
• Windows/Linux: Ctrl+Alt+S

The command saves the current file, then copies Markdown with the workspace-relative file path, nearest symbol, symbol kind, line range, and code block. Symbol detection uses VS Code's Document Symbol Provider and falls back to Unknown when symbol data is unavailable.

Development

Snippet sources are stored in example/. Run the build command to regenerate snippets/snippets.json:

npm run build

To add a snippet, create a .tsx file under the relevant example/ subdirectory, include the @name, @prefix, and @description comments, then rebuild and test the prefix in the VS Code Extension Host.