title: Can't get correct autoformat on save in Visual Studio Code with ESLint and Prettier
body: <p>in Visual Studio Code with ESLint and Prettier when working on .vue files, it seems I can't get vue/max-attributes-per-line to auto-fix correctly.</p>
  <p>For example, with vue/max-attributes-per-line set to 'off', and I try to add line breaks manually it corrects it to always have every element on no more than one line, no matter if it is 81, 120, 200, or more characters wide.  <strong>How can I figure out what is forcing my markup elements onto exactly one line?</strong></p>
  <p>I am using ESLint version 5.1.0 and Visual Studio Code (without the Prettier Extension), with Prettier 1.14.2.</p>
  <p>Here's the example in a .vue file-- I cannot make this go on multiple lines no matter what I do, when  <code>'vue/max-attributes-per-line': 'off'</code>.  Every time I save, it forces the long line of markup to be all on one line.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;font-awesome-icon v-if=&quot;statusOptions.icon&quot; :icon=&quot;statusOptions.icon&quot; :spin=&quot;statusOptions.isIconSpin&quot; :class=&quot;['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]&quot; /&gt;
  &lt;/template&gt;
  </code></pre>
  <p>If I set <code>'vue/max-attributes-per-line': 2</code>, it formats like so, with one line break(which is quite wrong as well).</p>
  <pre class="lang-html prettyprint-override"><code>&lt;font-awesome-icon
    v-if=&quot;statusOptions.icon&quot; 
    :icon=&quot;statusOptions.icon&quot;
    :spin=&quot;statusOptions.isIconSpin&quot;
    :class=&quot;['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]&quot;
  /&gt;
  </code></pre>
  <p>If I try to reformat it manually, it just reverts to the above when I save.</p>
  <p>Additionally, it seems to reformat twice when I hit Ctrl+S: first it reformats to put it all on one line, then a half-second later the formatting above results.  <strong>Any ideas</strong>?  What is causing this weirdness--are there multiple reformatters running? How do I figure out what the first one is to disable it?</p>
  <p>VS Code workspace settings:</p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;editor.formatOnType&quot;: false,
    &quot;editor.formatOnPaste&quot;: false,
    &quot;editor.formatOnSave&quot;: true,
    &quot;[javascript]&quot;: {
      &quot;editor.tabSize&quot;: 2
    },
    &quot;[vue]&quot;: {
      &quot;editor.tabSize&quot;: 2
    },
    &quot;[csharp]&quot;: {
      &quot;editor.tabSize&quot;: 4
    },
    &quot;javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions&quot;: true,
    &quot;javascript.referencesCodeLens.enabled&quot;: true,
    &quot;vetur.validation.script&quot;: false,
    &quot;vetur.validation.template&quot;: false,
    &quot;eslint.autoFixOnSave&quot;: true,
    &quot;eslint.alwaysShowStatus&quot;: true,
    &quot;eslint.options&quot;: {
      &quot;extensions&quot;: [
        &quot;.html&quot;,
        &quot;.js&quot;,
        &quot;.vue&quot;,
        &quot;.jsx&quot;
      ]
    },
    &quot;eslint.validate&quot;: [
      {
        &quot;language&quot;: &quot;html&quot;,
        &quot;autoFix&quot;: true
      },
      {
        &quot;language&quot;: &quot;vue&quot;,
        &quot;autoFix&quot;: true
      },
      &quot;vue-html&quot;,
      {
        &quot;language&quot;: &quot;javascript&quot;,
        &quot;autoFix&quot;: true
      },
      {
        &quot;language&quot;: &quot;javascriptreact&quot;,
        &quot;autoFix&quot;: true
      }
    ],
    &quot;editor.rulers&quot;: [
      80,
      100
    ]
  }
  </code></pre>
  <p>.eslintrc.js:</p>
  <pre class="lang-js prettyprint-override"><code>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'
    }
  }
  </code></pre>
  <p>Without changing any settings, <code>ESLint --fix</code> does indeed format properly--breaking all my .vue template elements into many lines properly. <strong>So any ideas how I whip VS Code into shape?</strong> The above settings didn't help, but I am at a loss how as to even know what is interfering. Any ideas?</p>
  <p>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.</p>