Sublime Forum

Auto sort line all properties

#1

Hihi everyone, can this be done by snippet or it need to be achieved by plugin?

In CSS, I’d love all the properties being sorted within the selector. For example:

.element {
   position: absolute;
   display: flex;
}

Now as I adding a new property like top: 0; into the selector .element, then I hit enter ( when the cursor is at the end of the line, before the semicolon ), it will go to the new line by defaut.

The expected result should be:

.element {
   display: flex;
   position: absolute;
   top: 0;
   
}

Where it auto sorted all the properties within the selector. And if I don’t hit enter, it should also auto sort all the properties within the selector after 3 seconds.

0 Likes
#2

Anything that modifies the content of the file in that manner would require a plugin to determine the extents of the range, pull out the lines, sort them and then put them back in at the appropriate indent.

I’m not sure offhand, but I would suspect that you would also need a plugin to provide a custom key context that can determine if the cursor is at the end of a line within a CSS file inside of a specific selector group as well (that would be an on_query_context event listener).

You would also need something like an on_modified event listener to know when a modification has happened to a file, verify that it’s a CSS file, and then schedule the sort command to run 3 seconds after the last edit (cancelling a previous schedule if more modifications happen).

0 Likes