CODEWITHSUNDEEP
webstorm
dbj44
dbj44

Reputation: 1998

Sort properties alphabetically

Given this JS code or CSS code in the WebStorm IDE:

const foo = {
  z: 'zip',
  a: 'zot'
}

or

.foo {
  z-index: 1;
  align-content: center;
}

Is there a way to select the code and reorder the property names alphabetically? To make:

const foo = {
  a: 'zot',
  z: 'zip' 
}

or

.foo {
  align-content: center;
  z-index: 1;
}

Upvotes: 3

Views: 2878

Answers (3)

BaiaccuTerrestre_BR
BaiaccuTerrestre_BR

Reputation: 59

To sort properties in CSS, SCSS, Less, Sass, JavaScript, or TypeScript in WebStorm, follow these steps:

- For Style Sheets (CSS, SCSS, Less, Sass):

  1. Open the settings with Ctrl + Alt + S.
  2. Navigate to 'Editor | Code Style | Style Sheets | CSS'.
  3. In the Arrangement tab, check 'Sort CSS properties'.
  4. Make sure 'By name' is also checked. For both TS and JS, you can follow the same steps - I am going to use my case, TypeScript:

- For TypeScript and JavaScript:

  1. Go to 'Editor | Code Style | TypeScript'.
  2. In the Arrangement tab, look for the Matching rule (the second rule box).
  3. Select the rule you want to sort by name with a double click.
  4. An 'Order:' option will appear at the end; choose 'order by name'.

Window showing the desired window

Rule edit

I selected 'order by name' for all my rules and this is my final result:

my matching rules 1 my matching rules 2

You can customize these rules and create your own if needed. For example, you can set specific ordering for Angular component methods like ngOnInit and ngOnDestroy by adding custom rules.

custom naming order

If you have any further questions, feel free to ask

Upvotes: 0

lena
lena

Reputation: 93828

For CSS, you can enable Sort CSS properties in Settings | Editor | Code Style | Style Sheets | CSS | Arrangement and then use Code > Rearrange Code

For JS, no options are there out of the box. But you can use a third-party String manipulation plugin that supports lines sorting

Upvotes: 4

Daniel Gran
Daniel Gran

Reputation: 1

CSS = Styling

JS = Animations / Logic, which is really CHANGING the behavior.

Therefore: Use JS for that. Sort array by firstname (alphabetically) in Javascript

happy to help

Upvotes: -2

Related Questions