[visual-studio-code] VSCode single to double quote automatic replace

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?

please consider .editorconfig overwrites everything, use:

[*]
quote_type = single

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

You can use this in settings.json

"javascript.preferences.quoteStyle": "single"

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.

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
  }

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

Correct solution :

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

module.exports = {
    singleQuote: true
  };

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

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

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

For JSX use:

{"jsxSingleQuote": false}

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.

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:

Well for me both options solved the issue:

1. By adding inside the .prettierrc - "singleQuote": true

2. 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.

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.

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

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

Use this extension.

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

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

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

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"

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

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.