VSCode not changing double quotes to single quotes in <template> when using Vetur and Prettier and Vue-Cli 3

Question

I am trying to set up my VSCode editor to autoformat my Vuejs code. I am using the Vetur extension, the Prettier extension, and the ESLint extension.

The problem is that when I save my .vue files, the single quotes are automatically changed to double quotes in my <template> elements:

When I write code like so and then save...

<template>
    <section>
        <section v-if='errored'>
        ...snip...
</template>

VSCode automatically changes the single quotes to double quotes in the .vue template section like so:

<template>
    <section>
        <section v-if="errored"> <-------- 
        ...snip...
</template>

And then I get warnings and errors for the rest of the <template> code. However, the code in the <script> and <style> sections of the .vue single file components are left intact/and/or fixed correctly....it's just the <template> section that has the above issue. So, do I have my settings correct?

My settings are:

I set my Prettier config file in project root .prettierrc.js like so:

module.exports = {
    singleQuote: true
};

My .eslintrc.js looks like so:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'plugin:prettier/recommended',
    '@vue/prettier'
  ],
  rules: {
    'no-console': 'off',
    'no-debugger': 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
};

And then in my VSCode user settings I have:

...snip..
"vetur.validation.template": false, <-- turn off Vetur’s linting feature and rely on ESLint + Prettier, instead
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": true

And the app's package.json file contains the following devDependencies:

"devDependencies": {
    "@vue/cli-plugin-babel": "^3.2.0",
    "@vue/cli-plugin-eslint": "^3.2.1",
    "@vue/cli-service": "^3.2.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "node-sass": "^4.9.4",
    "sass-loader": "^7.1.0",
    "vue-template-compiler": "^2.5.17"
  }

Carousal

Answer 1

I created a file named .prettierrc.js in the directory I run npm run serve in.

This file contains:

module.exports = {
    singleQuote: true,
    trailingComma: "es5",
    printWidth: 200
};

Now it mostly works, except for method calls that are longer then 200. Then pretier forgets a comma at the end.

Piracy

trailingComma does not work. Just very brutely changed trailingComma: "es5", to trailingComma: false, . And you know what it worked. Don't have a slightest idea if I had done correctly but it did worked. – Photoluminescence

Answer 2

Only way I found to get this to work was to remove the following from my .eslintrc.js

'plugin:prettier/recommended',
'@vue/prettier'

Postpone

dxmn... This works for me, too. None of other solutions work. Still, I cannot figure out what's wrong under the hood. – Algebraic

Answer 3

Changing the default formatter from prettier to vetur worked for me

Viscount