WeVis IntelliSense

VSCode IntelliSense for WeVis Design System.

To install the extension, use the keyword WeVis in your extension sidebar. Alternatively, you can download it from Visual Studio Code Marketplace.

Features

Suggestion

Suggest available CSS classes from the design system in several files format such as HTML (.html), Vue (.vue), React (.js, .jsx, .tsx), Svelte (.svelte), Astro (.astro). It works on the pattern class[Name]=[{]<"|'|`>; if the pattern matched, it will try to suggest you.

This extension also works with Emmet, so you can type . and it will start suggesting you. This is enabled by default, but you can disable this functionality in the settings.

To provide a clear indication whether the extension is available for a file, A small "WV" will appear at the status bar when available. You can click on it to quickly enable/disable the suggestion functionality. When disabled, it will be in warning color (typically dark yellow).

The extension shipped with several commands, which you can use them via the command palette (Ctrl/Cmd + Shift + P).

Snippets

You can insert a snippet for components and component sets through prefix wv-.

For upcoming features and plan, please see Planned Features.

Extension Settings

There are 3 settings available in this extension:

• wevisIntellisense.enableIntellisense
  • Enable IntelliSense in available file.
  • Default: true
• wevisIntellisense.allowEmmet
  • Allow suggestion with Emmet abbreviation.
  • Default: true
• wevisIntellisense.suggestionLanguages
  • A list of languages where suggestions are enabled.
  • Default: ["html", "vue", "vue-html", "svelte", "astro", "javascript", "javascriptreact", "typescriptreact"]

Planned Features

• [x] Suggestion
• [x] Snippets
  • [x] Component Snippets
  • [x] Cookbook Snippets
• [ ] Component Generator

Changelogs

Updates and changelogs can be found in the changelog file.