CODEWITHSUNDEEP
javascriptvue.jseslinteslintrc
A. L
A. L

Reputation: 12649

eslint - vue/script-indent to ignore object fields

I have the following ESLint rule setup:

"vue/script-indent": [
    "error",
    4,
    {
        "baseIndent": 1,
        "switchCase": 1,
        "ignores":
        [
            "[init.type=\"ObjectExpression\"]",
            "[init.type=\"ArrayExpression\"]"
        ]
    }
]

However, I would like the indentation to be ignored for the following case (where an object key's value is another object).

This is the output of the linter:

let example =
    {
        example:
            {
                test: 
                    "test"
            }
    }

But I want the nested object to be untouched, so it looks like this:

let example =
    {
        example:
        {
            test: 
                "test"
        }
    }

So it should be an Object that's inside an Object that should be ignored. I would also like to have Arrays inside Objects to be ignored as well (hence why my ignores have Object and Array)

Upvotes: 8

Views: 1424

Answers (1)

tony19
tony19

Reputation: 138296

The following rule configures vue/script-indent to ignore nested objects/arrays in .vue:

"vue/script-indent": [
    "error",
    4,
    {
        "baseIndent": 1,
        "switchCase": 1,
        "ignores": [
            // nested objects, excluding top level of exported object (data, methods, computed, etc.)
            "[value.type='ObjectExpression']:not(:matches(ExportDefaultDeclaration, [left.property.name='exports']) > * > [value.type='ObjectExpression'])",

            // nested arrays
            "[value.type='ArrayExpression']"
        ]
    }
],

Caveats

  • In TypeScript, decorators of class properties (e.g., @Prop private msg!: string) cause a linter bug, where every line afterward is ignored by the linter. (vuejs/eslint-plugin-vue#834) Workaround: Insert an empty method (i.e., _unused() {}) as the first element of the class.

  • The order of your object fields could cause the linter to ignore the entire object (vuejs/eslint-plugin-vue#833). Workaround: Ensure objects have a literal as its first field.

Upvotes: 5

Related Questions