Should use vue/script-indent

[gotenxds]

When using typescript eslint for some reason the indent rules are wrong and look as such:

<script>
import x from y;
import z from o;

  @Component()
export default class foo extends Vue {
  private bar: Bar;
}
</script>

Using the vue script indent rule fixes it, like so:

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  extends: [
    '@nuxtjs/eslint-config-typescript',
  ],
  rules: {
    indent: "off",
    'vue/script-indent': ['error', 2, {
      baseIndent: 1
    }]
  }
}

[kevinmarrec]

@gotenxds Is it because you were missing lang="ts" in script ?

Is it reproducible in a .ts file instead of .vue one ?

[davelsan]

Hi,

I agree with @gotenxds, I think we should use vue/script-indent.

While I cannot exactly comment on the class-component syntax issue he is having, with vue-composition-api the base ESLint indent rule causes the following error to pop-up in VSCode.

Cannot read property 'loc' of undefined

This is with lang="ts" set in <script>, by the way. The error goes away after switching off the base indent rule and enabling vue/script-indent.

Is it reproducible in a .ts file instead of .vue one ?

Shouldn't *.ts files use the @typescript-eslint/indent rule?

I ran into this same problem while linting regular *.ts files in a Node.js project. See typescript-eslint/typescript-eslint#792, specifically this comment, for more information.