title: Prettier and eslint indents not working together
body: <p>I traying setup my vim based typescript developing environment, but have an issue with indent management.</p>
  
  <p><a href="https://i.stack.imgur.com/fD18y.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fD18y.png" alt="enter image description here"></a></p>
  
  <p>Probably 'eslint' says: <code>indent: Expected indentation of 2 spaces but found 4.</code> after <code>prettier</code> reformat. </p>
  
  <p>My <code>.eslintrc.js</code>:</p>
  
  <pre><code>module.exports = { 
    parser: '@typescript-eslint/parser', // Specifies the ESLint parser
    extends: [ 
      'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
      'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
      'prettier/@typescript-eslint',
      'plugin:prettier/recommended',
    ],
    parserOptions: { 
      ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
      sourceType: 'module', // Allows for the use of imports
      ecmaFeatures: { 
        jsx: true, // Allows for the parsing of JSX
        tsx: true, // Allows for the parsing of TSX ???
      },
    },
    rules: { 
      indent: ['error', 2],
      quotes: ['error', 'single'],
      semi: ['error', 'never'],
      'sort-keys': ['error', 'asc', { caseSensitive: true, natural: false }],
    },
  }
  </code></pre>
  
  <p>My <code>.prettierc</code>: </p>
  
  <pre><code> module.exports = { 
    semi: false,
    trailingComma: 'all',
    singleQuote: true,
    printWidth: 80, 
    tabWidth: 2,
  };
  </code></pre>