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 TypeScri

Answer 1

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

Answer 2

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

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

Answer 3

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.

Answer 4

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

"prettier.singleQuote": true

Answer 5

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.

Answer 6

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.