ReactLynx Snippets
ReactLynx Snippets 是一个 VSCode 扩展，提供了一系列用于 React 和 Lynx 开发的代码片段，并提供了管理这些代码片段的工具。
功能特性
- 自动配置代码片段
- 管理代码片段文件（打开、编辑、重置、删除）
- 创建新的代码片段
- 修改后自动刷新代码片段
- 支持 TypeScript React 和 SCSS 文件
可用的代码片段
| 代码片段名称 |
前缀 |
描述 |
生成的代码 |
| init-reactLynx-page |
lyp |
初始化reactLynx页面 |
导入样式文件和必要的模块，定义页面的Props和State接口，并给出一个基本的页面组件模板。 |
| init-reactLynx-component |
lyc |
初始化reactLynx组件(文件夹为组件名, 文件为index.tsx) |
导入样式文件和必要的模块，定义组件的Props和State接口，并给出一个基本的组件模板。 |
| init-reactLynx-view |
lyv |
初始化一个带类名的view |
创建一个<view>标签，并包含类名和内容占位符。 |
| init-reactLynx-text |
lyt |
初始化一个带类名的text |
创建一个<text>标签，并包含类名和内容占位符。 |
| init-reactLynx-image |
lyi |
初始化一个带若干属性和事件的image |
创建一个<image>标签，包含类名、src属性、加载和错误事件处理器，以及其他一些默认设置。 |
| init-reactLynx-scrollview |
lys |
初始化一个带若干属性和事件的scrollview |
创建一个<scroll-view>标签，包含类名、滚动方向、滚动事件处理器、默认启用滚动以及其他一些默认设置。 |
| reactLynx-createSelectorQuery-fields |
lysf |
获取指定节点信息 |
使用createSelectorQuery选择节点，并获取其id、dataset和tag字段。 |
| reactLynx-createSelectorQuery-setNativeProps |
lysn |
设置指定节点的属性 |
使用createSelectorQuery选择节点，并设置其指定属性。 |
| reactLynx-createSelectorQuery-boundingClientRect |
lysb |
获取指定节点的边界信息 |
使用createSelectorQuery选择节点，并获取其边界信息，如宽度、高度、位置等。 |
| reactLynx-selectComponent |
lysc |
获取子组件 |
使用selectComponent选择子组件，并打印其内容。 |
| bridge-reactLynx-openSchema |
lyos |
打开指定schema |
调用NativeModules.bridge.call方法打开指定的schema。 |
| lynx-requestAnimationFrame |
lyraf |
requestAnimationFrame |
使用requestAnimationFrame方法执行动画帧，并提供取消动画帧的方法。 |
SCSS 代码片段
| 前缀 |
描述 |
用途 |
lycs |
初始化 Lynx 组件 SCSS |
创建一个基本的 SCSS 文件 |
使用方法
使用代码片段
- 在 TypeScript React (.tsx) 或 SCSS (.scss) 文件中输入代码片段前缀
- 按下
Tab 键或选择弹出的代码片段
- 代码片段将被插入到文件中，并且可以使用 Tab 键在占位符之间导航
管理代码片段
- 打开命令面板 (
Ctrl+Shift+P 或 Cmd+Shift+P)
- 输入 "ReactLynx Snippets" 查看可用命令
- 选择以下命令之一：
ReactLynx Snippets: 配置代码片段 - 打开代码片段管理器ReactLynx Snippets: 创建新代码片段 - 创建新的代码片段文件ReactLynx Snippets: 刷新代码片段 - 刷新代码片段以应用更改
代码片段管理器
代码片段管理器提供以下功能：
- 打开 - 在编辑器中打开代码片段文件
- 刷新 - 刷新代码片段以应用更改
- 重置 - 将代码片段重置为原始状态
- 删除 - 删除代码片段文件
- 创建新代码片段 - 创建新的代码片段文件
自定义代码片段
您可以通过以下步骤自定义代码片段：
- 使用代码片段管理器打开代码片段文件
- 编辑代码片段文件（JSON 格式）
- 保存文件
- 点击提示中的 "刷新" 按钮或使用命令面板中的 "刷新代码片段" 命令
代码片段格式
代码片段使用以下格式：
{
"snippet-name": {
"prefix": "触发前缀",
"scope": "适用的文件类型",
"description": "代码片段描述",
"body": [
"代码片段内容，每行一个字符串",
"可以使用 $1, $2 等作为占位符",
"$0 表示最终光标位置"
]
}
}
变量支持
代码片段支持以下 VSCode 变量：
${TM_FILENAME} - 当前文件名${TM_FILENAME_BASE} - 当前文件名（不含扩展名）${TM_DIRECTORY} - 当前文件所在目录${TM_FILEPATH} - 当前文件的完整路径
问题反馈
如果您遇到任何问题或有改进建议，请在 GitHub 仓库中提交 issue。
许可证
MIT
| |
