eslint - vue/script-indent to ignore object fields

Question

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)

Answer 1

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 (eg, @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 (ie, _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.