使用 Vetur 和 Prettier 以及 Vue-Cli 3 时，VSCode 不会将 <template> 中的双引号更改为单引号答案

【问题标题】：VSCode not changing double quotes to single quotes in <template> when using Vetur and Prettier and Vue-Cli 3使用 Vetur 和 Prettier 以及 Vue-Cli 3 时，VSCode 不会将 <template> 中的双引号更改为单引号
【发布时间】：2019-05-09 10:02:17
【问题描述】：

我正在尝试设置我的 VSCode 编辑器来自动格式化我的 Vuejs 代码。我正在使用 Vetur 扩展、Prettier extension 和 ESLint extension。

问题是当我保存我的.vue 文件时，我的<template> 元素中的单引号会自动更改为双引号：

当我这样写代码然后保存时...

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

VSCode 自动将 .vue template 部分中的单引号更改为双引号，如下所示：

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

然后我收到<template> 代码的其余部分的警告和错误。但是，.vue 单个文件组件的<script> 和<style> 部分中的代码保持不变/和/或正确修复....只是<template> 部分存在上述问题。那么，我的设置是否正确？

我的设置是：

我在项目根目录 .prettierrc.js 中设置了我的 Prettier 配置文件，如下所示：

module.exports = {
    singleQuote: true
};

我的 .eslintrc.js 看起来像这样：

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

然后在我的 VSCode 用户设置中我有：

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

并且应用的 package.json 文件包含以下 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"
  }

【问题讨论】：

标签： vue.js visual-studio-code vue-cli-3 prettier

【解决方案1】：

我在运行 npm run serve in 的目录中创建了一个名为 .prettierrc.js 的文件。

此文件包含：

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

现在它大部分都可以工作，除了超过 200 次的方法调用。然后 pretier 忘记了最后的逗号。

【讨论】：

【解决方案2】：

我发现让它工作的唯一方法是从我的.eslintrc.js中删除以下内容

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

【讨论】：

dxmn... 这也适用于我。其他解决方案均无效。尽管如此，我还是无法弄清楚引擎盖下出了什么问题。

【解决方案3】：

将默认格式化程序从 prettier 更改为 vetur 对我有用

【讨论】：