CSS class name and variables completion based on the definitions found in your handpicked style files. Quickly autocomplete with your design language from Bootstrap, Tailwind to custom made Design System in VS Code.
Install the CDS lint extension from the VS Code marketplace.
Once successfully installed, you will find 'D' icon with 'Select file' on the bottom bar which will be your door to cds lint.
File Addition:
Use the "add file" option to upload your your design system files. Please note that currently, only .css, .scss, .sass file formats are supported.
You can now use your design system class names and variables(both css & scss), it will be seamless like typing space in class=" " (space) and design system classes will pop up. Same will be for css/scss/sass: background: - (dash) and you will get your variables, for scss variable it will be $ (dollar).
Access diagnostics via the "settings" option and toggle diagnostics to ensure consistency within your design language. We will mark classes and variables which are out of your design language.
What's New
We are finally out of beta/aplha :)
Now you can add files using url as well (like bootstrap) along with selecting from available style files.
Added support for .css and .scss files for design system integration.
A diagnostic check is available to ensure that the classes or variables matches your design language.
Support to React files(.jsx, .tsx) along with .html files
Feedback
For any feedback, please contact us at yupma.com/contact for any feedback, suggestions, or reporting issues.
Quick urls
A set of urls to get you started with urls for stylesheets:
