IDE Support

mdui is optimized for VS Code and WebStorm, offering features such as code autocompletion and hover hints.

VS Code

For npm-installed mdui

If you've installed mdui via npm, you can enable VS Code IDE support for your project by following these steps:

  1. Create a .vscode directory at your project root.
  2. Inside the .vscode directory, create a settings.json file.
  3. Add the following code to settings.json:
    {
      "html.customData": ["./node_modules/mdui/html-data.en.json"],
      "css.customData": ["./node_modules/mdui/css-data.en.json"]
    }
    

If settings.json already exists, simply add the above lines to the root of the JSON document. Restart VS Code after making these changes.

For mdui Used via CDN

If you're using mdui through a CDN, you can install the mdui VS Code extension for IDE support.

Search for mdui in the VS Code extension marketplace, select the first result and install it, or click here to install. This will enable mdui IDE support for all projects.

Prioritize npm installation and settings.json setup over the VS Code extension to ensure IDE support aligns with the mdui version in use.

WebStorm {#webstorm}

WebStorm

For npm-installed mdui

To enable WebStorm IDE support for mdui installed via npm:

  1. Add the following code to the root of your project's package.json file:
    web-types: ["./node_modules/mdui/web-types.en.json"]
    

If package.json already has a web-types property, add ./node_modules/mdui/web-types.en.json to the web-types array. Restart WebStorm after these changes.

For mdui Used via CDN

If you're using mdui through a CDN, you can install the mdui WebStorm plugin for IDE support.

Search for mdui in the WebStorm plugin marketplace, select the first result and install it. This will enable mdui IDE support for all projects.

Prioritize npm installation and package.json setup over the WebStorm plugin to ensure IDE support aligns with the mdui version in use.

Differences in VS Code and WebStorm Support

mdui support varies between VS Code and WebStorm. The table below details the differences:

Code Autocompletion and Hover Hints Location VS Code WebStorm
HTML tag names
Attribute names within HTML tags
Enumeration values within HTML tag attributes (Does not support displaying enumeration value comments)
Event names within HTML tags
name attribute values within HTML slots
part attribute names within CSS ::part() selectors (Requires WebStorm 2023.2 or later)
CSS custom property names within component-specific CSS
Global CSS custom property names
Global CSS class names
MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Styles
Dark Theme Dynamic Theme Typography Design Tokens
Frameworks
React Vue Angular
Components
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
Functions
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
Libraries
@mdui/icons