VSCode single to double quote automatic replace

Question

When I execute a Format Document command on a Vue Component.vue file VSCode replace all single quoted string with double quoted string.

In my specific case this rule conflicts with electron-vue lint configuration that require singlequote.

I don't have prettier extensions installed (no prettier.singleQuote in my setting)

How to customize VSCode to avoid this?

Possible duplicate of [VS Code Auto Indent / Code Formatting changes single quotation marks to double](https://stackoverflow.com/questions/47091719/vs-code-auto-indent-code-formatting-changes-single-quotation-marks-to-double) — PatrickSteele, Feb 19 '18 at 11:46
Also related: [Visual Studio Code - Adjust import quotation setting](https://stackoverflow.com/questions/42952453/visual-studio-code-adjust-import-quotation-setting) — Liam, Aug 27 '21 at 08:01
After reading through the answers here (including the accepted one) what actually worked for me was creating a .prettierrc.json and adding the { "singleQuote": true, "jsxSingleQuote": true } to it. I already had these settings in the user settings in VSCode but they had no effect. Hope this helps someone! — Ed Bishop, Aug 08 '22 at 15:22

score 256 · Accepted Answer · edited Nov 12 '18 at 08:42

256

I dont have prettier extension installed, but after reading the possible duplicate answer I've added from scratch in my User Setting (UserSetting.json, Ctrl+, shortcut):

"prettier.singleQuote": true

A part a green warning (Unknown configuration setting) the single quotes are no more replaced.

I suspect that the prettier extension is not visible but is embedded inside the Vetur extension.

edited Nov 12 '18 at 08:42

Manohar Reddy Poreddy

25,399
9
157
140

answered Feb 19 '18 at 12:37

attdona

17,196
7
49
60

2

This didn't work for me. I had to use `vetur.format.defaultFormatterOptions` instead. See [https://vuejs.github.io/vetur/formatting.html#settings](https://vuejs.github.io/vetur/formatting.html#settings). – user1620220 Jan 17 '19 at 14:58
After opening the quick search, type ">user settings" and click "Preferences: Open User Settings". In the search box of your preferences, type "prettier.singleQuote" and click the checkbox for prettier single quote. – Kody Jul 26 '19 at 16:22
34

This didn't work for me, `quote_type = single` in `[*.myDesiredFileExtension]` section within `.editorconfig` file, was the solution. – Jan 09 '20 at 08:44
1

and you my friend are a super hero – rotimi-best Feb 09 '21 at 08:05

mustapha mekhatria · Answer 2 · 2018-12-04T21:54:38.570

186

Well, like the guy (@user2982122) mentioned but instead of File go to Code -> Preferences -> Settings, then look for Quote, select Prettier and check both boxes

edited Dec 04 '18 at 21:54

answered Dec 04 '18 at 21:43

mustapha mekhatria

3,495
1
20
26

7

Do you have to reload these settings for them to take effect? I have them both checked, but when I save my .jsx file the double quotes don't change to single. – Woodchuck Sep 17 '19 at 19:02
1

That is weird, I am using this version: Release 1.14 build 1.14.0-17740 – mustapha mekhatria Sep 19 '19 at 11:12
3

Brilliant! Thanks. (This should have been the default setting ...) – Henke Feb 04 '22 at 11:01
1

God bless you, this detail was killing me. – Fer Toasted Apr 26 '22 at 16:37
1

@Woodchuck, I ran into the same issue. It started working for me after restarting the VS Code. – Manoj Shrestha Nov 22 '22 at 05:26

score 133 · Answer 3 · answered Dec 08 '19 at 07:33

133

For projects that use .editorconfig file by default. The formatter will ignore the rules in the settings and use the rules in .editorconfig, then you can either:

Remove .editorconfig file, and use your VSCode settings.
Add quote_type = single to the .editorconfig file regarding your file type. You can also set quote_type value to double or auto.

answered Dec 08 '19 at 07:33

Tan Nguyen

1,636
1
12
9

2

I did this and it didn't work regardless if I installed editorconfig globally or I try to sue the editorconfig for VS Code. :( – acarlstein Jan 16 '20 at 17:28
Thanks, my Angular app do use `.editorconfig` by default (didn't know that) and your solution fixed my problem – benshabatnoam Aug 20 '20 at 09:54
1

please consider: you may not delete `.editorconfig` if it is a common versioned project – Oct 09 '20 at 07:45
Note: You should restart VSCode to apply these changes. – Kasun Sampath Weligamage Aug 31 '22 at 07:57

score 88 · Answer 4 · answered Dec 02 '19 at 10:59

88

It looks like it is a bug open for this issue: Prettier Bug

None of above solution worked for me. The only thing that worked was, adding this line of code in package.json:

"prettier": {
    "singleQuote": true
  },

answered Dec 02 '19 at 10:59

Avjol Sakaj

1,281
10
14

2

Unbelievably, Dec 2020, this is still the only thing that work for me as well! – Andrey Popov Dec 22 '20 at 14:33
1

Mar 2021 now and this is still the only solution work for me – tiennsloit Mar 09 '21 at 08:01
1

April 2021, only thing that worked, it is ridiculous that we need to change package.json for a local extension – Matheus Ribeiro Apr 14 '21 at 14:28
3

2022 and using Vue 3, only this one worked for me. – Lucas Marra Jul 29 '22 at 13:14
I created a project by vite and only your solution work for me – Nimble Stalker Nov 24 '22 at 14:00
1

You can easier do oneliner: `"prettier.singleQuote": true` – testing_22 Feb 22 '23 at 15:24
1

this is 2023 and this answer is working fine – Zulfikar Ahmad Jun 29 '23 at 17:22

score 73 · Answer 5 · 2022-06-17T07:53:52.543

73

At the time of writing (June 2022):

please consider that .editorconfig overwrites every other configuration at the end, find the file (most probably on the root of your project), edit it and add the following:

[*]
quote_type = single

edited Jun 17 '22 at 07:53

answered Mar 21 '20 at 08:23

3

This is the right one! – Alex Aug 10 '22 at 06:25
Open the **Output** tab, if this message shows: `Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used`, then this answer is the solution. – testing_22 Feb 22 '23 at 16:07
FYI, `quote_type` is a proposal that is not intended to be implemented by EditorConfig. See [here](https://github.com/editorconfig/editorconfig/wiki/EditorConfig-Properties#ideas-for-domain-specific-properties). – N'Bayramberdiyev Jul 12 '23 at 07:25

score 45 · Answer 6 · answered May 04 '19 at 10:54

45

From the vuejs/vetur issue page https://github.com/vuejs/vetur/issues/986# This solution worked for me.

In VSCodes settings.json file add this entry

"vetur.format.defaultFormatterOptions": {
    "prettier": {
        "singleQuote": true
    }
},

answered May 04 '19 at 10:54

Dave Pile

5,559
3
34
49

score 33 · Answer 7 · edited Sep 19 '20 at 13:30

33

Install prettier extension and paste below code in your VSCode settings.json file

 "prettier.useEditorConfig": false,
 "prettier.singleQuote": true

this will ignore your .editorconfig file setting.

edited Sep 19 '20 at 13:30

Penny Liu

15,447
5
79
98

answered May 01 '20 at 06:38

Md. Mustafizur Rahman

739
1
9
16

7

works if you want all of your other settings ruined. – Gabriel Petersson Jan 14 '21 at 14:51
this comment here is underated – Mese Sep 27 '21 at 13:30

score 19 · Answer 8 · answered Jan 16 '21 at 12:52

What worked for me was setting up the .prettierrc.json config file. Put it to the root of your project with a sample config like this:

{
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "arrowParens": "always"
}

After triggering the Format Document command, all works just as expected.

Side note: What comes as a bonus with this solution is that each team member gets the same formatting outputs thanks to the present config file.

Omar Hasan · Answer 9 · 2019-11-26T08:48:53.237

15

Correct solution :

I add .prettierrc.js file in my main root project and write

module.exports = {
    singleQuote: true
  };

edited Nov 26 '19 at 08:48

answered Nov 21 '19 at 08:07

Omar Hasan

719
7
18

I tried this but it throws an error: "ESLint: Failed to load config "defaults/configurations/eslint" to extend from." Best would be to add this in package.json. [Solution](https://stackoverflow.com/a/59137494/9294131) – Avjol Sakaj Dec 02 '19 at 11:01
did you put your .prettierrc.js file in the root of the project ? – Omar Hasan Dec 04 '19 at 09:09

score 14 · Answer 10 · answered Oct 26 '18 at 06:10

For newbies like me:

From the menu Nav bar at the top: Select File -> Preferences -> Settings. In the search text box, type in Quote In the filtered list that appears below, look for the gear icon and next to it - "Prettier". Click on check box to enable "Prettier: Single Quote"

score 10 · Answer 11 · answered Feb 12 '20 at 13:38

10

Try one of these solutions

In vscode settings.json file add this entry "prettier.singleQuote": true
In vscode if you have .editorconfig file, add this line under the root [*] symbol quote_type = single
In vscode if you have .prettierrc file, add this line

{
    "singleQuote": true,
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "singleQuote": true
        }
    }
}

answered Feb 12 '20 at 13:38

javidabd

354
4
10

2

second option worked, unfortunately the other answers in this page didn't work – Mo. Feb 21 '20 at 12:51

score 10 · Answer 12 · answered Dec 30 '20 at 15:59

quote_type = single

add this inside .editorconfig

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = false
quote_type = single

score 9 · Answer 13 · answered Feb 07 '20 at 15:59

9

I had the same issue in vscode. Just create a .prettierrc file in your root directory and add the following json. For single quotes add:

{
  "singleQuote": true
}

For double quotes add:

  {
      "singleQuote": false
  }

answered Feb 07 '20 at 15:59

Hamfri

1,979
24
28

score 9 · Answer 14 · answered Oct 05 '21 at 08:00

After struggling with the issue I found a useful tool. If you click on the Prettier word in the right lower corner you will get the Output window opened. In that window once you run formatting (in my case it is Alt + Shift + F) you will see all the configurations which prettier will use to format the document. So, we can clearly see that specifying the prettier in the prettier.singleQuote is wrong. It should just be singleQuote. Hence, having the .prettierrc file in my user root folder with the following contents produced the desired result:

{
    "trailingComma": "none",
    "useEditorConfig": false,
    "singleQuote": true
}

Also, make sure that you have the Prettier extension installed.

score 9 · Answer 15 · answered Aug 08 '22 at 03:53

First, install the Prettier extension. Create a .prettierrc configuration file at the root of your project. And add config like below:

{
  "trailingComma": "es5",
  "singleQuote": true,
  "jsxSingleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "semi": true,
  "endOfLine": "auto"
}

score 8 · Answer 16 · answered Dec 18 '18 at 02:30

As noted by @attdona the Vetur extension includes prettier.

While you can change the prettier settings, as per the accepted answer, you can also change the formatter for specific regions of a vue component.

Here, for example, I've set Vetur to use the vscode-typescript formatter as it uses single quotes by default:

score 8 · Answer 17 · edited Jul 14 '21 at 10:35

8

in .prettierrc add

{
  "arrowParens": "avoid",
  "semi": false,
  "singleQuote": true
}

edited Jul 14 '21 at 10:35

Sebastian

1,321
9
21

answered Mar 08 '21 at 19:56

Ricardo de Paula

572
5
16

score 7 · Answer 18 · answered Apr 23 '19 at 13:43

7

I'm using typescript, for me it got resolved with checking "Tslint integration" flag under prettier settings (in vscode preferences):

answered Apr 23 '19 at 13:43

Be Kind

4,712
1
38
45

https://github.com/microsoft/vscode/issues/21424#issuecomment-282524286 - this is when/where it went into VSCode – Sam Nov 29 '19 at 21:37

score 7 · Answer 19 · answered Mar 28 '20 at 15:14

7

There only solution that worked for me: and only for Angular Projects:

Just go into your project ".editorconfig" file and paste 'quote_type = single'. Hope it should work for you as well.

answered Mar 28 '20 at 15:14

Muhammad Waqas

71
1
1

i needed this solution specifically for an angular project as well, all other chnages to prettier settings did not work. – J King Dec 14 '20 at 14:48

score 7 · Answer 20 · answered May 04 '20 at 15:54

7

It works for me to check single quote in Prettier as well tslint.autoFixOnSave as true

answered May 04 '20 at 15:54

Rudra

109
2
7

score 6 · Answer 21 · answered Dec 13 '19 at 22:00

6

I added file called .prettierrc in my project folder. File content:

{
    "singleQuote": true,
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "singleQuote": true
        }
    }
}

answered Dec 13 '19 at 22:00

0lukasz0

3,155
1
24
40

mcmimik · Answer 22 · 2021-05-26T15:20:54.200

In my case, the problem was in the escaping \ character inside the string:

message = 'Error argument is not an object, it\'s ' + typeof error

Turning on the avoidEscape option and using double quotes for that string solved the problem:

message = "Error argument is not an object, it's " + typeof error

.eslintrc.js

module.exports = {
  rules : {
    // Other rules...
    'quotes' : ['error', 'single', {'avoidEscape' : true}],
  }
}

score 5 · Answer 23 · answered Jun 16 '19 at 09:36

5

You can use this in settings.json

"javascript.preferences.quoteStyle": "single"

answered Jun 16 '19 at 09:36

mperk

324
3
8

score 3 · Answer 24 · answered Jul 09 '19 at 20:03

3

Use this extension.

https://marketplace.visualstudio.com/items?itemName=BriteSnow.vscode-toggle-quotes

cmd ' (ctrl ' on win/Linux) will cycle among ' " `

answered Jul 09 '19 at 20:03

U.A

2,991
3
24
36

score 3 · Answer 25 · edited Sep 19 '20 at 13:20

3

For JSX use:

{"jsxSingleQuote": false}

edited Sep 19 '20 at 13:20

Penny Liu

15,447
5
79
98

answered Sep 04 '20 at 20:49

Juan Angel

656
6
6

score 1 · Answer 26 · edited Jan 08 '21 at 14:29

1

Well for me both options solved the issue:

By adding inside the .prettierrc - "singleQuote": true
Or by adding following inside the package.json -> "prettier": { "singleQuote": true }

Though I tried also adding .prettierrc.js and have following

module.exports = { singleQuote: true };

This didn't worked.

edited Jan 08 '21 at 14:29

sɐunıɔןɐqɐp

3,332
15
36
40

answered Jan 08 '21 at 13:14

Vishwanath Sinha

11
2

score 1 · Answer 27 · answered Jul 22 '21 at 05:21

1

This works for me : try right click on the current document and choose "format document with " , and choose your own format extension for the document. :)

answered Jul 22 '21 at 05:21

peiting sun

43
4

This worked for me. I had correct prettier settings and the correct entries in .editorconfig but double quotes were not replaced with single ones on save. I fight clicked and chose Format Document With... and setup the default formatter from the two choices. Started working after that. – user882290 Jun 01 '23 at 16:01

score 1 · Answer 28 · answered Mar 21 '22 at 11:24

I had a lot of issues controlling linting and prettier formating. I had rules for eslint on for prettier like

"prettier/prettier": [
      "error",
      { "singleQuote": true, "trailingComma": "none" }
    ],

and rules inside .prettierrc file

{
  "tabWidth": 2
}

But my .prettierrc file was not getting processed. My fix was installing prettier as a package on dev dependency. So the solution that worked for me was installing all these packages eslint-config-prettier eslint-plugin-prettier and prettier.

score 1 · Answer 29 · answered Jun 15 '22 at 19:38

1

If you're using a YAML plugin, it also has a single/double quote option that was tripping me up. Cheers.

answered Jun 15 '22 at 19:38

scott-joe

169
1
5

score 0 · Answer 30 · answered Jul 27 '22 at 13:04

0

"prettier": { "singleQuote": true },

This line of code save my hours.

answered Jul 27 '22 at 13:04

israr

332
2
4

score 0 · Answer 31 · answered Jan 28 '23 at 16:18

The way I solve it is by disabling all formatting rules in eslint by installing npm i -D eslint-config-prettier then adding "prettier" at the end of extends array of eslint config file

module.exports = {
  env: {
    node: true,
  },
  extends: [
    'airbnb-base',
    'airbnb-typescript/base',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'prettier',

  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: ['./tsconfig.json'],
  },
  plugins: ['@typescript-eslint'],
  root: true,
};

And then made prettier as my default formatter

score 0 · Answer 32 · answered Aug 18 '23 at 20:51

wow. none of the above worked. any text with apostrophe, when i type in 'bob\'s Burgers' , on save, turns into "bob's burgers", then eslint would complain. Prettier was the culprit. prettier would auto double quote, causing eslint to error.

{
  ...
  "singleQuote": true,
  "jsxSingleQuote": true,
}

What worked for me: disable prettier, and let eslint and VScode to all the work.

go to ctrl +p.
go to "> settings.json" here's my settings.json

{
  "editor.minimap.enabled": false,
  "redhat.telemetry.enabled": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript"
  ],
  "[javascript]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
  },
  "editor.tabSize": 2,
  "workbench.tree.indent": 15,
  "editor.wordWrap": "on",
  "editor.foldingMaximumRegions": 50000,
  "search.exclude": {
    "**/*.bundle": true,
    "**/*.bundle.map": true,
    "**/dist": true,
    "**/mobile-gifts": true
  },
  "[python]": {
    "editor.formatOnType": true
  },
  "editor.inlineSuggest.enabled": true,
  "files.exclude": {
    "**/mobile-gifts": true
  },
  "editor.formatOnSave": true
}

and my eslintrc.js

// eslint-disable-next-line
module.exports = {
  env: {
    browser: true,
    es2021: true,
    jest: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
  ],
  overrides: [],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react"],
  rules: {
    "no-multiple-empty-lines": ["error", { max: 1, maxBOF: 0, maxEOF: 0 }],
    indent: ["error", 2],
    "react/react-in-jsx-scope": "off",
    camelcase: "off",
    "spaced-comment": "error",
    quotes: "off",
    "no-duplicate-imports": "error",
    semi: ["error", "never"],
    "react-hooks/exhaustive-deps": "off",
    "@typescript-eslint/no-explicit-any": "off",
  },
}

VSCode single to double quote automatic replace

32 Answers32

Linked