UI2Code 的 VSCode 扩展插件
描述
UI2Code 的 VSCode 扩展插件提供了以下功能:
- 和 PC 端的 UI2Code 共享聊天内容(待完善)。
- 根据 UI 图片生成符合业务规范的代码。
安装
- 下载
ui2code-vscode-extension-0.0.1.vsix 文件。
- 在 VS Code 中,打开扩展管理器。
- 点击
... 按钮,选择 Install from VSIX... 。
- 选择下载的
ui2code-vscode-extension-0.0.1.vsix 文件进行安装。
贡献
项目目录结构
ui2code-vscode-extension/
├── .gitignore # Git 忽略文件列表
├── .vscode/ # VSCode 配置文件
│ ├── extensions.json # 推荐的 VS Code 扩展列表
│ ├── launch.json # 调试配置文件
│ ├── settings.json # 工作区级别的设置
│ └── tasks.json # 任务运行配置
├── .vscodeignore # VS Code 扩展打包忽略文件
├── CHANGELOG.md # 项目变更日志
├── package.json # 项目配置文件
├── public/ # 公共资源目录
├── README.md # 项目说明文件
├── LICENSE.md # 许可证文件
├── src/ # 源代码目录
│ ├── apis/ # API 相关代码
│ │ ├── chat/ # 聊天相关 API
│ │ ├── index.ts # API 入口文件
│ │ ├── login/ # 登录相关 API
│ │ └── routes/ # 路由相关代码
│ ├── commands/ # 命令相关代码
│ │ └── index.ts # 命令入口文件
│ ├── components/ # 组件目录
│ │ ├── Chat/ # 聊天组件
│ │ ├── ChatContainer/ # 聊天容器组件
│ │ ├── Code/ # 代码组件
│ │ ├── HelloWorld/ # 示例组件
│ │ └── ... # 其他组件
│ ├── constants/ # 常量目录
│ │ └── ... # 常量定义文件
│ ├── db/ # 数据库相关代码
│ ├── extension.ts # 扩展的入口文件
│ ├── global.d.ts # 全局类型定义文件
│ ├── hooks/ # 自定义 Hook 目录
│ ├── index.less # 全局样式文件
│ ├── index.tsx # 项目入口文件
│ ├── store/ # 状态管理目录
│ ├── types/ # 类型定义目录
│ └── utils/ # 工具函数目录
├── tsconfig.json # TypeScript 配置文件
├── vsc-extension-quickstart.md # VS Code 扩展快速入门指南
├── vscode.d.ts # VS Code 类型定义文件
└── webpack.config.js # Webpack 配置文件
开发步骤
- 克隆仓库
git git@git.lianjia.com:wujiawen009/ui2code-vscode-extension.git
cd ui2code-vscode-extension
- 安装依赖
npm install
- 启动开发环境
npm run watch
- 调试 & 预览
使用 vscode 的运行和调整功能,点击 Run Extension 按钮,即可打开一个新的 vscode 运行插件
- 代码提交
git add .
git commit -m "描述你的更改"
git push origin your-branch
许可证
待补充
| |