ESLint 总是抛出键间距错误

Question

我的 .eslintrc 中有以下内容：

'key-spacing': [ 'error', {
    'singleLine': {
        'beforeColon'   : false,
        'afterColon'    : true
    },
    'multiLine': {
        'beforeColon'   : false,
        'afterColon'    : true,
        'align'         : 'colon'
    }
}]

目标是确保在对象分配中满足以下条件：

1. 在单行赋值中，每个冒号前没有空格， 但后面还有一个。
2. 在多行赋值中，冒号水平排列，并且 每个冒号前后都有一个空格。

奇怪的是下面三个代码sn-ps：

1 [来自我的 app.vue 文件]。

export default {
    name        : 'app',
    components  : {
        todos
    }
}

2 [来自我的 main.js 文件]。

new Vue({
    el      : '#app',
    render  : h => h( App )
})

3 [来自我的 Hello.spec.js 文件]。

const vm = new Vue({
    el      : document.createElement( 'div' ),
    render  : h => h( Hello )
})

在 key-spacing eslint 规则中每个都抛出错误：

/Users/autoboxer/development/learning-vue/src/app.vue
    12:3  error  Missing space after key 'name'  key-spacing

/Users/autoboxer/development/learning-vue/src/main.js
    6:2  error  Missing space after key 'el'  key-spacing

/Users/autoboxer/development/learning-vue/test/unit/specs/Hello.spec.js
    7:4  error  Missing space after key 'el'  key-spacing

我无法从我的设置中弄清楚为什么它们会导致列出的错误，因为每个指定的单词后面都有必要的空格，但我们将不胜感激。

Answer 1

此规则的配置非常复杂。我认为您正在寻找的是这样的：

'key-spacing': [ 'error', {
    'singleLine': {
        'beforeColon' : false,
        'afterColon'  : true
    },
    "align": {
        "beforeColon" : true,
        "afterColon"  : true,
        "on"          : "colon"
    }
}]

但是，即使使用这种配置，ESLint 也不允许冒号的任意位置。它们必须尽可能接近对象中最长的键名。因此，通过上述配置，您的代码必须更改为：

export default {
    name       : 'app',
    components : {
        todos
    }
}

这将使用我提供的配置正确 lint。