使用Vue Class Component与vuex-class时ESLint解析错误求助

嘿，这个问题我之前帮同事排查过好几次，本质就是ESLint的装饰器位置校验规则在“搞事情”，咱们直接说解决方案：

错误原因 #

你写的代码里，@Component装饰器和class之间被export default隔开了，而ESLint的decorator-position规则（一般是@typescript-eslint插件下的规则）默认要求装饰器必须直接紧邻被装饰的class，不允许中间插入export这类关键字，所以触发了报错。

两种解决办法 #

办法一：调整代码顺序（推荐） #

按照ESLint要求的格式，把装饰器和class直接绑定到一起，两种写法都合法且符合社区规范：

写法1：装饰器紧跟class，export default放在最前面

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
// 引入vuex-class的装饰器
import { State, Getter } from 'vuex-class';

export default @Component({
  // 组件配置（比如components、props等）
}) class App extends Vue {
  // 示例：用vuex-class绑定状态
  @State('userInfo') private userInfo!: UserInfo;

  mounted() {
    // 你的逻辑代码
    console.log(this.userInfo);
  }
}
</script>

写法2：装饰器放在export default之前

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { State } from 'vuex-class';

@Component({
  // 组件配置
})
export default class App extends Vue {
  @State('userInfo') private userInfo!: UserInfo;

  mounted() {
    // 你的逻辑代码
  }
}
</script>

这两种写法都能顺利通过ESLint校验，也是团队协作中常用的规范写法。

办法二：修改ESLint规则（不推荐，除非特殊需求） #

如果你实在不想调整代码顺序，可以直接关闭这个校验规则。在项目根目录的.eslintrc.js（或.eslintrc.json）里添加如下配置：

module.exports = {
  // 其他配置项...
  rules: {
    // 其他规则...
    "@typescript-eslint/decorator-position": "off"
  }
};

注意：关闭规则会失去代码风格校验的约束，可能导致团队代码风格不统一，所以优先推荐办法一。

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