Indentation rule conflict with prettier

[mohsinulhaq]

Repro

const isHoverTriggered = true;
const followCursor = true;
const callAll = (a, b) => {};
const that = {
  showTooltip: true
};
const props = {
  onMouseMove: true
};

const o = {
  ...(isHoverTriggered &&
    followCursor && {
      onMouseMove: callAll(that.showTooltip, props.onMouseMove)
    })
};

Config

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    'plugin:react/recommended',
    'plugin:jsx-a11y/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  settings: {
    react: {
      version: 'detect'
    }
  },
  rules: {
    '@typescript-eslint/indent': ['error', 2]
  }
};

Expected Result
No indentation error

Actual Result

When prettier is followed:

14:1   error    Expected indentation of 4 spaces but found 6  @typescript-eslint/indent
15:1   error    Expected indentation of 2 spaces but found 4  @typescript-eslint/indent

When eslint is followed:

  14:5   error    Insert `··`                             prettier/prettier
  15:1   error    Insert `··`                             prettier/prettier

Additional Info

Versions

package	version
@typescript-eslint/eslint-plugin	1.5.0
@typescript-eslint/parser	1.5.0
TypeScript	3.3.4000
ESLint	5.15.3
node	10.15.2
npm	6.9.0

[j-f1]

Prettier recommends disabling all formatting rules, which you can do by installing eslint-config-prettier and extending prettier/@typescript-eslint.

[mohsinulhaq]

Hi, @j-f1 I just changed my config to be:

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
    'plugin:react/recommended',
    'plugin:jsx-a11y/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  plugins: ['@typescript-eslint', 'react', 'jsx-a11y'],
  settings: {
    react: {
      version: 'detect'
    }
  },
  rules: {
    '@typescript-eslint/indent': ['error', 2]
  }
};

But I am still getting the same error. Please help.
Thanks.

[j-f1]

You also need to remove the indent rule from your own config since it overrides everything else.

[mohsinulhaq]

Ok, so how do I set my lint config to allow indentation levels to be 2 instead of the default 4.

[j-f1]

Prettier should cover that for you.

[mohsinulhaq]

That's what I had tried originally, by removing @typescript-eslint/indent': ['error', 2], but I got:
error Expected indentation of 4 spaces but found 2 @typescript-eslint/indent
all over the project
.prettierrc:

{
  "singleQuote": true,
  "bracketSpacing": false
}

[mohsinulhaq]

Any suggestions? @j-f1

[j-f1]

This should be working:

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
    'plugin:react/recommended',
    'plugin:jsx-a11y/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  plugins: ['@typescript-eslint', 'react', 'jsx-a11y'],
  settings: {
    react: {
      version: 'detect'
    }
  }
};

[mohsinulhaq]

Thanks a lot! It works now. 🙂

[gho1b]

Im sorry i need to reopen this issue because i got same issue while use Dependency Injection in method parameter. Can you help me to solve this issue?

  @Query(() => Location!)
  public async location(
    @Arg('id', () => Int, { description: 'Location id' })
    id: number,
  ): Promise<Location> {
    return this.locationRepository.findOneOrFail(id);
  }

[bradzacher]

I'm not sure you understand why this was closed.
This is 100% intentional.
The two should conflict because prettier does its own indentation and formatting which does not conform to eslint's indentation rules.

If you think this is another issue, please open a new issue.

Also - please do not comment on old, closed issues. ESP ones that are 6 months old.