title: Vue/TypeScript/ESLint/Prettier/Vetur formatting doesn't work
body: <p>Trying to get Vue/TypeScript/ESLint/Prettier/Vetur formatting in VS Code is a nightmare. There are many many GitHub issues and StackOverflow posts on this but I assure you this is not a duplicate. I have followed every tutorial and none of them work. Some of them fix one problem but introduce another. Some of them don't fix any problems. Some of them crash VS Code. Most conflict with each other in the advice they prescribe, including multiple official sources. Many are outdated, referencing obsolete config properties.</p>
  <p>I want VS Code to lint and format my .vue and .ts files when I save.</p>
  <p>I have spent hours and tried many, many configurations from different posts and tutorials, but this is the closest I have gotten to something that works. With the below configuration, however, whenever saving a .vue file, elements in the .vue files get momentarily wrapped onto a new line, and then immediately reverted back to a single line element:</p>
  <p><a href="https://i.stack.imgur.com/G5jYH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G5jYH.png" alt="enter image description here" /></a>
  then
  <a href="https://i.stack.imgur.com/dfS23.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dfS23.png" alt="enter image description here" /></a>
  then
  <a href="https://i.stack.imgur.com/sg5mZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sg5mZ.png" alt="enter image description here" /></a></p>
  <p>Below are my current configuration files:</p>
  <p>.eslintrc.js</p>
  <pre><code>const { resolve } = require('path');
  module.exports = {
    root: true,
    parserOptions: {
      extraFileExtensions: ['.vue'],
      parser: '@typescript-eslint/parser',
      project: resolve(__dirname, './tsconfig.json'),
      tsconfigRootDir: __dirname,
      ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
      sourceType: 'module' // Allows for the use of imports
    },
  
    env: {
      browser: true
    },
  
    extends: ['plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended', 'plugin:vue/recommended'],
  
    plugins: ['@typescript-eslint', 'vue'],
  
    globals: {
      ga: true, // Google Analytics
      cordova: true,
      __statics: true,
      process: true,
      Capacitor: true,
      chrome: true
    },
  
    rules: {
      'prettier/prettier': ['error', { usePrettierrc: true }], 
      'prefer-promise-reject-errors': 'off',
      '@typescript-eslint/no-non-null-assertion': 'off',
      '@typescript-eslint/no-explicit-any': 'off',
      '@typescript-eslint/explicit-module-boundary-types': 'off',
      '@typescript-eslint/no-empty-function': ['error', { allow: ['private-constructors'] }],
      'vue/no-v-html': 'off',
      'vue/no-template-shadow': 'off',
      'vue/max-attributes-per-line': 'off',
      quotes: ['warn', 'single', { avoidEscape: true }],
  
      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
    }
  };
  </code></pre>
  <p>.prettierrrc</p>
  <pre><code>{
    &quot;singleQuote&quot;: true,
    &quot;semi&quot;: true,
    &quot;useTabs&quot;: false,
    &quot;printWidth&quot;: 150,
    &quot;arrowParens&quot;: &quot;avoid&quot;,
    &quot;trailingComma&quot;: &quot;none&quot;,
    &quot;endOfLine&quot;: &quot;auto&quot;
  }
  </code></pre>
  <p>settings.json</p>
  <pre><code>{
    &quot;editor.formatOnPaste&quot;: true,
    &quot;editor.formatOnSave&quot;: true,
    &quot;eslint.validate&quot;: [
      &quot;javascript&quot;,
      &quot;javascriptreact&quot;,
      &quot;typescript&quot;,
      &quot;vue&quot;
    ],
    &quot;typescript.tsdk&quot;: &quot;node_modules/typescript/lib&quot;,
    &quot;vetur.experimental.templateInterpolationService&quot;: true,
    &quot;editor.codeActionsOnSave&quot;: {
      &quot;source.fixAll&quot;: true
    },
    &quot;editor.detectIndentation&quot;: false,
    &quot;editor.tabSize&quot;: 2
  }
  </code></pre>
  <p>Does anyone out there actually have this working?</p>