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

Question

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

我的设置是：

\n\n

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

\n\n

module.exports = {\n    singleQuote: true\n};\n

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

该应用程序的package.json文件包含以下 devDependency：

\n\n

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

\n

Answer 1

我发现让它发挥作用的唯一方法是从我的.eslintrc.js

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