VS Code 开发者插件​

Shopline Developer Plugin 是 SHOPLINE 专为开发者设计的一款 Visual Studio Code (VS Code) 插件，提供了主题语法校验，代码着色，代码折叠，代码联想提示，代码块补全，本地预览等功能，旨在为开发者提供更加高效便捷的开发体验。

安装​

在 VS Code 扩展市场中搜索 Shopline Developer Plugin 进行安装。

卸载​

在 VS Code 扩展市场中搜索Shopline Developer Plugin 进行卸载。

VS Code 插件功能​

代码着色​

Sline 语法高亮​

后缀为 .html 的文件会自动识别为 Sline 语法，并高亮展示，语法高亮颜色部分和 VS Code 配置的主题有关。

Schema 语法高亮​

代码联想提示​

Object 联想提示​

在开发任何的 .html 文件，当你输入任意 object 就会联想其属性并在旁边展示列表进行选择。例如，product object 属性展示如下:

Filter 联想提示​

在开发任何的 .html 文件，当你输入的代码在当前行出现 {{ | 时，后面输入的字符都会去匹配相应的 filter 提示并做选择。

Tag 联想提示​

在开发任何的 .html 文件，当你输入的代码在当前行出现 {{# 时，后面输入的字符都会去匹配相应的 tag 提示并做选择。

Schema 代码提示​

编写 schema 配置时，输入 type 可触发所有 控件 类型的预设代码提示。

编写配置时，根据输入的属性名，动态提供该属性所支持的候选值。

关联 schema 配置推断，对 settings 进行属性提示。

变量声明定位​

将光标置于变量使用处时，根据上下文可显示该变量的定义位置，并支持一键跳转至该变量的定义代码。

路径提示​

对于如下需要输入文件路径的场景，提供触发路径提示能力，无需手动输入路径。

• Tag component

  

• Filter asset_url

  

• Schema blocks type

文档提示​

在开发任何的 .html 文件时，鼠标悬浮在 object，filter、tag、schema 属性 等关键字的上面会出现对应的使用文档提示框。

代码块补全​

Tag 代码块补全​

在开发任何的 .html 文件时，当你在编辑器输入 {{# 字符时，后面输入的字符都会去匹配相应的 tag 并给到 tag 列表供选择，按下回车键后进行代码补全。

例如，输入 {{#if 敲下回车键，代码补全如下：

结束符号 '/' 补全​

开发任何的 .html 文件时，当你使用 tag 方法未输入结束符号 '/' 时，保存当前文件后，将自动在 tag 末尾填充 '/'。
例如，输入 {{#else}} 并保存 .html 文件后，代码将自动补全为{{#else/}} 。

语法校验​

基础语法校验​

在使用模板变量时，自动检查基础语法错误。例如 Tag 少了结尾的 }} 会提示报错。如下图所示：

同一作用域下重复声明变量，会提示报错。如下图所示：

变量未使用提示。如图所示：

针对检测到的问题，提供一键快速修复建议。如图所示：

Tag/Filter 语法校验​

若使用不存在的 tag/filter 或参数不正确，会提示报错。如下图所示：

Schema 语法校验​

若 schema 配置异常，会提示报错。如下图所示：

文件路径校验​

使用不存在的文件， 就会提示此处报错。如下图所示：

工作区异常文件校验​

在 VS Code 问题列表上可总览工作区内所有文件异常。

路径跳转​

将鼠标悬停在文件路径上，按住 Option 或 Alt 键并点击，即可在当前窗口打开该文件。

代码格式化​

在使用 Sline 语法的情况下，可以通过如下方式之一格式化整个文档：

• 右键点击，找到 格式化文档（Format Document）

• 使用快捷键 Shift + Option + F 或 Shift + Alt + F

代码折叠​

Sline 代码块折叠样式如下图所示：

本地开发​

本地渲染​

在主题开发项目中，支持将本地 HTML 文件渲染为浏览器页面，通过 localhost 启动本地服务，快速预览静态页面的效果。适用于静态页面开发、组件测试、模板预览等场景。

数据源​

目前有内置一套 demo 数据源，如果想要自定义，可以按照以下步骤修改数据源地址：

1. 找到 首选项 (Preferences) > 设置 (Settings)。

   

2. 在 搜索设置 (Search settings) 里输入 renderer。

   

3. 修改 Renderer: Object Path。该配置支持本地绝对地址目录和 HTTP 远程接口两种方式，修改之后重启 VS Code 即可生效。

   • 本地绝对地址目录

     

   • HTTP 远程接口

     

代码定位​

通过本地渲染的代码，可以在浏览器内按住 Option 或 Alt 并同时点击具体的页面元素，跳转定位到对应的.html文件，可帮助你更好的定位和修改代码。