# apusic-ui-snippets

**Repository Path**: apusic-frontend/apusic-ui-snippets

## Basic Information

- **Project Name**: apusic-ui-snippets
- **Description**: 一个用于快捷生成代码片段的vscode插件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-11-29
- **Last Updated**: 2025-02-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# apusic-ui-snippets

一个用于收集可重复使用的代码模板，并在开发阶段根据关键字快速生成代码片段的vscode插件。

## usage

| Tab trigger | Description | Params | Module type |
|-----------|-----------|-----------|--------|
| aui.snp.crud | request crud | $axios | .ts |
| aui.snp.modal | modal and form | react,bellejs | .ts |
| aui.snp.schart | chart | react,echarts-for-react,echarts | .ts |
| aui.snp.component-template | functional template | $1, $2 | .tsx |
| aui.snp.table-page-template | functional template with table | $1, $2, $3, $4| .tsx | 
| aui.snp.modal-confirm | Create a Modal confirm | $0| .tsx |

  1. 安装本vscode插件；
  2. 键入上表中的Tab trigger关键字；
  3. 生成snippet代码；
  4. 基于样例代码进行业务开发。

## dev & debug & package

### dev
  1.  在/snippets文件夹中创建.code-snippet模块并编写配置；[vscode snippets语法参考](https://code.visualstudio.com/docs/editor/userdefinedsnippets)
  2.  在package.json的contributes中进行导入。

### debug
  在vscode编辑器中按下按键 `F5` 即可打开调试模式。

### package
  执行打包命令 `vsce package` 即可打包出后缀为".vsix"的vscode插件。

## etc

代码片段生成工具可参考：
  * https://snippet-generator.app/
  * https://vscode-snippets-generator.netlify.app/