Vetur: Single quotes are being replaced with double quotes

[failpunk]

• [X] I have searched through existing issues
• [X] I have read through docs
• [X] I have read FAQ

Info

• Platform: macOS Mojave 10.14.1 (18B75)
• Vetur version: 0.14.1
• VS Code version: Version 1.29.1 (1.29.1)

Problem

VS Code has started to replace all my single quotes with double quotes out of nowhere.
_Side note: this happened after updating to MacOS Mojave._

Here are my settings with singleQuote set to true.

Reproducible Case

Replaces all my Javascript single quotes with double quotes within .vue files in VS Code when using format document.

[octref]

https://github.com/vuejs/vetur/blob/master/CHANGELOG.md#formatter-changes

I guess I should also add some documentation for setting global configurations for the default formatters.

[failpunk]

Yeah, that did it @octref

Solution:

• Add .prettierrc file
• move all prettier.* settings from VS Code to file.

[hezhongfeng]

@failpunk @octref
That means vsc's user setting "prettier.singleQuote": true, not work？

[hezhongfeng]

@failpunk
Your solution not work for me.
I add .prettierrc.js file
and write

module.exports = {
  singleQuote: true
};

It work.

[octref]

Yep, that's the temporary solution. However, unlike in the past when you can specify prettier.* globally, there's no way to do that now.

My plan is to:

• Allow vetur.format.defaultFormatterOptions.prettier.*.
• When a prettier config file is found, ignore vetur.format.defaultFormatterOptions.prettier.* and use that file + vetur.format.options.
• Otherwise, use vetur.format.defaultFormatterOptions.prettier.* + vetur.format.options.

[usercao]

@octref I think the setting of formatter is too frequently,and the readability may be get worse when add configuration files,I hope recover the global config mode,it must add config file in many projects,it is a repetitive action,too complicated.back to the past of VS Code.

[octref]

It has been a major confusion when you have both a project config and config from prettier.*. Which one does Vetur take? What if I specify option A in global config and B in .prettierrc?
Reading settings from another extension's scope is also confusing.

[njzydark]

@octref Hope to add an option to turn off formatting, such as vetur.format.disable. In this case, you don’t need to do this and it will be easier to use prettier and eslint:

 "vetur.format.defaultFormatter.html": "none",
 "vetur.format.defaultFormatter.css": "none",
 "vetur.format.defaultFormatter.js": "none",
 "vetur.format.defaultFormatter.less": "none",
 "vetur.format.defaultFormatter.postcss": "none",
 "vetur.format.defaultFormatter.scss": "none",
 "vetur.format.defaultFormatter.stylus": "none",
 "vetur.format.defaultFormatter.ts": "none"

[octref]

@0njzy0 That's covered in https://github.com/vuejs/vetur/issues/950. Now even if you set the above, it doesn't stop Vetur from registering a formatter.

[octref]

Use 0.14.2 and see https://vuejs.github.io/vetur/formatting.html#settings.

If you want to set global prettier setting, either:

• Make a .prettierrc config at your home directory

• Use the below config and do NOT include a .prettierrc in your home directory

  "vetur.format.defaultFormatterOptions": {
  "prettier": {
    // Prettier option here
    "semi": false
  }
  }
  

[njzydark]

@octref Wow,Thanks!

[sirarthurnell]

The solution of @hezhongfeng is the only one that worked for me. I tried the rest of them before and they didn't work.

[santironhacker]

After stepping into the same problem, the solution has been solved into the commit for vetur:
Set a prettierrc config for vetur #39

Simply add to your package.json below all other keys:
"prettier": { "singleQuote": true }

No need of prettierrc file.

[vip32]

yes, and the semicolumn too:

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

[octref]

"prettier": { "singleQuote": true }

@santironhacker
I wasn't aware that works as well 😅
Wanna send a PR to update documentation?

[featherart]

Generally I wish I didn't have to spend time trying to figure out why VS Code suddenly decided to add double quotes by default on save. I added a .prettierrc file and all of the other things people recommended and in the end I just had to go back to global settings and repeatedly unselect "auto" on quote types. I miss the global settings file. I had already done this unsetting but it reset itself to "auto" automagically. Less automagic, more control. That would be great!

[isabellachen]

ctrl + shift + p > Preferences: Open Settings

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

[octref]

@featherart

https://vuejs.github.io/vetur/formatting.html#settings

[featherart]

@featherart

https://vuejs.github.io/vetur/formatting.html#settings

Thanks @octref but I already tried the analog of this for React and it did not work b/c as it turns out I was using a Prettier package in VS that did not accept single quote default as a configuration option (it would still replace my single quotes with double quotes in JSX on save). So I just had to uninstall the package I was using and pick a different one. It was just a lot of fiddling to get back to my original settings. My point is I didn't want to spend time reconfiguring to override defaults when I had already done this. Opinionated formatter is not ideal, as it basically always ends with a one size fits none type situation. My hope is that VS doesn't continue on that trajectory.

[octref]

@featherart It used to be a lot of confusion, when people had 3 sources of configs:

• .prettierrc in project
• prettier.* configs
• vetur.format.* configs

So the recommended way is to just set a .prettierrc, which both Vetur and the Prettier extensions read. Reading from other extension's setting is implicit and causes confusion.