Validate and Auto Complete Styling in VS Code

Hello Ohana, Doing styling of your Aura Components is never a big trouble thanks to SLDS, But remembering the styling tags has never been my thing so my development life cycle was to copy from SLDS Library page and paste it in component, However with VS Code it becomes little tricky to open a new tab copy from there and verify its working after deploying the component in the Org, But say no more Salesforce has been kind enough t give us a all new VS Code Extension (still in Preview) for validating and auto completing the SLDS classes in your component, We will talk about the Step by step use case in today's blog post.

Step 1. Installation and Preview  : For the purpose of our use case we are assuming we already have installed the VS Code and using it for our Salesforce Development, so in order to install the SLDS Validator open your vs code go to extensions and Search for SLDS Validator, Click on install and after installation you can close and reopen your VS code if required.

you can see its still in preview so i am hoping, Salesforce will include it as part Salesforce Extension Pack but we can use it now as well after separate installation, if you want to contribute to open github project for SLDS Validator here is github link to the Project.

Step 2. Resolving Style Conflicts and Using Auto Suggest : Now that we have installed our new cool plugin let's use it and see the magic, Not only it helps us autocomplete SLDS Styles but it also helps us update the existing classes with new updates for example i have a demo component and it is using slight older styling so if i hover my mouse above the slds class it suggests the new SLDS class, see the pic below

you can see once i hover the slds class it suggests that an update design token is available for the slds class if you want to update it you can either double tap on the quick fix or press "Control" and "." keys together and it will update the slds class with new one.

Autocomplete while writing : So apart from fixing the old SLDS classes the most useful feature of this plugin in my opinion is auto suggest, while writing the slds class for any attribute you can type slds- and it will auto suggest the related slds classes like below and not only position you give specific details like margin and all as well, take a look at pic below

you can see it has suggested the margin classes and on the right side when we click margin it gives details as well, Hope it will simplify your designing lifecycle, Drop me any feedback or suggestion in comments below, Happy Learning !!