Welcome to the initial alpha release of the CDS-lint Extension aka Code Design System for Visual Studio Code. This update marks the first public release of the extension, and we are excited to share the features we have been working on. Please email us at yupma.com/support for any feedback, suggestions, or reporting issues. Thanks for your support and feedback.
This guide will walk you through the installation and usage of the CDS-lint Extension in its alpha release.
Install the CDS-lint Extension from the VS Code marketplace.
Once successfully installed, you will find 'D' icon with CDSL on the bottom bar which will help you further to manage.
File Addition
Use the "add file" option to upload your your design system files. Please note that currently, only .css & .scss file formats are supported.
Implementation
With your design system file uploaded, you can start using your classes and variables.
You can now use your design system class names and variables(both css & scss), it will be seamless like typing space in class=" " and design system classes will pop up. Same will be for css/scss: background: - and you will get your variables, for scss variable it will be $ instead of - (dash).
Configuration and Diagnostics
Access settings via the "configuration" option and toggle diagnostics to ensure consistency.
Important Considerations
File Update Mechanism: To update your design system files, remove the existing file and upload the new version.
Visibility: If the CDSL text and logo are not visible, right-click the bottom bar and toggle the CDS-lint option.
Quick Access: Use shortcuts for quick access (SHIFT+ALT+D for Windows/Linux, CTRL+SHIFT+D for Mac). Also you can override these shortcuts.
