SLDS + VS Code = Win!

Kirupa Chinnathambi
Jan 21 · 2 min read
Analog example of design and development in action

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 preview in the Visual Studio Code Marketplace.

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:

SLDS Validator in action

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.

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

Kirupa Chinnathambi

Written by

Lover of all things animation and the web. You can find my writings and videos at the kirupa.com!

Salesforce Experience and Design

A collection of stories, case studies, and ideas from Salesforce design teams

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade