Css-organizer lets you organize your CSS properties file so that the properties under each rule can be sorted either
- alphabetically or
- systematically into groups.
You can select a single rule to sort or a selection of rules or all the rules. You setup your own way of grouping if you want.
The sorting does not affect the order of the CSS rules in the files.
Place the cursor somewhere within the rule and select Context menu->Organize CSS->CSS Properties Alphabetically
or ctrl+alt+c
and then a
or use the command palette ctrl+shift+p
and then choose CSS Properties Alphabetically
Place the cursor somewhere within the rule and Context menu->Organize CSS->CSS Properties Grouped
or ctrl+alt+c
and then g
or use the command palette ctrl+shift+p
and then choose CSS Properties Grouped
Select the rules and then proceed as in UC1 or UC2. Every rule 'touched' by the selection will be included.
Select everything, ctrl-a
, then do as in UC1 or UC2.
UC 5 When sorting in groups I want the group names to show, spaces between groups, nothing between groups :
Go to the settings and set the display options
Edit the user-grouping.json
file in the extension path/resources (or create your own file in the same directory) Go to settings select css-organizer.alternativeGroupingFileUse
, if you have created a new file, put its name in css-organizer.alternativeGroupingFile
The files are found here:
- Windows %USERPROFILE%.vscode\extensions\ucsoftware.css-organizer-\resources
- macOS ~/.vscode/extensions/ucsoftware.css-organizer-/resources
- Linux ~/.vscode/extensions/ucsoftware.css-organizer-/resources
### UC 7 I regret what I just did :
Just use `ctrl-z` and/or `ctrl-y` as you normally would. ## css-organizer Settings
css-organizer.displayOption
Select if group names to show, spaces between groups, nothing between groups.css-organizer.alternativeGroupingFile
Set the name of the file containing user defined CSS property grouping.css-organizer.alternativeGroupingFileUse
Select if the user defined CSS property grouping shall be used.
-
Erroneous CSS or badly formatted CSS (several properties on the same line, badly placed braces etc.) can give unpredictable results. Tip: Beautify first.
-
Discontinuously selected rules does not work (yet).
The default sorting order for grouped CSS properties is very much inspired by the sorting order presented in the excellent Kevin Powell video discussing the benefits of organizing CSS properties.
If you find that using this tool saves you time and money, and you can afford it, consider supporting us. Donate via Paypal
Visit the UC Software website ucsoftware.net.