267

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?

4

34 Answers 34

272

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.

4
  • 2
    This didn't work for me. I had to use vetur.format.defaultFormatterOptions instead. See https://vuejs.github.io/vetur/formatting.html#settings. Jan 17, 2019 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, 2019 at 16:22
  • 39
    This didn't work for me, quote_type = single in [*.myDesiredFileExtension] section within .editorconfig file, was the solution.
    – user3025289
    Jan 9, 2020 at 8:44
  • html.completion.attributeDefaultValue: "singlequotes" After such a long struggling, I'll add my comment here to the top answer. The problem is, there is additional feature and additional setting that does not respect .editor config or prettier. It is html.completion.attributeDefaultValue: "singlequotes" I was testing HTML with adding new attribute, and even with all plugins disabled, it still adds double quote no matter what. This is VSCode feature, and it have separate settins, please, add this to your settings and enjoy! Consider to add this to response, Dec 2, 2023 at 16:23
197

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

enter image description here enter image description here

5
  • 8
    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, 2019 at 19:02
  • 1
    That is weird, I am using this version: Release 1.14 build 1.14.0-17740 Sep 19, 2019 at 11:12
  • 3
    Brilliant! Thanks. 👍 (This should have been the default setting ...) Feb 4, 2022 at 11:01
  • 1
    God bless you, this detail was killing me. Apr 26, 2022 at 16:37
  • 2
    @Woodchuck, I ran into the same issue. It started working for me after restarting the VS Code. Nov 22, 2022 at 5:26
142

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.
5
  • 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, 2020 at 17:28
  • Thanks, my Angular app do use .editorconfig by default (didn't know that) and your solution fixed my problem Aug 20, 2020 at 9:54
  • 1
    please consider: you may not delete .editorconfig if it is a common versioned project
    – user3025289
    Oct 9, 2020 at 7:45
  • Note: You should restart VSCode to apply these changes. Aug 31, 2022 at 7:57
  • Thanks. Works like a charm after adding quote_type = single in my vue app (still keep .editorconfig) Feb 3 at 2:07
89

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
  },
9
  • 3
    Unbelievably, Dec 2020, this is still the only thing that work for me as well! Dec 22, 2020 at 14:33
  • 1
    Mar 2021 now and this is still the only solution work for me
    – tiennsloit
    Mar 9, 2021 at 8:01
  • 1
    April 2021, only thing that worked, it is ridiculous that we need to change package.json for a local extension Apr 14, 2021 at 14:28
  • 3
    2022 and using Vue 3, only this one worked for me. Jul 29, 2022 at 13:14
  • 1
    You can easier do oneliner: "prettier.singleQuote": true
    – testing_22
    Feb 22, 2023 at 15:24
74

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
3
  • 3
    This is the right one!
    – An Vo
    Aug 10, 2022 at 6: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, 2023 at 16:07
  • FYI, quote_type is a proposal that is not intended to be implemented by EditorConfig. See here. Jul 12, 2023 at 7:25
47

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

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.

2
  • 8
    works if you want all of your other settings ruined. Jan 14, 2021 at 14:51
  • this comment here is underated
    – Mese
    Sep 27, 2021 at 13:30
20

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.

1
  • Worked for me and instead I included the command I want within .prettierrc.js
    – KiritoLyn
    Sep 18, 2023 at 7:05
15

Correct solution :

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

module.exports = {
    singleQuote: true
  };
2
  • 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 Dec 2, 2019 at 11:01
  • did you put your .prettierrc.js file in the root of the project ?
    – Omar Hasan
    Dec 4, 2019 at 9:09
14

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"

11

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
        }
    }
}
1
  • 2
    second option worked, unfortunately the other answers in this page didn't work
    – Mo.
    Feb 21, 2020 at 12:51
11

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

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.

enter image description here enter image description here

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

in .prettierrc add

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

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:

vscode vetur settings

7

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

vscode settings for prettier, fixing double quote auto formatting issue

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

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, 2020 at 14:48
7

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

enter image description here

enter image description here

7

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

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

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

You can use this in settings.json

"javascript.preferences.quoteStyle": "single"
0
4

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

enter image description here

or add this to VS settings.json

"javascript.preferences.quoteStyle": "double"

or

"javascript.preferences.quoteStyle": "single"
3

Use this extension.

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

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

3

For JSX use:

{"jsxSingleQuote": false}
1

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.

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. :)

1
  • 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 1, 2023 at 16:01
1

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.

1

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.