Vue Class Component中@Prop与属性缩进的ESLint报错问题咨询

你的代码示例：

export default class MyText extends Vue {
    @Prop({ type: String, default: 'id-rt' })
    id!: string; // ERROR: Expected indentation of 8 spaces but found 4 indent
}

ESLint配置的extends字段包含@vue/eslint-config-typescript/recommended，移除该配置后报错消失，但你希望保留配置仅禁用@Prop相关的缩进检查，以下是问题原因和解决方法：

问题原因 #

@vue/eslint-config-typescript/recommended继承了@typescript-eslint/recommended规则集，其中的@typescript-eslint/indent规则默认要求被装饰器（如@Prop）修饰的类成员，必须比装饰器多缩进一层。你将@Prop和id!设为相同缩进（4空格），违反了这个规则的默认要求，因此触发了缩进错误。

解决方法 #

方法1：精准配置缩进规则，统一装饰器与成员缩进 #

在eslint.cjs中添加自定义规则，让ESLint忽略装饰器节点的缩进检查，允许装饰器和被修饰成员使用相同缩进：

module.exports = {
  // 其他原有配置...
  rules: {
    // 其他原有规则...
    '@typescript-eslint/indent': [
      'error',
      4, // 项目基础缩进空格数，可根据实际调整
      {
        ignoredNodes: ['Decorator'],
        SwitchCase: 1
      }
    ]
  }
};

方法2：临时禁用单行缩进检查 #

如果只是个别代码需要调整，可在报错行添加注释临时禁用规则：

export default class MyText extends Vue {
    @Prop({ type: String, default: 'id-rt' })
    // eslint-disable-next-line @typescript-eslint/indent
    id!: string;
}

方法3：全局禁用@typescript-eslint/indent规则（不推荐） #

若不需要TypeScript相关的缩进检查，可直接关闭该规则，但会丢失所有TypeScript代码的缩进校验：

module.exports = {
  // 其他原有配置...
  rules: {
    // 其他原有规则...
    '@typescript-eslint/indent': 'off'
  }
};

内容的提问来源于stack exchange，提问作者coure2011