eslint indent rule indents decorated members

Question

In order to enable indents for chained methods:

await PostModel
  .findOne({
    author: user.user,
    _id: id,
  })
  .populate('tickets', 'title status');

I have added the following MemberExpression to my eslintrc, as per eslint docs

indent": ["error", "tab", { "MemberExpression": 1 }],

but now I am experiencing problem with decorators, which get indented although my preference is to have them aligned with the member.

@prop({ type: String, required: true })
  password: string;

Is there a way to address those two cases without a conflict?

score 17 · Answer 1 · answered Jun 27 '22 at 07:19

17

I got the same problem as you did, and found this comment help, give it a try?

{
  rules: {
    // ...
    "indent": ["error", 2, { "ignoredNodes": ["PropertyDefinition"] }]
  }
}

answered Jun 27 '22 at 07:19

Wildsky

412
3
8

score 6 · Answer 2 · answered Jan 13 '22 at 12:57

According to this issue, you can partially disable the indent rule for decorators:

indent: [
        'error',
        'tab',
        {
            MemberExpression: 1,
            ignoredNodes: [
                'FunctionExpression > .params[decorators.length > 0]',
                'FunctionExpression > .params > :matches(Decorator, :not(:first-child))',
                'ClassBody.body > PropertyDefinition[decorators.length > 0] > .key',
            ],
        },
    ],

This works for me.

Thanks, but this does not work for me at all. Seems though like there is an ongoing unresolved problem with the indent rule causing many other tickets to get closed. — user776686, Jan 13 '22 at 18:53

score 3 · Answer 3 · answered Jul 07 '22 at 11:34

@bujhmt's answer actually solved my problem, however, I needed to make some changes to it.

Before:

export abstract class MyAbstractClass extends AnotherClass {
    @Column()
    name!: string;
    ^^^^--> Expected indentation of 8 spaces, found 4

    @Column()
    address!: string;
    ^^^^--> Expected indentation of 8 spaces, found 4
}

Then I changed my .eslintrc rule to this:

    "indent": [
        `error`,
        4,
        {
            "ignoredNodes": [
                `FunctionExpression > .params[decorators.length > 0]`,
                `FunctionExpression > .params > :matches(Decorator, :not(:first-child))`,
                `ClassBody.body > PropertyDefinition[decorators.length > 0] > .key`,
            ],
        },

    ],

And the errors were gone.

score 0 · Answer 4 · answered Mar 16 '23 at 13:35

As suggested above, you can use ignoredNodes and use a Abstract Syntax Tree selector to ignore that specific element. That will mean that this element is no longer subject to the rule.

i.e.

Pass ✅
@prop({ type: String, required: true })
password: string;

Also Pass ✅
@prop({ type: String, required: true })
                      password: string;

You can paste code into https://astexplorer.net/ (if you are using typescript set type to @typescript-eslint/parser - see helpful article here

So something like this could help: ClassBody.body > PropertyDefinition[decorators.length>0] > Identifier

Which means any property on a class body with decorators will be ignored by the rule.

eslint indent rule indents decorated members

4 Answers4

Linked