Eslint-plugin-vue: Indent code in *.vue script tags by +1

[nirazul]

Tell us about your environment

ESLint Version:4.x
eslint-plugin-vue Version:4.2.2
Node Version: 8.x

Please show your full configuration:

{
  "root": true,
  "parserOptions": {
    "parser": "babel-eslint",
    "sourceType": "module"
  },
  "extends": [
    "plugin:vue/essential"
  ],
  "rules": {
    "indent": ["error", 4],
    "vue/script-indent": ["error", 4, { "baseIndent": 1 }],
  }
}

What did you do? Please include the actual source code causing the issue.
I'd like to have the indentation like that:

*.js file:

export function test() { 
    return 'foo' 
}

vue file:

<template>
    <div class="article">
        test
    </div>
</template>

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

What did you expect to happen?
No errors

What actually happened? Please include the actual, raw output from ESLint.

Expected indentation of 0 spaces but found 4                  indent

I've tried to accomodate my needs with the latest eslint-plugin-vue version and the latest eslint version. But there is still no way to indent vue script tags with one base indent and still validate it with eslint.
The readme proposes to use the legacy rule for eslint, but as time moves forwared, there should be an official working way to handle this properly.

[mysticatea]

Please disable core indent rule.
vue/script-indent's baseIndent option affects only on .vue file.

{
  "root": true,
  "parserOptions": {
    "parser": "babel-eslint",
    "sourceType": "module"
  },
  "extends": [
    "plugin:vue/essential"
  ],
  "rules": {
    "indent": "off",
    "vue/script-indent": ["error", 4, { "baseIndent": 1 }],
  }
}

If you want to use core indent rule on .js files, you can use overrides setting.

{
  "root": true,
  "parserOptions": {
    "parser": "babel-eslint",
    "sourceType": "module"
  },
  "extends": [
    "plugin:vue/essential"
  ],
  "rules": {
    "indent": ["error", 4]
  }
  "overrides": [
    {
      "files": ["*.vue"],
      "rules": {
        "indent": "off",
        "vue/script-indent": ["error", 4, { "baseIndent": 1 }]
      }
    }
  ]
}

[nirazul]

@mysticatea
Thank you very much. That's it!

Maybe it helps to add a comment about this in the documentation. I wasn't aware of the overrides property :)

[michalsnik]

Documentation updated: https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/script-indent.md