Base Web VS Code Extension
There are two code snippets for each Base Web component. One is for the import statement and second for the components itself. There are also some additional snippets for importing React and functional component body. Try to type and press
When using the Base Web component library and design system, you need to often reference the design tokens and colors. It is not apparent what colors our variables result into. You might need to check the documentation first or test it in your app. Our extension adds a visual cue. By default, you will see all color variables underlined:
This feature can be configured in settings. You can disable it, switch between Dark and Light themes or choose a different visual cue like the background color.
Theme Cheat Sheet
One of the most visited pages of our documentation is Theming. We already mentioned colors but there are many other theming values related to sizing, fonts, borders and others. We really want to streamline this look up process so we have added Theme Cheat Sheet. You can open it through the command palette:
It opens instantly in a new VS Code tab, works offline and visualizes all theme variables so you can quickly get the right value.
Open component-specific documentation pages