hap-skeleton

中文详情

快应用骨架屏文件的插件，支持 .sk 文件预览和语法功能。

功能

预览

1. 打开 .sk 文件，点击 IDE 标题栏右上角的预览图标，打开预览面板。保存修改后的 .sk 文件，可以刷新预览页面。

   注意：暂不支持预览 <full-screen-img>

   

2. 预览的尺寸

   • 竖屏，预览的宽度为 375px，高度按真机比例算出
   • 横屏，预览的宽度为 750px，高度按真机比例算出

3. 配置预览的尺寸

   • 点击配置按键（1），选择 “设置”（2），打开配置面板。

   

   • 搜索 “skeleton”（3）, 切换到“工作区”（4），可配置工作区的骨架屏尺寸。
     • Height：屏幕高度
     • Width：屏幕宽度
     • Top：屏幕上方的偏移量（标题栏和状态栏的高度），默认为 0
     • Left：屏幕左边的偏移量，默认为 0

语法功能

1. 语法高亮

2. 自动补全

   

3. Emmet

   

4. 悬浮提示

   

5. 取色器

   

6. 格式化

   • 右键菜单 - 选择 “格式化文档”，可进行格式化
   • 配置格式化规则：点击IDE左下角配置按键 - 选择 “设置” - 搜索 “skeleton” - 配置 “hap-skeleton.prettyHtml”（注：需要重启 IDE，新规则才能生效）。

English Details

Extension for quickapp skeleton file, which supports preview and language feautures for .sk file.

Features

Preview

1. Open .sk file, click the preview icon on the upper right corner of the IDE title bar to open the preview panel. Modify and save the file, can refresh the preview page.

   Tip：<full-screen-img> is not supported now.

   

2. Preivew size

   • Vertical screen, width is 375px, height is calculated according to the machine ratio.
   • Horizontal screen, width is 750px, height is calculated according to the machine ratio.

3. Setting preview size

   • Click Setting Button (1), select "Settings" (2), open the setting panel.

   

   • Search "skeleton" (3), and switch to "Workspace"(4), you can modify the preview size。
     • Height：screen height
     • Widthscreen width
     • Top：screen top offset (space for title bar and status bar), default zero
     • Left：screen left offset, default zero

Language Features

1. Syntax Highlight

2. Atuto Completion

   

3. Emmet

   

4. Hovers

   

5. Color Picker

   

6. Format

   • Contextmenu - select "Format Document"
   • Setting format rules: click setting button on the IDE left bottom corner - select "Settings" - search "skeleton" - setting "hap-skeleton.prettyHtml"(Tip*: The new rules will work after restarting IDE).