Vue.js 使用 ESLint 和 Prettier 在 Visual Studio Code 中保存时无法获得正确的自动格式化

在VisualStudio代码中，使用ESLint和Prettier处理.vue文件，似乎我无法让每行的vue/max属性正确地自动修复.

例如，当vue/max attributes per line设置为"off"时，我try 手动添加换行符，它会更正它，使每个元素始终不超过一行，无论其宽度是81、120、200或更多个字符.How can I figure out what is forcing my markup elements onto exactly one line?

我使用的是ESLint版本5.1.0和Visual Studio代码(没有更漂亮的扩展)，以及更漂亮的1.14.2.

下面是一个例子.vue文件——我不能让它在多行上运行，无论我做什么，当我'vue/max-attributes-per-line': 'off'.每次我保存时，它都会强制将一长行标记放在一行上.

<template>
  <font-awesome-icon v-if="statusOptions.icon" :icon="statusOptions.icon" :spin="statusOptions.isIconSpin" :class="['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]" />
</template>

如果我设置'vue/max-attributes-per-line': 2，它的格式是这样的，只有一个换行符(这也是非常错误的).

<font-awesome-icon
  v-if="statusOptions.icon" 
  :icon="statusOptions.icon"
  :spin="statusOptions.isIconSpin"
  :class="['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]"
/>

如果我试图手动重新格式化它，当我保存时它会恢复到上面的格式.

此外，当我点击Ctrl+S时，它似乎重新格式化了两次:首先，它重新格式化，将所有内容放在一行上，然后在半秒钟后，格式化上述结果.Any ideas? 是什么导致了这种奇怪——是否有多个重新格式化程序在运行？我怎么知道第一个要禁用的是什么？

VS代码工作区设置:

{
  "editor.formatOnType": false,
  "editor.formatOnPaste": false,
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.tabSize": 2
  },
  "[vue]": {
    "editor.tabSize": 2
  },
  "[csharp]": {
    "editor.tabSize": 4
  },
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
  "javascript.referencesCodeLens.enabled": true,
  "vetur.validation.script": false,
  "vetur.validation.template": false,
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "eslint.options": {
    "extensions": [
      ".html",
      ".js",
      ".vue",
      ".jsx"
    ]
  },
  "eslint.validate": [
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    },
    "vue-html",
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    }
  ],
  "editor.rulers": [
    80,
    100
  ]
}

埃斯林特先生.js:

module.exports = {
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
    node: true,
    jest: true
  },
  globals: {
    expect: true
  },
  extends: [
    'prettier',
    'plugin:vue/recommended',        // /base, /essential, /strongly-recommended, /recommended
    'plugin:prettier/recommended',   // turns off all ESLINT rules that are unnecessary due to Prettier or might conflict with Prettier. 
    'eslint:recommended'
  ],
  plugins: ['vue', 'prettier'],
  rules: {
    'vue/max-attributes-per-line': 'off',
    'prettier/prettier': [            // customizing prettier rules (not many of them are customizable)
      'error',
      {
        singleQuote: true,
        semi: false,
        tabWidth: 2
      },
    ],
    'no-console': 'off'
  }
}

在不更改任何设置的情况下，ESLint --fix确实可以正确格式化——打破了我的所有设置.将vue模板元素正确地分成多行.So any ideas how I whip VS Code into shape?上述设置没有帮助，但我甚至不知道是什么干扰了我.有什么 idea 吗？

要强调的是，当我在VS代码中保存时，一个长HTML元素将折叠为一行，然后在半秒钟后中断为两行，所有这些都来自一个保存操作.我希望它能把它分成许多行.如果进行了几次保存也没关系，但是第一次保存会显示这种行为以及随后的每次保存.