365

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
    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. Sep 29, 2016 at 20:36

5 Answers 5

928

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

4
  • 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
    Jun 19, 2017 at 22:58
  • 7
    "Other" tab is now "Punctuation" - as of at least Webstorm 2017.3.2
    – ggranum
    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
    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
    Dec 13, 2018 at 17:38
119

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
    Oct 5, 2017 at 10:38
  • Same as Ivan, I had no idea how to customise this and Interpolation expressions as well. Thanks! Apr 28, 2021 at 10:43
75

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

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

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

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

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