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)

@A.Lau Just in case, my edited code does not fix the indention. They both still look the same — Alwaysblue, Feb 18 '19 at 21:13
@messerbill yeah, I just want the indentation to be different. — A. L, Feb 18 '19 at 21:18
have a look here https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/script-indent.md#wrench-options — messerbill, Feb 18 '19 at 21:20
@messerbill I'm not sure how to write the AST nodes, I've shown what I've tried but it doesn't seem to work. — A. L, Feb 18 '19 at 21:35
@A.Lau Do you want the arrays and nested objects to be completely ignored (untouched)? Or formatted in a different way? The question makes it seem like you want both, which doesn't seem possible with `eslint-plugin-vue`. If that's not the case (you only want arrays/nested-objects to be untouched), I have an answer :) — tony19, Feb 24 '19 at 08:55
@tony19 yeah, so nested arrays/objects to be untouched. I will update my question to show — A. L, Feb 24 '19 at 15:19

tony19 · Accepted Answer · 2019-02-27T07:40:22.777

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.

eslint - vue/script-indent to ignore object fields

1 Answers1

Caveats