CODEWITHSUNDEEP
angularwebstorm
Runtime Terror
Runtime Terror

Reputation: 6742

Adding spaces between imports and braces in WebStorm

Is it possible to add spaces between imports and braces in WebStorm's auto-import feature?

Currently how the auto import looks like:

import {AbstractControl} from '@angular/forms';

I want to change it to:

import { AbstractControl } from '@angular/forms';

Upvotes: 126

Views: 36245

Answers (5)

Frankie
Frankie

Reputation: 25165

While the other answers are correct, they are not portable.
You must remember to change IntelliJ settings on all machines you run the project.

There is a better alternative!
Add .editorconfig file to your project.

On your specific request for "IntelliJ/WebStorm", such can be achieved by putting this on .editorconfig:

ij_typescript_spaces_within_imports = true

You can read more on IntelliJ and specific .editorconfig rules here.

To give you a better example of what an .editorconfig file can do, check the following:

  • marks it as root (so editor will not look elsewhere)
  • makes sure all files are utf-8
  • if file matches given extension gives it some extra properties
root = true

[*]
charset = utf-8

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
ij_typescript_spaces_within_imports = true

Upvotes: 20

Cassius
Cassius

Reputation: 71

Update .editorconfig, add properties for typescript and javascript files

[{*.ats,*.cts,*.mts,*.ts}]
ij_typescript_spaces_within_imports = true

[{*.cjs,*.js,*.jsx}]
ij_javascript_spaces_within_imports = true

Upvotes: 7

sum
sum

Reputation: 16

You might want to check the Within interpolation expressions in the Other section of the Spaces tab.

Upvotes: 0

Mehul Mali
Mehul Mali

Reputation: 3254

  • For javascript Project:

Go to WebStorm > File > Settings > Editor > Code Style > JavaScript > Spaces (second tab), scroll to section "Within" and check ES6 import/export braces.

  • For TypeScript Project:

Go to WebStorm > File > Settings > Editor > Code Style > TypeScript > Spaces (second tab), scroll to section "Within" and check ES6 import/export braces.

Upvotes: 43

yivo
yivo

Reputation: 3594

Yes. Go to WebStorm -> Preferences -> Editor -> Code Style -> JavaScript -> Spaces (second tab), scroll to section "Within" and check ES6 import/export braces. enter image description here

Upvotes: 275

Related Questions