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

在使用ESLint和Prettier的Visual Studio Code中处理.vue文件时，似乎我无法获得vue / max-attributes-per-line自动正确修复。

例如，将vue / max-attributes-per-line设置为“ off”，并且我尝试手动添加换行符，它将其校正为始终使每个元素都在一行上，无论它是81、120 ，200个或更多字符宽。 我该如何找出是什么迫使我的标记元素恰好位于一行上？

我正在使用带有Prettier 1.14.2的ESLint版本5.1.0和Visual Studio Code（不带Prettier扩展名）。

这是.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时，它似乎重新格式化了两次：首先将其重新格式化以将所有内容放在一行上，然后半秒后重新格式化上面的结果。 有什么想法吗？是什么原因导致这种怪异-是否正在运行多个重新格式化程序？我如何确定第一个是禁用它？

VS Code工作空间设置：

{
  "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
  ]
}

.eslintrc.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'
  }
}

Without changing any settings, ESLint --fix does indeed format properly--breaking all my .vue template elements into many lines properly. So any ideas how I whip VS Code into shape? The above settings didn't help, but I am at a loss how as to even know what is interfering. Any ideas?

To emphasize, when I save in VS Code, a long HTML element will collapse to one line then break to two lines a half-second later, all from one save operation. I'm expecting it instead to break it up into many lines. It would be okay if it took several saves, but instead the first save shows this behavior as well as every subsequent save.