Is there a way to change from double quotes to single quotes in VS Code quick fix?

Question

When using VSCode with Angular, I write my import statement list this:

import { AppComponent } from './app.component';

The VSCode Quick Fix adds them like this:

import { WelcomeComponent } from "app/home/welcome.component";

Is there a way to change the VS Code Quick Fix with a VS Code setting to use single instead of double quotes?

score 18 · Answer 1 · answered Jan 10 '20 at 15:54

18

If your project has a .editorconfig file, try adding the following line:

[*]
...
quote_type = single

I've found that the .editorconfig file seems to override any settings for vscode, prettier, tslint, etc. and it seems to default to something other than single quotes.

Deleting the file can work as well if you don't need it.

More info on editorconfig.

answered Jan 10 '20 at 15:54

David Long

668
7
9

4

In case it saves someone else some time: this doesn't work yet (at least for me in June 2020 in VS Code) as `quote_type` is a [proposed idea](https://github.com/editorconfig/editorconfig/wiki/EditorConfig-Properties#ideas-for-domain-specific-properties) and not yet an official property. Here's the [feature proposal](https://github.com/editorconfig/editorconfig/issues/410). – marchica Jun 22 '20 at 20:55
I suppose I should add the caveat that I've only ever encountered the problem/solution with the .editorconfig file in an Angular application. It could be dependent on what extensions are installed... – David Long Jun 23 '20 at 20:14
Thanks, this worked for me while none of the other did. – korn3l Sep 15 '20 at 11:33

score 13 · Answer 2 · answered Jan 14 '18 at 14:50

13

You can use the Prettier Extension with the following settings (global/workspace).

"prettier.singleQuote": true

answered Jan 14 '18 at 14:50

gngchrs

468
4
11

score 9 · Accepted Answer · answered Jun 23 '17 at 08:29

9

Check your tslint.json for the quotemark part.

If it's setted to use doublequote by

"quotemark": [
  true,
  "double"   < ------mention here
]

then there will be warning at your typescript file while using singlequote. And this will lead VS Code's quick-fix(show fix option for me) to change singlequote to doublequote.

So the solution should be change double to single.

"quotemark": [
  true,
  "single"   < ------change here
]

answered Jun 23 '17 at 08:29

Pengyy

37,383
15
83
73

9

This is not accurate. This setting only changes the lint settings, it does not alter VS Code's behaviour. – Spikeh Jul 11 '17 at 13:04
@Spikeh you got any solution? – Anshad Vattapoyil Oct 18 '17 at 16:53
I posted this weeks before I found one. However, I've completely forgotten how I did it and there's no docs. See this discussion for some suggestions: https://github.com/Microsoft/TypeScript/issues/13270 – Spikeh Oct 18 '17 at 17:24
See the accepted answer of this SO https://stackoverflow.com/questions/42952453/visual-studio-code-adjust-import-quotation-setting for the corresponding setting in VS Code – c_froehlich Apr 29 '21 at 07:34

score 5 · Answer 4 · answered May 01 '21 at 07:12

5

This works nice and simply...

Open settings in VSCode, e.g. Command + ',' and then filter for "typescript":

Look for "quote style" and change:

answered May 01 '21 at 07:12

Andrew E

7,697
3
42
38

Nope, this option is gone. Why does VS Code team keep removing settings that weren't broken? – Tom Grushka Jan 15 '23 at 23:26

score 4 · Answer 5 · answered May 16 '19 at 16:03

4

Press Ctrl + , for settings.

Then search for prettier. Find the setting Prettier: Single Quote

Set that to true.

You can set that in user settings or work space setting.

answered May 16 '19 at 16:03

VivekDev

20,868
27
132
202

score 3 · Answer 6 · edited Jul 07 '20 at 07:53

3

open the VS Code settings.json after change typescript setting to

 "[typescript]": { "editor.defaultFormatter": "vscode.typescript-language-features" }

edited Jul 07 '20 at 07:53

shuberman

1,416
6
21
38

answered Jul 07 '20 at 05:48

Nisanur

89
1
6

You can use the command `CTRL + SHIFT + P` to open the command palette, then search for settings. You should see `Open Settings (JSON)` – BrunoElo Jul 16 '21 at 05:02

score 0 · Answer 7 · answered Jun 23 '17 at 08:06

0

Have a look at this extension called "ECMAScript Quotes Transformer" that you can install by pressing :

Ctrl/Cmd + P

and type

ext install es-quotes

ECMAScript Quotes Transformer on Visualstudio.com

answered Jun 23 '17 at 08:06

malux

63
4

score 0 · Answer 8 · answered Jul 22 '20 at 22:12

In tslint.json

quotemark should be set inside rules

{
    "defaultSeverity": "error",
    "extends": ["tslint:recommended"],
    "jsRules": {},
    "rules": {
      "quotemark": [true, "single", "avoid-escape", "avoid-template"],
      "no-console": false
    },
    "rulesDirectory": [],
    "compilerOptions": {
      "types": ["reflect-metadata", "jest"],
       "typeRoots": ["./types", "./node_modules/@types"]
     },
     "exclude": ["node_modules", "**/*.spec.ts", "**/*.test.ts"],
     "include": ["./**/*.tsx", "./**/*.ts"]
  }

Is there a way to change from double quotes to single quotes in VS Code quick fix?

8 Answers8