158

When working in TypeScript in Visual Studio Code, the import suggestion on a type (triggered by space + period) will generate an import using double quotes.

Our TypeScript linter verifies that single quotes are used where possible.

As you can see below, the suggestion has double quotes ("@angular/...") Import suggestion with double quotes

How can I adjust the setting of the import?

1

12 Answers 12

218

"typescript.preferences.quoteStyle": "single"

For more info see:

https://code.visualstudio.com/updates/v1_24#_preferences-for-auto-imports-and-generated-code

5
  • 29
    "typescript.preferences.quoteStyle": "single"
    – Niko
    Commented Dec 30, 2018 at 18:34
  • 7
    This doesn't seem to take effect for me. I still get double quotes from suggestions and snippets.
    – John Knoop
    Commented Jun 20, 2019 at 14:58
  • Same to me, changed on all possibles levels (user, workspace, project) and still have double quotes :(
    – Kostanos
    Commented Aug 27, 2019 at 0:10
  • 2
    I don't know what language you two are using but there are separate settings for javascript and typescript. I was wondering the same thing but I set the javascript code setting and not typescript.
    – GhostBytes
    Commented Apr 27, 2020 at 15:08
  • 2
    Yep, if using javascript you will need "javascript.preferences.quoteStyle": "single" Commented Apr 6, 2022 at 9:58
57

You can also configure the below line in your vscode user settings to adjust this setting.

"prettier.singleQuote": true
3
  • 6
    prettier is an extension, not everyone use it
    – caub
    Commented Sep 10, 2019 at 15:28
  • 4
    Frustrating that people assume you have or want to use Prettier. Unless someone asks "how do I with Prettier" - I think it's best not to answer assuming they have it.
    – Tsar Bomba
    Commented Dec 8, 2019 at 17:14
  • @TsarBomba You're right. This setting requires Prettier extension for adjusting the quotation. marketplace.visualstudio.com/… Commented Dec 15, 2019 at 8:15
19

I fixed that using Editor config, open your .editorconfig file in your project root directory (if you don't have, create that file) and add this line after the [*]

[*]
...
quote_type = single

In the wiki you can see the complete list of properties.

3
  • 1
    Upvoted. Restricts changes only to what project you're working on vs globally. Additional note: restart VS Code to make the changes go into effect.
    – EdSF
    Commented Sep 19, 2018 at 20:25
  • Just to comment, In VS Code you can set workspace settings that are specific to that project as well. This will allow you to use single/double quotes specifically on the import if you want to use the other type elsewhere within the files. The .editorconfig change will be project wide.
    – Cruril
    Commented Aug 22, 2019 at 20:21
  • I did as suggested (for TS-files) and I chose the default formatter to be EditorConfig. However, I see no difference in the VSC. There's no highlight on "wrong" quotation style nor does it perform/suggest any changes while typing. What am I missing? Commented Apr 8 at 5:15
17

As of VS Code 1.21.1 you need to edit

/usr/share/code/resources/app/extensions/typescript-basics/snippets/typescript.json

In Windows

/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/typescript-basics/snippets/typescript.json.

In Windows 10 (vscode version 1.30.* (user setup) later)

*C:\Users\<yourusername>\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\typescript-basics\snippets\typescript.json

In the 'Import external module' section of that file make the body array property to be the value "import { $0 } from '${1:module}';" The section will then look like this:

"Import external module.": {
    "prefix": "import statement",
    "body": [
        "import { $0 } from '${1:module}';"
    ],
    "description": "Import external module."
},
2
  • 2
    This solution worked for me. Literally tried everything but only this fixed it.
    – Sosa
    Commented Feb 20, 2019 at 8:29
  • Same here. Literally tried every other solution. This is the only one that solved my issue. Commented Oct 27, 2021 at 13:25
8

An alternative which does support this configuration is TypeScript Toolbox.

It is configurable by setting genGetSet.pathStringDelimiter, which already has the single-quote import as default.

2
  • 2
    Thanks for this! Worth pointing out the genGetSet.spacedImportLine setting as well so new import lines look like import { Router }.... instead of the default import {Router}...
    – FLGMwt
    Commented Jun 30, 2017 at 13:42
  • 1
    Both the answer and the comment above are great information! Thanks you two!
    – Kris Boyd
    Commented Jul 17, 2017 at 18:32
8

Go to "File > Preferences > Settings" and then add this under user settings:

"typescript.preferences.quoteStyle": "single",
"javascript.preferences.quoteStyle": "single"
2
  • Works for me, Thanks! BTW, you can add a link to the default settings which present these options: code.visualstudio.com/docs/getstarted/settings. // Preferred quote style to use for quick fixes: 'single' quotes, 'double' quotes, or 'auto' infer quote type from existing imports. Requires using TypeScript 2.9 or newer in the workspace.
    – Mosh Feu
    Commented Aug 16, 2018 at 9:30
  • There is no place to add code in File>preferences>Settings. A bunch of dialog boxes. Pess ctrl+shift+p and search for user settings and select the user settings json. And still it does not work Commented Dec 22, 2022 at 10:26
4

If You are using Pretier extension. Just use the shortcut ctrl+shift+p and search for user settings. Select user settings Json dropdown. It will open the settings.json And then add this 3 lines at the bottom

"javascript.preferences.quoteStyle": "single",
"typescript.preferences.quoteStyle": "single",
"prettier.singleQuote": true
3

As of TypeScript 2.5, the first import or export statement in the file will be scanned to determine if single or double quotes are used when using import suggestions.

https://github.com/Microsoft/TypeScript/pull/17750

2

You can also configure the below line in your vscode user settings to allow single quote in string.

Go to Preferences > User Settings

"prettier.singleQuote": true

This will allow single quote in String. Otherwise, if you manually change all double quotes to single quotes it will revert back while saving. Also, add

"tslint.autoFixOnSave": true

to auto-fix while saving.

1

This is already implemented (as mentioned in another reply)! But you are probably not on the latest version of TypeScript yet.

Solution is simple:

Click TypeScript version number (for example 2.3.4) between "TypeScript" and a little smiley face in the lower right corner. Then switch to Visual Studio Code built-in version (2.5.3 at this moment).

After this Visual Studio code will infer import quote style by looking at the first import statement. Note that a little popup label will still show double-quotes anyway.

Bug report

Relevant pull request:

This adds the ability to determine whether to use single or double quotes for new imports added via code fixes. When a new import is added, we scan the top-most statements of the source file for existing import or export declarations with module specifiers. We then use the quote style of the first one we find. If there are no existing imports in the file we fall back to using double quotes.

0

Above solutions did not work for me

So here is my work around, in you use vscode, "tslint.autoFixOnSave": true in your settings.json will automatically fix these import quotations when you save the file.

1
  • Says Unknown Configuration Setting Commented Oct 25, 2019 at 23:54
0

Open command pallete (Ctrl+Shift+P - on Windows), browse Configure User Snippets

enter image description here

Select typescript.json (TypeScript)

enter image description here

Paste this snippet to your list:

"Import external module.": {
    "prefix": "import statement",
    "body": [
        "import { $0 } from '${1:module}';"
    ],
    "description": "Import external module."
}

You are welcome:

enter 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.