False positive for 'no-multi-spaces' combined with 'key-spacing'

Tell us about your environment

Environment Info:

Node version: v10.15.3 npm version: v6.13.1 Local ESLint version: v6.8.0 (Currently used) Global ESLint version: Not found

What parser (default, Babel-ESLint, etc.) are you using?

default, cli

Please show your full configuration:

A portion of interest, json format

    "no-multi-spaces": [
        "error",
        {
            "exceptions": {
                "Property": true,
                "VariableDeclarator": true,
                "ImportDeclaration": true,
                "AssignmentExpression": true
            }
        }
    ],
    "key-spacing": [
        "error",
        {
            "align": "value"
        }
    ],

This is decorator for component for stenciljs web component

@Component({
    tag:      'test-input-search',
    styleUrl: 'input-search.scss',
    shadow:   true,
})
export class InputSearch implements ComponentInterface {
   ...
}

node_modules/.bin/eslint 'src/**/*.{js,ts,tsx}'

What did you expect to happen?

Nothing, lint pass

What actually happened? Please include the actual, raw output from ESLint.

16:9 error Multiple spaces found before ‘‘test-input-search’’ no-multi-spaces 18:12 error Multiple spaces found before ‘true’ no-multi-spaces

Are you willing to submit a pull request to fix this bug?

No, sorry, I am not that into this project in order to be able to contribute.

[mdjermanovic]

I guess you’re using @typescript-eslint/parser?

The problem is most likely with this syntax, in particular with export being between the class and the decorator, not with decorators in general.

In AST, and logically, it’s export > class > decorator (class is a child of export, decorator is a child of the class).

In this source code, the range of the decorator ends up being outside of its class and export ancestors (which is unusual, but a consequence of the @dec export class syntax).

What happens here is, I believe, the following - utility function that looks for the deepest node that contains those multi-spaces returns the "Program" node because it skips traversing export (for performance reasons as its range doesn’t contain the range of the multi-spaces), so it never examines export’s descendant nodes: the decorator and the correct "Property" node inside the decorator.

If you define { "Program": true } as an exception for no-multi-spaces these errors will disappear. But, that could hide some other real errors so it probably isn’t a good solution.

Another solution is to rewrite the code to:

@Component({
    tag:      'test-input-search',
    styleUrl: 'input-search.scss',
    shadow:   true,
})
class InputSearch implements ComponentInterface {
    //    ...
}

export { InputSearch };

It might be also good to open an issue in the typescript-eslint/typescript-eslint repo, maybe they have a solution for this problem.

It’s also possible that the syntax will be changed to export @dec class in the future.

[eslint-deprecated[bot]]

It looks like the conversation is stalled here. As this is a question rather than an action item, I’m closing the issue. If you still need help, please send a message to our mailing list or chatroom. Thanks! [//]: # (auto-close)