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

Answer 1

Try one of these solutions

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

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

Answer 2

Use this extension.

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

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

Answer 3

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.

Answer 4

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
  }

Answer 5

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.

Answer 6

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