373

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?

2
  • 1
    Like any other language in any JetBrains tool, alter the code style settings in your preferences.
    – jonrsharpe
    Commented Sep 29, 2016 at 20:20
  • That's true, just found it, where the answer suggests. There was nothing useful on 'quote' search in preferences. Commented Sep 29, 2016 at 20:36

5 Answers 5

953

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

5
  • 1
    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.
    – Kevin Li
    Commented Jun 19, 2017 at 22:58
  • 7
    "Other" tab is now "Punctuation" - as of at least Webstorm 2017.3.2
    – ggranum
    Commented Jan 8, 2018 at 12:58
  • 1
    @ggranum Yes, the screenshot and the note ("On 2017.1...") shows just that. I guess I better make it bold/more visible.
    – LazyOne
    Commented Jan 8, 2018 at 13:33
  • 1
    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.
    – helios35
    Commented Dec 13, 2018 at 17:38
  • 1
    This doesn't seem to work in WebStorm 24.1.3 - it is set to single for me, and yet WebStorm will adamantly insert double-quotes for all auto-generated import statements. Commented Jun 20 at 5:31
126

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

2
  • 7
    Thanks a lot! I was looking for that and it was extremely bothering me.
    – Ivan
    Commented Oct 5, 2017 at 10:38
  • Same as Ivan, I had no idea how to customise this and Interpolation expressions as well. Thanks! Commented Apr 28, 2021 at 10:43
78

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

1
  • Doesn't seem to work anymore. It is set to single for me, yet it inserts double quotes. Commented Jun 20 at 5:31
3

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

2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.