HLSnippets

Using this extensions, you can generate all kinds of template code. Hope you like it!

English Document | 中文文档

Features

• support create data model from service interface;
• fix HLComponentTable Snippets placeholder;
• add QueryCondition snippet;
• move the other snippet from HLContainerSnippets.json to HLSnippets.json
• add checkbox group formItem and radio group formItem
• add submitAutoMessage snippet

Installation

Install through VS Code extensions. Search for HLSnippets

Visual Studio Code Market Place: HLSnippets

Usage

These extends includes three types of snippets:

• Container Snippets, create page template code in blank file.
• Component Snippets, create component template code in a page.
• Creator(Create) Snippets, create some special template code in all kinds of file, like store, service, etc.

According these snippets categories, HLSnippets defined the snippet instruction with prefix + scope + type.

Simple Example

When I want to write a new page, I will create jsx file in the workspace and open the file. Then write HLContainerPage and tab the tips, so the page template code will show on the file.

Let's learn the instruction rule by this example, as we just done before, we create a file and tag a instruction named HLContainerPage. The Prefix of this instruction here is HL, and all the Prefix call HL permanent. And go on we see the Scope called Container, byt the way, other two Scopes is Component and Create. Final part of the instruction is Type, which the specific function you want to do. The type of HLContainerPage is Page means you will generate the page template code in the file.

All Snippets List

The table below list all the snippets and instruction.

Container Snippets:

Snippets Name	Instruction
HLContainerPage	generate page template code
HLContainerFormConfig	generate form config template code
HLContainerTableColumns	generate table Columns template code
HLContainerFormField	generate formField template code
HLContainerQueryConditionsConfig	generate QueryCondition config template code
HLContainerStore	generate observable store template code

Component Snippets

Snippets Name	Instruction
HLComponentForm	generate form template code
HLComponentModal	generate modal template code
HLComponentQRCoe	generate QRCode template code
HLComponentTable	generate table template code
HLComponentSelectTable	generate selectable template code
HLComponentQueryConditions	generate QueryConditions template code
HLComponentBaiduMap	generate BaiduMap template code
HLComponentPrint	generate Print template code

Creator Snippets

Service Creator Snippets:

Snippets Name	Instruction
HLCreateGetService	generate get service template code
HLCreatePostService	generate post service template code

Table Creator Snippets:

Snippets Name	Instruction
HLCreateTableColumnsItem	generate table columns item template code

Form Field Creator Snippets:

Snippets Name	Instruction
HLCreateFormFieldRule	generate form field rule template code
HLCreateFormFieldExtendRule	generate form field extend rule template code
HLCreateTextFormField	generate text form field template code
HLCreateInputFormField	generate input form field template code
HLCreateSwitchFormField	generate switch form field template code
HLCreateNumberInputFormField	generate numberInput form field template code
HLCreateMultipleSelectFormField	generate multipleSelect form field template code
HLCreateSelectPageFormField	generate selectPage form field template code
HLCreateDatePickerFormField	generate datePicker form field template code
HLCreateUploadFormField	generate uploadForm form field template code
HLCreateHiddenFormField	generate hidden form field template code
HLCreateExtraFormField	generate extra form field template code
HLCreateCustomFormField	generate custom form field template code

Hidden Form Field: means the formField that don't show in the UI but needed to send to the backend interface.

Extra Form Field: means the formField that show in the UI but not necessary to send the backend interface.

Custom Form Field: means maximum custom property show in the template code, like regex, validator, etc.

Form Item Creator Snippets:

Snippets Name	Instruction
HLCreateInputFormItem	generate text form item template code
HLCreateNumberInputFormItem	generate numberInput form item template code
HLCreateTextAreaFormItem	generate textarea form item template code
HLCreateRadioButtonFormItem	generate radio button form item template code
HLCreateSwitchFormItem	generate switch form item template code
HLCreateDatePickerFormItem	generate datePicker form item template code
HLCreateSelectFormItem	generate select form item template code
HLCreateSearchSelectFormItem	generate searchSelect form item template code
HLCreateUploadFormItem	generate upload form item template code
HLCreateCustomFormItem	generate custom form item template code

QueryCondition Creator Snippet

Snippets Name	Instruction
HLCreateQCInputConfig	generate input queryCondition item template code
HLCreateQCInputNumberConfig	generate input number queryCondition item template code
HLCreateQCTextAreaConfig	generate textArea queryCondition item template code
HLCreateQCSelectConfig	generate select queryCondition item template code
HLCreateQCRadioButtonConfig	generate radio button queryCondition item template code
HLCreateQCCheckBoxConfig	generate checkBox queryCondition item template code
HLCreateQCDateConfig	generate date queryCondition item template code
HLCreateQCDatePickerConfig	generate date picker queryCondition item template code

Generate Model Code

First copy the JSON data from the service interface, and press F1 or Ctrl + Shift + P trigger the command panel of VsCode, then enter the HL Create Model instruction and input the model name(default use the text of the current selection in the active editor of VsCode), finally you will see the code generated at the file.

if the model name is hard to text you can copy that model name and paste in the file, then select the name and continue trigger the HL Create Model instruction.

You can use the REST Client VsCode plugin help you to get the response JSON string from the backend interface.

Requirements

Visual Studio Code version is above ^1.34.0.

Release Notes

This is the first publishing of HLSnippets.

0.0.1

Add code snippets.

---

Enjoy!