English | 简体中文
imgcook for Visual Studio Code
A intelligent tool that converts design to code.
imgcook is an ingenious chef who specializes in cooking with various images (Sketch / PSD / static images). it will intelligently generate front-end codes, including view codes, data-binding codes, component codes as well as part of business logic codes from different kinds of design documents.
Our Website: https://www.imgcook.com
Features
Design to code
imgcook has no strict constraints and requirements on the design draft, but it can still make the reduction effect more friendly through some simple specifications. For example, divide the layers belonging to the same module into a group, and merge multiple drawings. Please refer to the basic specifications of the design draft for details.
After the plug-in is installed successfully, open the [content.Sketch] file, and click 「Plugins」 - 「imgcook」 - 「打开/关闭面板」 to call up the imgcook panel to assist visual adjustment.
Visual editing
In the imgcook visual editor, we can edit views, such as supporting dynamic expression styles, setting loops, and modifying layouts. You can also write logic code, bind fields, and more. It is recommended that you read the editor introduction before starting.
Generate code
Please click "save" before generating the code. If the page changes, the editor will also monitor and remind you. Click "导出" after saving to view.
From JSON description to code. We need to write DSL to analyze. We have official DSL. You can also customize DSL.
Learn more about imgcook
Getting Started
- Install the extension
- Right click on any folder in the VSCode file explorer and select 「Open With imgcook studio」 to start developing.
Using imgcook
You can right click on any folder in the VSCode file explorer and select 「Open With imgcook studio」 to start developing. Or alternatively, you can execute imgcook: Open With imgcook studio in the Command Palette to using imgcook in the current project.
To do a quick login, you can click the button 「点我输入 AccessId」 to enter the AccessId provided in the imgcook website.
Next, you can install our Sketch (or Photoshop) plugin from our website.
Once you have installed the plugin, you can export the sketch data and save it temporarily in the clipboard.
After successfully exporting the data, you need to paste it in the imgcook studio.
Here it is! The sketch is now completely transformed into managed imgcook format, and you can customize the styles, properties, or even events and data.
Once you have done with your work, you save the project in the current workspace (local folder).
By export the project, imgcook studio will elegantly generate a workable and readable code project for you.
For general help using imgcook, please refer to the documentation. For additional help, you can use one of these channels to ask a question:
DingTalk
- GitHub (Bug reports)
- Medium (Get blogs and articles)
- 知乎专栏 (Get blogs and articles in Simplified Chinese)
