WebStorm/PhpStorm double quotes in TypeScript auto import

Question

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?

Vermiculation

Like any other language in any JetBrains tool, alter the code style settings in your preferences. – Egypt

That's true, just found it, where the answer suggests. There was nothing useful on 'quote' search in preferences. – Vermiculation

Answer 1

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:

Kiefer

If you started off on an older version of Intellij (< 2017.1), you may need to toggle the settings for it to actually apply. This was set to single quotes, but I was still seeing double quotes. It worked after changing to double quotes, applying, changing to single quotes, and finally applying again. – Swob

"Other" tab is now "Punctuation" - as of at least Webstorm 2017.3.2 – Mithras

@Mithras Yes, the screenshot and the note ("On 2017.1...") shows just that. I guess I better make it bold/more visible. – Kiefer

If you happen to use Vue.js with typescript, you may need to apply this setting for javascript as well. It seems that WebStorm does not apply typescript settings to Vue-files, even if they are set as lang=ts. – Foch

Answer 2

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

Cumulonimbus

Thanks a lot! I was looking for that and it was extremely bothering me. – Anchylose

Same as Ivan, I had no idea how to customise this and Interpolation expressions as well. Thanks! – Mcentire

Answer 3

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

Reptant

Answer 4

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.

Hanuman

Answer 5

For Intellij 2016.3 version it's on Other Tab > Generated Code > Quote Marks

Poi