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

[prurigro]

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!

[iGarym]

Same proposition.

eslint-plugin-html has a nice rule:

"settings": {
  "html/indent": "+2",
}

[armano2]

@iGarym #46 we are waiting for new parser and we can start working a bit more on html/template part of eslint

[prurigro]

@armano2 That seems to be talking about the indentation level of html elements in the <template></template> portion of the component, would it also be required to allow the contents of the <script></script> tag to start at one indentation level higher? I suppose if it's a matter of either forcing the increased level or not then a separate plugin could be written to be used in conjunction with this one until the updated parser exists; being optional does seem appropriate as I've noticed some examples of people keeping the contents of the script tag flush with the tag.

[armano2]

@prurigro it has to be done on parser level -> right now code is parsed first by html parser after that part of code is passed to espree (eslint) and they are dealing with it, adding this feature has to be done before passing code into espree.

its possbile, but i don't think so that there is going to be anyone to do that before new parser will be released, #116.

@mysticatea can you confirm/deny this?

[mysticatea]

Thank you for this issue.

I confirmed. As far as I know, the indent rule of eslint@3 is no problem in this case, but eslint@4's reports errors. We should address this problem in any way.

For now, you can use indent-legacy rule which has the same behavior as the indent rule of eslint@3 as a workaround.

{
    "indent": "off",
    "indent-legacy": ["error", 4]
}

[mysticatea]

In #145, I'm making almost full-spec indent rule eventually because v-on directive can have statements. (I had thought it needs only about expressions at first.)
So I think that I can make vue/script-indent rule which shares almost code with vue/html-indent, then it has the option to specify the base indent.

[michalsnik]

#145 is now merged and we could work on this, but replacing core rule with tailored one seem not like the best solution to me. Can we perhaps somehow alter the parsed AST so that the core rule sees different indentation @mysticatea ?

[mysticatea]

No, it cannot do in vue-eslint-parser side because custom parsers cannot modify the linting result to back warning/fixing locations after linting.

Plugin preprocessor can modify source code text and the linting result. The plugins which have preprocessor can support autofix since eslint@4.7.0. However, I'm not sure how the preprocessor should behave in the following case:

<script>
    aaa()
    bbb()
ccc()
    ddd()
</script>

I think it cannot be unindented because ccc() does not have its indentation. As the result, indent rule warns aaa(), bbb(), and ddd() as unexpected. On the other hand, if preprocessor unindents the lines except ccc(), indent rule overlooks the ccc() line.

[michalsnik]

I'm not sure I understand you @mysticatea I think we should detect indentation of the first line and treat it as the base indentation, so the ccc should only be reported as badly indented line. Can we do something about it?

[mysticatea]

the ccc should only be reported as badly indented line.

You are right. But I think that we cannot make AST like that the core indent rule reports the ccc() line. My above comment is the explanation of that.