VS Code Snippets
这是一个为 React、TypeScript、Material-UI 和 Markdown 开发者准备的实用代码片段集合。
特性
这个扩展提供了以下常用的代码片段：
React 相关
rfc - 创建 React 函数组件us - 创建 useState Hookue - 创建 useEffect Hook
TypeScript 相关
int - 创建 TypeScript 接口type - 创建 TypeScript 类型定义
Material-UI (notistack) 相关
mui-snackbar-import - 导入 useSnackbar Hookmui-use-snackbar - 使用 useSnackbar Hookmui-snackbar - 显示 Snackbar 通知消息
Markdown 相关
md-table - 创建 Markdown 表格
使用方法
- 在 VS Code 中安装此扩展
- 打开一个 TypeScript (.ts)、TypeScript React (.tsx) 或 Markdown (.md) 文件
- 输入上述任一触发词（如
rfc）
- 按
Tab 键或 Enter 键来展开代码片段
代码片段详情
React 函数组件 (rfc)
import React from 'react';
interface ComponentNameProps {
}
export const ComponentName: React.FC<ComponentNameProps> = (props) => {
return (
<div>
</div>
);
};
useState Hook (us)
const [state, setState] = useState<type>();
useEffect Hook (ue)
useEffect(() => {
}, []);
TypeScript 接口 (int)
interface InterfaceName {
}
TypeScript 类型 (type)
type TypeName = {
};
Material-UI Snackbar 导入 (mui-snackbar-import)
import { useSnackbar } from 'notistack';
Material-UI useSnackbar Hook (mui-use-snackbar)
const { enqueueSnackbar } = useSnackbar();
Material-UI Snackbar 通知 (mui-snackbar)
enqueueSnackbar('message', { variant: 'default|error|success|warning|info' });
Markdown 表格 (md-table)
| 列1 | 列2 | 列3 |
| --- | --- | --- |
| 内容1 | 内容2 | 内容3 |
| 内容4 | 内容5 | 内容6 |
完整代码片段列表
| 触发前缀 |
代码片段名称 |
描述 |
使用场景 |
rfc |
React Functional Component |
创建 React 函数组件 |
快速生成带 TypeScript 接口的函数组件模板 |
us |
useState Hook |
React useState Hook |
快速创建状态变量和更新函数 |
ue |
useEffect Hook |
React useEffect Hook |
创建副作用处理函数 |
int |
TypeScript Interface |
TypeScript 接口定义 |
定义对象类型结构 |
type |
TypeScript Type |
TypeScript 类型定义 |
创建类型别名 |
mui-snackbar-import |
Mui-Snackbar |
导入 Material-UI Snackbar |
导入 notistack 的 useSnackbar Hook |
mui-use-snackbar |
Mui-Snackbar-useSnackbar |
使用 Snackbar Hook |
在组件中获取 enqueueSnackbar 函数 |
mui-snackbar |
Mui-enqueueSnackbar |
显示通知消息 |
调用 Snackbar 并选择消息类型 |
md-table |
Markdown Table |
创建 Markdown 表格 |
在 Markdown 文件中快速创建表格 |
安装
您可以通过以下方式安装此扩展：
- 在 VS Code 中打开扩展面板 (Ctrl+Shift+X)
- 搜索 "VS Code Snippets"
- 点击安装
贡献
欢迎提交 Issue 和 Pull Request 来帮助改进这个扩展。
许可证
MIT
