IDE 支持

mdui 专门为 VS Code 和 WebStorm 进行了优化,在这些 IDE 中可以获得代码自动完成、悬停提示等功能。

VS Code

通过 npm 安装的 mdui

如果你通过 npm 安装了 mdui,可以按照以下步骤在当前项目中启用 VS Code 的 IDE 支持:

  1. 在项目的根目录中创建 .vscode 目录。
  2. .vscode 目录中创建 settings.json 文件。
  3. 将以下代码添加到 settings.json 文件中:
    {
      "html.customData": ["./node_modules/mdui/html-data.zh-cn.json"],
      "css.customData": ["./node_modules/mdui/css-data.zh-cn.json"]
    }
    

如果 settings.json 文件已经存在,只需将上述两行代码添加到 JSON 文档的根节点即可。修改完成后,重启 VS Code。

通过 CDN 使用的 mdui

如果你是通过 CDN 引入的 mdui,可以通过安装 mdui 的 VS Code 扩展来获得 IDE 支持。

在 VS Code 的扩展商店中搜索 mdui,选择第一条搜索结果进行安装,或者点击此处安装。安装完成后,所有项目都将启用 mdui 的 IDE 支持。

建议优先通过 npm 安装并设置 settings.json 文件,而非安装 VS Code 扩展,以确保 IDE 支持与当前使用的 mdui 版本保持一致。

WebStorm

通过 npm 安装的 mdui

如果你通过 npm 安装了 mdui,可以按照以下步骤在当前项目中启用 WebStorm 的 IDE 支持:

  1. 在项目根目录的 package.json 文件的根节点中添加以下代码:
    web-types: ["./node_modules/mdui/web-types.zh-cn.json"]
    

如果 package.json 文件的根节点已存在 web-types 属性,只需将 ./node_modules/mdui/web-types.zh-cn.json 添加到 web-types 数组中即可。修改完成后,重启 WebStorm。

通过 CDN 使用的 mdui

如果你是通过 CDN 引入的 mdui,可以通过安装 mdui 的 WebStorm 插件来获得 IDE 支持。

在 WebStorm 的插件市场中搜索 mdui,选择第一条搜索结果进行安装。安装完成后,所有项目都将启用 mdui 的 IDE 支持。

建议优先通过 npm 安装来获取 IDE 支持,而非安装 WebStorm 插件,以确保 IDE 支持与当前使用的 mdui 版本保持一致。

对 VS Code 和 WebStorm 支持的差异

mdui 对 VS Code 和 WebStorm 的支持存在一些差异。以下表格列出了详细的差异:

具有代码自动完成及悬浮提示的位置 VS Code WebStorm
HTML 标签名
HTML 标签中的属性名
HTML 标签中属性值的枚举值 (不支持显示枚举值的注释)
HTML 标签中的事件名
HTML 中 slot 的 name 属性值
CSS 中 ::part() 选择器的 part 属性名 (需要 WebStorm 2023.2 及以上版本)
CSS 中组件内的 CSS 自定义属性名
CSS 中的全局 CSS 自定义属性名
CSS 中的全局 class 名
MDUI文档English简体中文亮色模式暗色模式跟随系统
预设颜色
自选颜色
从壁纸提取颜色
请选择一张壁纸
开发指南
概述 安装 快速入门 TypeScript 支持 IDE 支持 本地化 常见问题
样式
暗色模式 动态配色 文章排版 设计令牌
与框架集成
React Vue Angular
组件
Button 按钮ButtonIcon 图标按钮Fab 浮动操作按钮SegmentedButton 分段按钮Chip 纸片Card 卡片Checkbox 复选框Radio 单选框Switch 开关切换Slider 滑块RangeSlider 范围滑块List 列表Collapse 折叠面板Tabs 选项卡Dropdown 下拉组件Menu 菜单Select 选择框TextField 文本框LinearProgress 线性进度指示器CircularProgress 圆形进度指示器Dialog 对话框Divider 分割线Avatar 头像Badge 徽标Icon 图标Tooltip 工具提示Snackbar 消息条NavigationBar 底部导航栏NavigationDrawer 侧边抽屉栏NavigationRail 侧边导航栏BottomAppBar 底部应用栏TopAppBar 顶部应用栏Layout 布局
工具函数
jq 工具库 dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
独立包
@mdui/icons 图标组件库