Visual Studio Code - Adjust import quotation setting

Question

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/...")

How can I adjust the setting of the import?

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode — Ruslan, Oct 25 '17 at 10:13

score 206 · Accepted Answer · edited Jul 06 '22 at 17:31

206

"typescript.preferences.quoteStyle": "single"

For more info see:

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

edited Jul 06 '22 at 17:31

Chris Weber

5,555
8
44
52

answered Mar 22 '17 at 13:24

Sebastian Sebald

16,130
5
62
66

29

`"typescript.preferences.quoteStyle": "single"` – Niko Dec 30 '18 at 18:34
7

This doesn't seem to take effect for me. I still get double quotes from suggestions and snippets. – John Knoop Jun 20 '19 at 14:58
Same to me, changed on all possibles levels (user, workspace, project) and still have double quotes :( – Kostanos Aug 27 '19 at 00: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 Apr 27 '20 at 15:08
1

Yep, if using javascript you will need `"javascript.preferences.quoteStyle": "single"` – Finlay Percy Apr 06 '22 at 09:58

score 56 · Answer 2 · answered Sep 03 '17 at 08:17

56

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

"prettier.singleQuote": true

answered Sep 03 '17 at 08:17

abdllhbyrktr

883
1
13
17

6

prettier is an extension, not everyone use it – caub Sep 10 '19 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 Dec 08 '19 at 17:14
@TsarBomba You're right. This setting requires Prettier extension for adjusting the quotation. https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode – abdllhbyrktr Dec 15 '19 at 08:15

score 19 · Answer 3 · answered Jan 15 '18 at 20:12

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.

answered Jan 15 '18 at 20:12

Joel Jacquez

192
1
9

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 Sep 19 '18 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 Aug 22 '19 at 20:21

score 17 · Answer 4 · edited Feb 09 '19 at 00:03

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."
},

This solution worked for me. Literally tried everything but only this fixed it. — Sosa, Feb 20 '19 at 08:29
Same here. Literally tried every other solution. This is the only one that solved my issue. — Edmund Rosewright, Oct 27 '21 at 13:25

score 8 · Answer 5 · answered Mar 23 '17 at 08:17

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.

answered Mar 23 '17 at 08:17

Boris van Katwijk

2,998
4
17
32

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 Jun 30 '17 at 13:42
1

Both the answer and the comment above are great information! Thanks you two! – Kris Boyd Jul 17 '17 at 18:32

score 8 · Answer 6 · answered Jun 21 '18 at 14:03

8

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

"typescript.preferences.quoteStyle": "single",
"javascript.preferences.quoteStyle": "single"

answered Jun 21 '18 at 14:03

Wagner Danda da Silva Filho

4,958
9
39
49

Works for me, Thanks! BTW, you can add a link to the default settings which present these options: https://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 Aug 16 '18 at 09: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 – Lahiru Lanka Rathnayaka Dec 22 '22 at 10:26

score 3 · Answer 7 · answered Sep 21 '17 at 03:36

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

answered Sep 21 '17 at 03:36

Trevor Daniels

1,119
8
5

score 2 · Answer 8 · answered Mar 23 '18 at 07:34

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.

Andrei Sinitson · Answer 9 · 2017-10-10T14:36:51.483

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.

score 1 · Answer 10 · answered Dec 22 '22 at 10:33

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

score 0 · Answer 11 · answered Jan 30 '19 at 06:03

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.

answered Jan 30 '19 at 06:03

Varun Sukheja

6,170
5
51
93

Says `Unknown Configuration Setting` – Edgar Quintero Oct 25 '19 at 23:54

score 0 · Answer 12 · answered Dec 14 '21 at 23:33

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

Select typescript.json (TypeScript)

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:

Visual Studio Code - Adjust import quotation setting

12 Answers12

Linked