Custom Rules when you sort your Css properties
In CSS you can select multiple lines of css and sorter using custom rules.
Click to extension tab and search Custom Css Sorter
and install it reload your editor. Or use this Custom Css Sorter.
Go to Settings Custom Css Sorter
open settings.json
and add to the array custom properties (example: "content", "position", "display", "font"
) for apply the custom order that you decided or add one element "alphabetical"
for use the alphabetic order in css.
- Custom Order
{
...,
"order-custom-css.array": [
"content",
"contain",
"display",
"position",
"width",
"min-width",
"max-width",
"height",
"min-height",
"max-height",
]
}
- Alphabetic Order
{
...,
"order-custom-css.array": ["alphabetical"]
}
- Extra options
If you are using some js template example EJS you can configure the open/close tag and string tag
{
...,
"order-custom-css.array": ["alphabetical"],
"order-custom-css.openTemplate": "<%",
"order-custom-css.closeTemplate": "%>",
"order-custom-css.openTemplateString": "<%-"
}
Select the desired ones(supports for kind variable).
Using Command Palette Cmd/Ctrl+ Shift+A
or
Cmd+Shift+P
and select Custom Css Sorter
thats it or you can select the lines that you want order press right-click
and then click in Order Css Properties
.
MIT © Nacho