VSCode single to double quote automatic replace

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

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

The only thing that worked was, adding this line of code in package.json:

"prettier": {
  "singleQuote": true
}

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

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

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.

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.

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"

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

module.exports = {
  singleQuote: true
};

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

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

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.

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

in .prettierrc add

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

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
}

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:

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

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

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

Go to Settings, then look for Quote Double, and select JavaScript Preferences

or add this to VS settings.json

"javascript.preferences.quoteStyle": "double"

or

"javascript.preferences.quoteStyle": "single"

Only for Angular Projects:

Just go into your project ".editorconfig" file and paste 'quote_type = single'.

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

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

You can use this in settings.json

"javascript.preferences.quoteStyle": "single"

For JSX use:

{"jsxSingleQuote": false}

Use this extension.

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

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

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.

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

Try right click on the current document
and choose "format document with " ,
and choose your own format extension for the document.

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 }