VS Code Shopline Developer Plugin​

The shopline-developer-plugin is a Visual Studio Code (VS Code) extension specifically designed for developers by SHOPLINE. It offers features such as theme syntax checking, code highlighting, code folding, code suggestions, code snippet completion, local preview, and more, aiming to provide a more efficient and convenient development experience for developers.

Features of the VS Code developer plugin​

Code suggestions​

Object suggestions​

When developing any .html file, if you input any object, its properties will be suggested and displayed for selection. For example, the properties of a product object are shown as follows:

Filter suggestions​

When developing any .html file, if the current line of code contains {{ |, then the characters entered afterwards will match the relevant filters for selection. For example, entering {{ |a will match filters like abs, append, etc.

Tag suggestions​

When developing any .html file, if the current line of code contains {{#, then the characters entered afterwards will match the relevant tags for selection. For example, entering {{#s will match tags like schema, script, section, etc.

Documentation tooltips​

In any .html file, when the mouse hovers over an object, filter, or tag, a corresponding documentation tooltip will appear.

Code snippet completion​

Tag code snippet completion​

When developing any .html file, typing {{# followed by some characters triggers tag suggestions, listing available tags. Press Enter, and the code snippet for the selected tag is automatically inserted.

For example, when you type {{#if and press Enter, the code completes as follows:

Completion for the end symbol '/'​

In an .html file, if you use a tag without including the ending '/', saving the file will automatically append '/' to the end of the tag. For example, if you type {{#else} and save the .html file, it will automatically be updated to {{#else/}.

Syntax checking​

Basic syntax checking​

When you use template variables such as {{data}}, if the closing }} is missing, an error message will appear, as shown in the following figure:

Tag syntax checking​

If you use a tag that does not exist or provide incorrect parameters, an error message will appear, as shown in the following figure:

Code highlighting​

Sline syntax highlighting​

Files with the suffix .html are automatically recognized as Sline syntax and are highlighted, with the syntax highlighting colors being related to the theme configured in VS Code.

Schema syntax highlighting​

The following shows an example of schema syntax highlighting:

Code formatting​

When using Sline syntax, you can format a document in the following ways:

• Right-click and select Format Document.

• Use the shortcut keys shift + option or Alt + F.

Code folding​

The following figure shows how the Sline code block folds:

Local development​

Local rendering​

In theme development projects, local HTML files can be rendered as browser pages, allowing you to quickly preview static page effects by initiating a local service on localhost. This is suitable for scenarios such as static page development, section testing, and template previews.

Data source​

A set of demo data sources is built in. If customization is desired, you can modify the data source address following these steps:

1. Go to Preferences > Settings.

2. Enter renderer in the search settings.

3. Modify Renderer: Object Path, which supports two methods: a local absolute address directory and an HTTP remote interface. Changes take effect after restarting VS Code.

• Local absolute address directory

• HTTP remote interface

Code location​

When using the locally rendered code in your browser, you can hold the Option or Alt key while clicking on a specific page element. This action will help you jump to and locate the corresponding .html file, making it easier to find and modify the code.