UI2Code 的 VSCode 扩展插件

描述

UI2Code 的 VSCode 扩展插件提供了以下功能：

1. 和 PC 端的 UI2Code 共享聊天内容（待完善）。
2. 根据 UI 图片生成符合业务规范的代码。

安装

1. 下载 ui2code-vscode-extension-0.0.1.vsix 文件。
2. 在 VS Code 中，打开扩展管理器。
3. 点击 ... 按钮，选择 Install from VSIX...。
4. 选择下载的 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 配置文件

开发步骤

1. 克隆仓库

git git@git.lianjia.com:wujiawen009/ui2code-vscode-extension.git
cd ui2code-vscode-extension

2. 安装依赖

npm install

3. 启动开发环境

npm run watch

4. 调试 & 预览

使用 vscode 的运行和调整功能，点击 Run Extension 按钮，即可打开一个新的 vscode 运行插件

5. 代码提交

git add .
git commit -m "描述你的更改"
git push origin your-branch

许可证

待补充