Prettier and eslint indents not working together

Question

I traying setup my vim based typescript developing environment, but have an issue with indent management.

Probably 'eslint' says: indent: Expected indentation of 2 spaces but found 4. after prettier reformat.

My .eslintrc.js:

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 }],   }, } 

My .prettierc:

 module.exports = {    semi: false,   trailingComma: 'all',   singleQuote: true,   printWidth: 80,    tabWidth: 2, }; 

Answer 1

As per this Kai Cataldo's comment on this GitHub issue:

ESLint's indent rule and Prettier's indentation styles do not match - they're completely separate implementations and are two different approaches to solving the same problem ("how do we enforce consistent indentation in a project").

Therefore, when using prettier, you'd better disable eslint's indent rule. It's guaranteed that they will clash.

Answer 2

in eslintrc add indent: [2, 2, { SwitchCase: 1}]

Parameters defined

1. new eslint rules want the first parameter to be a number: Severity should be one of the following: 0 = off, 1 = warn, 2 = error.

2. the amount of indent

3. The object is stating how to indent switch and case statements following the options here.