Vue component script indent rules conflicting

Question

I'm trying to set some ESLint rules to my new Vue project extending both eslint-plugin-vue and airbnb. I could set up everything just fine, except for the tag inside Vue components.

The accepted default would be like:

<script>
export default {
    name: 'Login',
};
</script>

However I'm trying to get this code style to be accepted:

<script>
    export default {
        name: 'Login',
    };
</script>

Using the rule vue/script-indent ( https://eslint.vuejs.org/rules/script-indent.html ) I could get the job done with the baseIndent set to 1. However, the lint rule is still complaining about it.

I tried placing this in this .eslintrc.json file:

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

Also tried using the ignoredNodes from indent rules ( https://eslint.org/docs/rules/indent ) however I think I couldn't get my AST selectors right.

This is my current .eslintrc.json file:

{
    "extends": [
        "plugin:vue/recommended",
        "@vue/airbnb"
    ],
    "rules": {
        "indent": [2, 4],
        "vue/html-indent": [2, 4],
        "vue/script-indent": [2, 4, {
            "baseIndent": 1
        }],

        "vue/singleline-html-element-content-newline": 0,

        "vue/eqeqeq": 2
    },
    "plugins": [
        "html"
    ]
}

I get these errors when running lint:

   8:1  error  Expected indentation of 0 spaces but found 4  indent
   9:1  error  Expected indentation of 4 spaces but found 8  indent
  10:1  error  Expected indentation of 0 spaces but found 4  indent

Fabio Martins Fabio Martins · Accepted Answer · 2020-01-27T13:04:36

If you're using VSCode, this setting will probably help you out:

// settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  // ...
}

At the time I saved the file before this setting, it linted with rules that wasn't defined by me even though I've written them on .eslintrc.js.

This setting made it work just fine.

But also check out the conflicts between eslint-plugin-html and eslint-plugin-vue.

Vue component script indent rules conflicting

1 Answers