vue-cli3 eslint vue/script-indent 与编译器冲突答案

【问题标题】：vue-cli3 eslint vue/script-indent conflicting with compilervue-cli3 eslint vue/script-indent 与编译器冲突
【发布时间】：2019-07-12 08:08:52
【问题描述】：

当我有我的.eslint.js 文件时，包含规则：

"vue/script-indent": [
    "error",
    4,
    {
        "baseIndent": 1,
        "switchCase": 1,
    }
]

保存，会报错：

error: Expected indentation of 32 spaces but found 24 spaces (vue/script-indent)

是什么导致了这种奇怪的冲突？（因为它似乎没有从我的.eslint.js 文件中获取规则）

例子

<template>
    <div>
        <label>
            Display Name: 
            <a></a>
            <input 
                v-model="data.display_name"
                class="form-control"
                type="text"
            >
        </label>
    </div>
</template>

.eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/recommended"
    ],
    // "parser": "vue-eslint-parser",
    "parserOptions": {
        "sourceType": "module",
        "ecmaVersion": 2018,
        "allowImportExportEverywhere": true
    },
    "rules": {
        "array-bracket-newline":
            [
                "error",
                {
                    minItems: 1
                }
            ],        
        "array-element-newline":
            [
                "error",
                "always"
            ],        
        "brace-style": [
            "error",
            "allman",
            {
                "allowSingleLine": true
            }
        ],
        "function-paren-newline":
            [
                "error",
                {
                    minItems: 
                        2
                }
            ],
        "indent": [
            "error",
            4,
            {
                "SwitchCase": 1,
                "ObjectExpression":
                    "first",
                "ArrayExpression":
                    "first"
            }
        ],
        "newline-per-chained-call":
            [
                "error",
                {
                    "ignoreChainWithDepth": 1
                }
            ],        
        "no-console": "off",
        "no-fallthrough": "off",
        "no-case-declarations": "off",
        "no-unneeded-ternary": "error",
        "no-unused-vars":
            [
                "error",
                {
                    "args": "none"
                }
            ],
        "object-curly-newline":
            [
                "error",
                {
                    "ObjectExpression":
                        {
                            "multiline":
                                true,
                            "minProperties":
                                1
                        },
                    "ObjectPattern":
                        {
                            "multiline":
                                true,
                            "minProperties":
                                1
                        },
                    "ImportDeclaration":
                        {
                            "multiline":
                                true,
                            "minProperties":
                                1
                        },
                    "ExportDeclaration":
                        {
                            "multiline":
                                true,
                            "minProperties":
                                1
                        }
                }
            ],       
        "object-property-newline":
            [
                "error",
                {
                    "allowAllPropertiesOnSameLine":
                        false
                }
            ],        
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "never"
        ],
        // "vue/component-name-in-template-casing": [
        //     "never"
        // ],
        "vue/attribute-hyphenation": [
            "never"
        ],        
        "vue/html-closing-bracket-newline": [
            "error",
            {
                "singleline": "never",
                "multiline": "always"
            }
        ],
        "vue/html-indent": [
            "error",
            4,
            {
                "attribute": 1,
                "closeBracket": 0,
                "alignAttributesVertically": true,
                "ignores": []
            }
        ],

        "vue/prop-name-casing": [
            "never",
        ],
        "vue/html-self-closing": [
            "never"
        ],
        "vue/multiline-html-element-content-newline": [
            "never"
        ],
        "vue/no-unused-components": [
            "never"
        ],
    },
    "overrides": [
        {
            "files": [
                "*.vue"
            ],
            "rules": {
                "indent": "off",
                "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']"
                        ]
                    }
                ]
            }
        }
    ]
}

【问题讨论】：

是否指定了一行？
@JackBashford 它基本上是整个文件，因为添加该规则会改变整个文件的缩进方式。我只是不确定它是如何与自身发生冲突的。
你在使用 JSX 吗？
我无法根据当前问题重现问题。你能提供一个复制回购吗？或者.eslintrc.js 的完整内容和.vue 中重现问题的最小代码会有所帮助。
仍然无法为我复制。 linter 错误通常指示控制台中的源（带有几行上下文）。这说明了什么？

标签： javascript vue.js eslint

【解决方案1】：

'overrides': [
{
  'files': ['*.vue'],
  'rules': {
    'indent': 'off'
  }
}

reference

【讨论】：