VSCode不会将双引号更改为单引号 当使用Vetur和Prettier和Vue-Cli 3时

Question

我正在尝试将我的VSCode编辑器设置为autoformat我的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>代码的警告和错误。但是，<script>单个文件组件的<style>和.vue部分中的代码保持不变/和/或正确固定....它只是具有上述问题的<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"
  }

Answer 1

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

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

Answer 2

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

该文件包含：

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

现在它主要工作，除了超过200的方法调用。然后更漂亮的忘记了最后的逗号。