vscode theme development plugin
Introduction
shopline-theme-plugin Vscode plugin is to provide our themes with more convenient development tools, theme syntax checking, syntax highlighting, code folding, section,theme,helper variable association hints, code block completion, file path jumping and other functions. This is to improve the efficiency and quality of code for our developers.
Installation
Search for shopline-theme-plugin in the vscode app market and click install.
(Note: vscode version must be greater than 1.61.0.)
Uninstallation
Search for shopline-theme-plugin in the vscode app market and click on uninstall.
Launch Plugin
If the src/config/settings_data.json file is present in the root of the project file, the shopline-theme-plugin plugin is automatically triggered and files with the html suffix are opened and the Handlebars language is automatically recognised.
Vscode plugin features
Code association tips
Section component property association tips
When developing a section component, the section attribute settings,blocks will be associated when the developer types section. and can be selected.When the developer enters settings. it will associate the id of the component schema with the configuration settings. Properties as shown below：
Global configuration of theme properties associative hints
In any development *.html file, when the developer types theme.settings. it will associate the properties inside the global configuration theme with the option to. The theme property of the settings_data.json file is configured as shown below:
Helper association tips
In the development of any *.html file, when the developer enters code where {{ appears on the current line, any characters entered after it will match the corresponding helper prompt and can be selected. for example, if the developer types {{a it will match the assign,and,append,... helper.
Note: {{ with a space prompts for a helper block, {{ prompts for a helper.
Helper Documentation tips
When developing any *.html file, hovering over the helper will bring up the helper documentation.
Schema type tips
When developing section components, all B-side control types are prompted when the developer fills in the settings snippet of the schema with the value of the type property.As shown below:
Code Block Completions
Helper code block completions
When developing any *.html file, when the developer enters the code {{ the characters entered after it will match the corresponding helper block prompt with the option to press the enter key for code completion.
Note: {{ prompts for the helper block, {{ adds a space to prompt for the helper
For example, {{if hit enter to complete the code as follows:
{{#if [cursor position]}} {{else}} {{/if}}
For example: Type {each and hit the enter key to complete the code as follows
{{#each [cursor position]}} {{/each}}
Schema code block completions
Develop the section component when the developer enters { in the settings snippet of the schema followed by the type name with a space and a prompt for all B-side control types.
For example: Inputswitch,range,products_num,product_picker,image_picker,select,...
with the option to press the enter key to complete the relevant code block.
For example, enter { sw and select the switch control.The complementary code blocks are as follows
{
"type": "switch",
"id": "show_background",
"label": {
"zh-hans-cn": "[cursor position]"
},
"default": false
}
File path code jump
section/snippet file path jumping
The path to the file is shown below, Press the command key (mac systems) / ctr key (win systems) and click on the file,The relevant file will be opened
Grammar check
Basic grammar check
For example: {{data}} If the ending }} is missing, the file will be marked red with an error.
Helper syntax check
The use of a non-existent helper or incorrect parameters will result in a red alert file error.
Object grammar check
If you use a non-existent Object object, it will be red flagged with a file error.
Schema syntax check
schema The configuration must contain the following structure, otherwise the file will be marked red to indicate an error
{
"name": {},
"settings": [{}],
"blocks": [{}],
"max_blocks": 1,
"presets": []
}
settings The configuration must contain the following structure, otherwise the file will be marked red to indicate an error
{
"type": "text",
"id": "title",
"label": "title"
}
Templates json file syntax validation
Basic json syntax error reporting
The attribute key of order must be the name of the component in the section folder of the current project, otherwise the file will be marked red with an error
Syntax highlighting
Handlebars syntax highlighting
Documents with the html suffix automatically recognise the handlebars syntax and are highlighted, with the colour style depending on the theme set by the respective editor.
Schema syntax highlighting
Multilingual translation
schema multilingual prompt
page multilingual prompt
Theme plugin default translation into English, you can customize the configuration of the translation language operation is as follows：Settings>>Workspace>>Extensions>>Shopline Theme Plugin
Modify configuration items manually .vscode/settings.json
Code folding
Handlebars code block collapse
The theme will use shopline-theme-plugin plugin for formatting by default, if you want to change it, please modify the directory .vscode/settings.json file manually.
Shortcuts shfit + option + f to format the whole document, various shortcuts such as formatting selected areas of code and saving auto-formatting, the ability to configure the theme directory .vscode/settings.json file according to development habits
Modify the theme root .prettierrc.js file to configure the code formatting style
