Visual Studio Code - Adjust import quotation setting
TypescriptVisual Studio-CodeTypescript Problem Overview
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?
Typescript Solutions
Solution 1 - Typescript
As of VSCode 1.10, this is (sadly) not possible yet. But is an issue for a lof of the users as it seems. The VSCode theme is aware of this issue and you can follow this to know when it is implemented: https://github.com/Microsoft/TypeScript/issues/13270
Update June 2018
Since VSCode 1.24 (June 2018) there is an option for this!
"typescript.preferences.quoteStyle": "single"
For more info see:
https://code.visualstudio.com/updates/v1_24#_preferences-for-auto-imports-and-generated-code
Solution 2 - Typescript
You can also configure the below line in your vscode user settings to adjust this setting.
"prettier.singleQuote": true
Solution 3 - Typescript
I fixed that using [Editor config][1], 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][2] you can see the complete list of properties.
[1]: http://editorconfig.org/ "Editor config" [2]: https://github.com/editorconfig/editorconfig/wiki/EditorConfig-Properties "Complete list of properties of editor config"
Solution 4 - Typescript
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."
},
Solution 5 - Typescript
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.
Solution 6 - Typescript
Go to "File > Preferences > Settings" and then add this under user settings:
"typescript.preferences.quoteStyle": "single",
"javascript.preferences.quoteStyle": "single"
Solution 7 - Typescript
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.
Solution 8 - Typescript
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.
Solution 9 - Typescript
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.
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.
Solution 10 - Typescript
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.
Solution 11 - Typescript
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:
