Sober.js for VSCode

介绍

一个 Visual Studio Code 扩展，为 Sober.js 组件库 提供自动完成、悬停提示、代码片段等功能

（非官方扩展，组件库由 @apprat 创建和维护，此扩展由 @lingbopro 制作并由 @Minemetero 协作）

安装

在 Visual Studio Code 的“扩展”页面下，搜索 Sober.js 并安装
你也可以从 Visual Studio Marketplace 安装

或者，你也可以从 Release 页面 下载 VSIX 文件，然后在 Visual Studio Code 中安装。

功能

代码自动补全和悬停提示，包括：

• HTML 标签名
• HTML 标签属性名称和枚举值
• CSS 变量名和枚举值
• 一点 HTML 代码片段
• Material 图标 SVG 补全

目前已支持 Sober.js 0.4.1 的所有组件、CSS 变量（见下表）和 SVG 图标

支持的组件（点击展开）

• 基础组件
  • 按钮 Button
  • 图标 Icon
  • 图标按钮 Icon Button
  • 浮动操作按钮 FAB
  • 分组按钮 Segmented Button
  • 波纹 Ripple
  • 复选框 Checkbox
  • 单选按钮 Radio Button
  • 滑块 Slider
  • 线性进度 Linear Progress
  • 圆形进度 Circular Progress
  • 开关 Switch
  • 文本框 Text Field
  • 评分 Rate
  • 选择框 Picker
  • 字段框 Field
  • 分割线 Divider
• 容器
  • 页面 Page
  • 抽屉 Drawer
  • 滚动 Scroll View
  • 卡片 Card
  • 搜索栏 Search
  • 轮播图 Carousel
• 导航
  • 选项卡 Tab
  • 导航栏 Navigation
  • 应用栏 Appbar
  • 菜单 Menu
• 部件
  • 对话框 Dialog
  • 弹出框 Popup
  • 弹出式菜单 Popup Menu
  • 提示框 Snackbar
  • 工具提示 Tooltip
  • 徽章 Badge
  • 纸片 Chip
• 数据
  • 表格 Table

支持的 CSS 变量

• 组件变量
  • 波纹 Ripple
    • --ripple-color
    • -ripple-opacity
  • 文本框 Text Field / 选择框 Picker
    • --border-radius
    • --border-width
    • --border-color
    • --padding
• 全局变量
  • --s-color-primary
  • --s-color-on-primary
  • --s-color-primary-container
  • --s-color-on-primary-container
  • --s-color-secondary
  • --s-color-on-secondary
  • --s-color-secondary-container
  • --s-color-on-secondary-container
  • --s-color-tertiary
  • --s-color-on-tertiary
  • --s-color-tertiary-container
  • --s-color-on-tertiary-container
  • --s-color-error
  • --s-color-on-error
  • --s-color-error-container
  • --s-color-on-error-container
  • --s-color-background
  • --s-color-on-background
  • --s-color-outline
  • --s-color-outline-variant
  • --s-color-surface
  • --s-color-on-surface
  • --s-color-surface-variant
  • --s-color-on-surface-variant
  • --s-color-inverse-surface
  • --s-color-inverse-on-surface
  • --s-color-inverse-primary
  • --s-color-surface-container
  • --s-color-surface-container-high
  • --s-color-surface-container-highest
  • --s-color-surface-container-low
  • --s-color-surface-container-lowest
  • --s-color-dark-primary
  • --s-color-dark-on-primary
  • --s-color-dark-primary-container
  • --s-color-dark-on-primary-container
  • --s-color-dark-secondary
  • --s-color-dark-on-secondary
  • --s-color-dark-secondary-container
  • --s-color-dark-on-secondary-container
  • --s-color-dark-tertiary
  • --s-color-dark-on-tertiary
  • --s-color-dark-tertiary-container
  • --s-color-dark-on-tertiary-container
  • --s-color-dark-error
  • --s-color-dark-on-error
  • --s-color-dark-error-container
  • --s-color-dark-on-error-container
  • --s-color-dark-background
  • --s-color-dark-on-background
  • --s-color-dark-outline
  • --s-color-dark-outline-variant
  • --s-color-dark-surface
  • --s-color-dark-on-surface
  • --s-color-dark-surface-variant
  • --s-color-dark-on-surface-variant
  • --s-color-dark-inverse-surface
  • --s-color-dark-inverse-on-surface
  • --s-color-dark-inverse-primary
  • --s-color-dark-surface-container
  • --s-color-dark-surface-container-high
  • --s-color-dark-surface-container-highest
  • --s-color-dark-surface-container-low
  • --s-color-dark-surface-container-lowest
  • --s-elevation-level1
  • --s-elevation-level2
  • --s-elevation-level3
  • --s-elevation-level4
  • --s-elevation-level5

功能展示

还没弄（（（

Release Notes

见 版本说明

To-do

• 支持更多组件
• 完善悬停提示
• 完成 CSS 变量名和枚举值补全
• 增加 SVG 图标补全
• 使 SVG 图标补全可以补全填充图标，不仅是线条图标