vue html indent,javascript - vue-cli3 eslint vue/script-indent conflicting with compiler - Stack Ove...

When I have my .eslint.js file include the rule:

"vue/script-indent": [

"error",

4,

{

"baseIndent": 1,

"switchCase": 1,

}

]

and save, it generates the error:

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

What's causing this weird conflict? (since it doesn't seem to be taking the rules from my .eslint.js file)

Example

Display Name:

v-model="data.display_name"

class="form-control"

type="text"

>

.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']"

]

}

]

}

}

]

}