printWidth default setting is ineffective (and unallowed) for markup in .vue files - VS Code

[szalapski]

When 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. How can I figure out what is forcing my markup elements onto exactly one line?

I am using Prettier 1.14.2 with ESLint version 5.1.0 and Visual Studio Code (without the Prettier Extension).

example in a .vue file-- I cannot make this go on multiple lines no matter what I do.

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

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

Prettier settings in VS Code:

  "prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.tabWidth": 2,

[lydell]

Prettier does not support HTML yet. See #1882.

This means that we currently only format the <style> and <script> parts of your Vue code, while leaving the rest alone.

[szalapski]

I can't figure out what is possibly making the markup forced all on one line. I try inserting my own line breaks, but when I save, the line breaks are deleted. Seems like it isn't prettier, so what could it be? Any advice would be appreciated.

I have the default "vetur.format.defaultFormatter.html": "none",, so I am guessing it isn't vetur or js-beautify. The problem still happens with "html.format.enable": false,, so it seems it isn't in the VS Code defaults.

[szalapski]

Continuing the search here: vuejs/eslint-plugin-vue#557