Automatically Order CSS Properties Alphabetically in VS Code | by Estefanía García Gallardo | May, 2022

Hold your CSS guidelines so as

Picture by Sven Brandsma on Unsplash

One of the vital necessary issues when working with a workforce of builders is to take care of consistency all through the undertaking. Following conventions and making use of greatest practices makes it a lot simpler so that you can work successfully as a workforce. In my expertise, stylesheets are sometimes uncared for in relation to making use of greatest practices.

I’ve seen loads of initiatives the place CSS properties are randomly ordered. This may increasingly seem to be one thing unimportant, however it’s in actual fact very a lot so. Following a specific ordering system improves legibility, and growth pace and most significantly, avoids absurd, time-consuming merge conflicts.

Nevertheless, sorting our CSS properties by hand is clearly not a maintainable answer, it must be performed routinely. That’s precisely what you’ll study on this tutorial: routinely kind CSS, SCSS, LESS and PostCSS properties on save.

Index

  • VS Code PostCSS sorting extension
  • Formatting on save
  • Supporting a number of languages
  • Conclusion

VS Code PostCSS is a VS Code plugin that permits us to kind CSS guidelines content material in keeping with the required order. It helps CSS, PostCSS, Much less, and SCSS.

To set it up, observe these steps:

  1. Open the settings.json file.

Tip: To open information shortly in VS Code, you’ll be able to press F1 and seek for no matter you’re searching for. On this case, seek for settings, and choose the ‘Preferences: Open Settings (JSON)’ choice, to open the settings.json file.

2. Paste the next code into the file:

"postcssSorting.config": 
"properties-order": "alphabetical",

Et voilà, we’re performed. To check if it really works, we are able to open a CSS file that accommodates unordered properties, press F1, and run the PostCSS Sorting: Run command, like this:

Superior! Our CSS properties at the moment are sorted alphabetically. Nevertheless…

What we now have to date is fairly good, however it might be even higher if the information had been routinely formatted on save. Sadly, this characteristic isn’t supported by the extension.

However we’re builders, aren’t we? We will at all times discover a answer! To resolve this subject, we are able to use ryuta46’s VS Code multi-command extension, which permits us to create a command sequence as a single command and bind it to a key.

To set it up:

  1. Open the keybindings.json file.

Tip: Press F1, seek for keyboard shortcuts, and choose the ‘Preferences: Open Keyboard Shortcuts (JSON)’ choice to open the keybindings.json file.

2. Add the next configuration object to the present array (don’t overlook to avoid wasting the file!):

keybindings.json file https://gist.github.com/NyaGarcia/e82fde47a697467d76b12240d13078c8

We’re performed! It’s time to check and see if it really works. Let’s return to our unordered CSS file, and reserve it:

Sorting CSS file on save

Superior! We now have computerized alphabetical sorting on save, on our CSS information. However what if we now have totally different initiatives with SASS or LESS and we additionally need to implement computerized sorting?

That’s all people! Hopefully, your VS Code is all set as much as routinely order any type of stylesheet information alphabetically, and your teammates will recognize you very a lot for leveling up the consistency in your undertaking.

I hope you each loved this tutorial and located it helpful. Thanks for studying.

More Posts