Request to allow vue component js to optionally start at an indentation level of 1 when wrapped in <script></script>

The version of ESLint you are using: v4.3.0

The version of eslint-plugin-vue you are using: 3.8.0

The problem you want to solve: Javascript in a vue component expects an initial indentation level of 0 despite being wrapped in <script></script>. The following currently reports an error:

<script>
    export default {

    };
</script>

Your take on the correct solution to problem: When modifying a vue component, the linter should optionally allow for an initial indentation level of 1 when wrapped in <script></script>.

The eslint-plugin-html plugin solves the indentation level issue for html files, and works nicely with eslint to only lint the javascript portion of vue components. Ideally eslint-plugin-vue could work in a similar way while also linting the template portion of the component (as it currently does).

Thanks!

[chrisvfritz]

I think it makes sense as a dedicated rule, because whether a project wants to start at indentation 0 or 1, they’ll probably want to enforce consistency. I think ideally, we’d also provide the ability to configure each tag type individually, because the most common convention I see is:

• 1 for <template>
• 0 for <script>
• 0 for <style>

I’d also suggest that as the default, with the rule in the recommended category.

[MicroDroid]

It’s still unclear how to use this new vue/script-indent rule. I’ve added something like this to my .eslintrc:

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

I still got warnings from the indent rule. I removed the indent rule, now other non-.Vue files don’t get indentation linting properly. Also vue/script-indent is also applying its indentation linting on non-.Vue files like .js files, causing my normal .js files to have indentation starting at 1