SLDS + VS Code = Win!
Ever had one of those days where you spent hours getting your Salesforce UI just right? You followed all of the Lightning Design System (SLDS) best practices and recommendations. You carefully placed div elements using the layout manager, converted inline declarations to utility classes, and checked for correct usage of design tokens. You made sure not to add any CSS overrides that could lead your UI to miss out on essential SLDS updates.
Building a UI takes time. Adding that extra layer of validation is essential, but doing it manually can take even more time, and it’s hard not to introduce at least a few mistakes. What if you could spend more of your time writing HTML, CSS, and JS and less of it validating, for lack of a better phrase, SLDS compliance?
Meet SLDS Validator
We wanted to make writing SLDS-compliant markup and CSS a natural part of the development experience. What better way to do that than by providing real-time feedback and suggestions as you write your code in Visual Studio Code (VS Code)?
Introducing the SLDS Validator extension, now available as a part of the Salesforce Extension Pack.
SLDS Validator scans your markup, validates it against a database of guidelines/tips/gotchas/etc. extracted from the SLDS documentation, and offers suggestions on how to improve your code. Check out how SLDS Validator handles some common markup scenarios:
We’ve been using this extension internally for a lot of our UI development. Now, it’s time to share it more broadly to help others (like you!) improve their UI development experience. This is still a beta, and we’re updating it continuously. If you find any issues or have suggestions, we’d love to hear from you. File an issue in our Github repo, and one of us will get back to you ASAP.
For a deeper dive into the top issues identified by the SLDS Validator, check out Donia’s excellent article over on the Salesforce Developers blog.
Happy developing!
😀 Ambreen Hasan
🙃 Billy Ma
😆 Donia Robinson
😉 John Earle
😂 Kirupa Chinnathambi
😊 Matt Holland
😁 Sarah Mei
🤩 Will Boyd
Follow us at @SalesforceUX.
Want to work with us? Contact uxcareers@salesforce.com
Check out the Salesforce Lightning Design System
