eslint - vue/script-indent 忽略对象字段答案

【问题标题】：eslint - vue/script-indent to ignore object fieldseslint - vue/script-indent 忽略对象字段
【发布时间】：2019-07-12 07:32:09
【问题描述】：

我有以下 ESLint 规则设置：

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

但是，我希望在以下情况下忽略缩进（对象键的值是另一个对象）。

这是 linter 的输出：

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

但我希望嵌套对象保持不变，所以它看起来像这样：

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

所以它应该是一个应该被忽略的对象内部的对象。我也希望在对象中包含数组也被忽略（因此我的忽略对象和数组）

【问题讨论】：

@GarisMSuero 啊，是的，忘记修复了。
@A.Lau 以防万一，我编辑的代码没有修复缩进。他们看起来仍然一样
至少这些大括号的位置不同：D
@messerbill 如果只是这样！耶，我修好了。 :)
@A.Lau 你想完全忽略数组和嵌套对象吗？还是以不同的方式格式化？这个问题看起来好像你想要两者，eslint-plugin-vue 似乎不可能。如果不是这样（你只希望数组/嵌套对象不受影响），我有一个答案:)

标签： javascript vue.js eslint eslintrc

【解决方案1】：

以下规则将vue/script-indent 配置为忽略.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']"
        ]
    }
],

注意事项

在 TypeScript 中，类属性的装饰器（例如，@Prop private msg!: string）会导致一个 linter 错误，之后的每一行都会被 linter 忽略。 (vuejs/eslint-plugin-vue#834) 解决方法：插入一个空方法（即_unused() {}）作为类的第一个元素。
对象字段的顺序可能会导致 linter 忽略整个对象 (vuejs/eslint-plugin-vue#833)。 解决方法：确保对象将文字作为其第一个字段。

【讨论】：