WebStorm/PhpStorm double quotes in TypeScript auto import

290
votes

I'm using TypeScript style with single quotes, double quotes are used exclusively in HTML templates.

WebStorm/PhpStorm auto import adds import statements with double quotes and ruins the style. I guess this applies to all JetBrains products.

How can this behaviour be fixed?

5
typescriptintellij-ideaphpstormwebstormjetbrains-ide
Like any other language in any JetBrains tool, alter the code style settings in your preferences. - jonrsharpe
That's true, just found it, where the answer suggests. There was nothing useful on 'quote' search in preferences. - Estus Flask

5 Answers

752
votes

This behaviour is controlled by the following option:

  1. Settings/Preferences
  2. Editor | Code Style | TypeScript
  3. "Punctuation" tab | Generated code -> Quote marks

As of 2017.1 version it's on new Punctuation tab and options are named a bit differently:

enter image description here

91
votes

Also if you would like to add automatic space between curly braces when adding imports like so

import { MyComponent } from './my.component';

you may check in tab Spaces | Whithin | ES6 import/export braces

56
votes

In 2017-2019 this is how we do it:

  1. Go to settings
  2. Type Code style in search
  3. Select Typescript
  4. Go to Punctuation section
  5. Select single quotes

enter image description here

2
votes

For Intellij 2016.3 version it's on Other Tab > Generated Code > Quote Marksenter image description here

0
votes

1st Things need to check in your Tslint file 

 "quotemark": [
  true,
  "Double"
],

It's should be Double rather than Single because it's Failed TSLint Passed on Project Build.

Now go to your Setting | Editor | TypeScript | Punctuation

Select Single from the dropdown and Apply/Ok it.

Now Congrats your IntellijIDEA are applied Double Quotes on AutoImport.For reference