English | 简体中文

Component Helper

Use Component and Write Props easier, friendly for React/Vue/Rax.

JS Project Automatic Completion

• React: Automatic completion for your custom component props in JS Project.

• Rax: Automatic completion for your custom component and rax-components props in JS Project.

Pages and Components

Jump into corresponding pages and components:

1. Click items in PAGES and COMPONENTS on the left panel.
2. Jump into files of selected projects.

Activate Generate Page and Create Component:

1. Click + in PAGES header to jump into GENERATE PAGE page.
2. Click + in COMPONENTS header to jump into CREATE COMPONENT page.

Using Material Panel

1. Click src/pages/*/index.tsx in the resource panel to open a page.
2. Open VS Code command palette through Ctrl+Shift+P or ⇧⌘P, enter AppWorks: Import Component to activate Material Panel.
3. Move cursor to a position for materials.
4. Search the block materials, click the material to be used, and the material code will be automatically added to the corresponding position.
5. Search for component materials. Click the material to be used, and the material code will be automatically added to the corresponding position.

Generate Page by Blocks

Through GUI, you can quickly assemble pages with materials.

1. Open vscode command palette by Ctrl+Shift+P or ⇧⌘P .
2. In the command palette, type AppWorks: Generate Page by Blocks and click on the selected item or press enter on the keyboard to evoke page-builder extension.
3. Select the block to be used for the page from the block list on the right, click to add it to the page preview area on the left.
4. Rearrange blocks by dragging and dropping the order of the blocks in the left page preview area, or delete blocks by clicking icons in the upper right corner.
5. Click Generate page button to generate page code. Input the page name and the router path and then click ok button. The page code will be generated into 'src /pages/'

Download Component Materials

Provides a huge amount of high quality materials for React、Vue and Rax apps. You can select materials to create components.

1. Through (Ctrl+Shift+P or ⇧⌘P) evoke vscode command palette
2. In the vscode command palette, enter AppWorks: Download Component Materials, click the selected item or press enter to arouse the plugin;
3. Fill in the component name (also the folder name of the componenent)
4. Select a material below.
5. Click Create component button to generate component code.

Component Document Support

1. Right Click in a Jsx File Editor, choose AppWorks: Find Components In Current File.
2. Search the component label for the document you need to find
3. Click the item that appears after activation
4. Confirm to open component document link

You can choose whether to open the document link in VS Code, which depends on the extension Browser Preview. If you want to open the document page in VS Code, install Browser Preview first.

Props Autocomplete

When editing the props of a component in a JSX file, an automatic completion reminder will be given:

1. Use materials in JSX files (such as View).
2. Enter part of props in the material tag, it will arouse automatic completion.

Auto fill React/Rax Code to File

After created a folder or file, automatically create the index.j[t]sx file and complete the code snippet.

More

This Extension power by AppWorks Team, it's part of the AppWorks, see AppWorks to know more features.