Is there a tool to alphabetize CSS definitions in Visual Studio?

Question

Eric Meyer's advice to keep individual rules alphabetized in a CSS style definition makes sense - there's no "natural" way to order rules, and this makes it easy in a complex definition to make sure you don't define the same thing twice.

div.Foo
{
    background:Green;
    border:1px solid Khaki;
    display:none;
    left:225px;
    max-height:300px;
    overflow-x:hidden;
    overflow-y:auto;
    position:absolute;
    top:0;
    width:230px;
    z-index:99;
}

So my question: Is there a plugin or some other easy way to select a list of rules in Visual Studio and alphabetize them? (Better yet, to apply this throughout a stylesheet in one fell swoop.)

Update

@Geoff suggests CleanCSS, which is very cool and will do the above-requested alphabetization all at once, in addition to a lot of other nice clean-up (e.g. merging definitions with the same selector). Unfortunately it collapses multiple selectors in a definition into a single line. For example

div.Foo,
div.Foo p,
div.Foo li
{
   color:Green;
}

becomes

div.Foo,div.Foo p,div.Foo li
{
   color:Green;
}

which is much harder to read and kind of a deal-breaker. This is with the lowest compression setting, and I don't see a way to override it.

Answer 1

Ben's answer is correct but is error prone but lead me to this plugin: https://github.com/mrmlnc/vscode-postcss-sorting Simply add this to your settings.json after installing,

"postcssSorting.config": {
  "properties-order": "alphabetical"
}

Then in the vscode command panel (cmd+shift+p) choose PostCSS Sorting: Run

There's lot of other great config options too including how to handle comments.

Answer 2

In fact it's much more simple and you do not have to install any plugin.

Just go File > Preferences > Keyboard Shortcuts

Then Type Sort lines ascending, then map a keybinding to that.

Answer 3

Use CodeMaid. Ctrl+M+F9 will sort any text in your selection, regardless of type.

Answer 4

In 2021, I found this extension that does the job perfectly ; It also can sort any blocks codes in others languages: https://marketplace.visualstudio.com/items?itemName=1nVitr0.blocksort

Important note: You must first group the selectors on a single line, otherwise the plugin will not understand that they go together. For example:

// Don't do this
.rule1,
.rule2 {
    color: red;
}

// Do that
.rule1, .rule2 {
    color: red;
}

Answer 5

In VSCode. Just attach a key binding to the “Sort Lines Alphabetically” command.

File > Preferences > Keyboard Shortcuts Type “sort lines” in the search box and add a keybinding to Sort Lines Alphabetically. For example Ctrl+Cmd+O.

However you need to be careful with your formatting as this feature is not smart enough to move css properties that are wrapped to multiple lines.

Answer 6

There's a VSCode plugin called CSS Alphabetize that should allow you to do this.

Disclaimer: I'm the author. Not trying to plug it, just happened to come across this article.

https://marketplace.visualstudio.com/items?itemName=PolymerMallard.css-alphabetize