Eslint-plugin-vue: vue/script-indent doesn't respect nested spacing

[akoidan]

Tell us about your environment

• ESLint version: 6.6.0
• eslint-plugin-vue version: 6.0.1
• Node version: v12.13.0

Please show your full configuration:

{
  "extends": [
    "plugin:vue/recommended",
    "eslint:all",
    "@vue/typescript",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "@typescript-eslint/parser",
    "sourceType": "module"
  },
  "rules": {
    "indent": [
      "error",
      2
    ],
    "init-declarations": "off",
    "one-var": "off",
    "no-plusplus": "off",
    "vue/script-indent": ["error", 2, { "baseIndent": 0 }],
    "quote-props": ["error", "as-needed"],
    "no-ternary": "off",
    "multiline-ternary": "off",
    "new-cap": ["error", {"capIsNewExceptions":  ["Module", "Component", "Prop", "Ref", "Emit"]}],
    "space-before-function-paren": ["error", "never"],
    "array-element-newline": ["error", "consistent"],
    "comma-dangle": ["error", "always-multiline"],
    "function-call-argument-newline": ["error", "consistent"],
    "max-len": ["error", { "code": 120 }],
    "import/no-unresolved": "off",
    "padded-blocks": ["error", "never"],
    "vue/html-self-closing": [
      "error",
      {
        "html": {
          "void": "always",
          "normal": "always",
          "component": "always"
        }
      }
    ]
  },
  "settings": {
    "overrides": [
      {
        "files": ["*.vue"],
        "rules": {
          "indent": "off"
        }
      }
    ]
  }
}

What did you do?

<template>
  <div>
  </div>
</template>

<script lang="ts">
import {Component, Prop, Vue} from "vue-property-decorator";

@Component
export default class UserComp extends Vue {
                     private id = "UserComp";  // it doesn't matter how many spaces there are private readonly user!: User;
}
</script>

What did you expect to happen?
Since we ban indent rule there's no way of check nested spacing. I would expect vue/script-idnentto warn about incorrect spacing in the same way how would indent rule warn me if it was .ts file

What actually happened?

No warnings are present

Reproduce:

• git checkout https://github.com/akoidan/vue-webpack-typescript
• yarn install
• yarn start
• play with vue files, trying to mess with indent, and nothing will happen in nested indents. This means that:

   class A { // this 2 indent before class would produce error
   }

class B {
                     a = 3; // but this won't!
}

[ota-meshi]

Thank you for this issue.

The vue/script-indent rule does not understand TypeScript AST.

I think it works well if you use the @typescript-eslint/indent rule of @typescript-eslint/eslint-plugin.

[akoidan]

@ota-meshi

This is so complicated... is there a guide or readme? How are people suppose to find that out? Because eslint/indent works out of the box outside .vue (in .ts) files

[ota-meshi]

The vue/script-indent documentation is here, but there is no documentation about TypeScript.
Welcome your pull request.

[akoidan]

@ota-meshi vue 3.0 is gonna be released soon and it's based on typescript. While it still has support for JS this would probably inspire peple using typescript for vue. For this issue this means:

• either we mark on global README page that this set of rules doesn't support typescript, and could have unpredictable issues
• either vue/script-indent is the only rule that doesn't support typescript and we probably want to find out why that is. Beause eslint/indent doesn't know about TS AST as well, but works completely fine.

[ota-meshi]

I know peoples want TypeScript support.
But I'm not familiar with TypeScript AST, and other members are busy now. So I can't start work about TypeScript.
I need your help.