Vue3项目Prettier与ESLint配置冲突报TS语法错误如何解决？

问题根因 #

你遇到的两个冲突报错核心是项目全局启用了TS校验规则，但单文件组件未正确声明TS语法标识，导致规则校验逻辑不一致：

1. 未加类型标注时报Missing return type on function：项目ESLint加载了TS规则，要求所有函数显式声明返回类型
2. 加类型标注时报Type annotations can only be used in TypeScript files：Vue编译器未识别到当前script块是TS语法，不允许出现TS独有语法

解决步骤 #

1. 修正Vue组件语法 #

首先修改组件的script标签声明，同时用defineComponent包裹组件配置以获得自动类型推导能力：

<template>
    <pre>Market:{{ market }}</pre>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Market from "./Market";

export default defineComponent({
    name: 'Market', // 注意name属性应为字符串，不能直接传导入的类
    components: {},
    data() {
        return {
            market: new Market(),
        };
    },
});
</script>

2. 可选：调整ESLint规则放宽校验 #

如果不需要强制所有函数显式声明返回类型，可在package.json的eslintConfig.rules下添加配置关闭对应校验：

"rules": {
  "@typescript-eslint/explicit-function-return-type": "off",
  "@typescript-eslint/explicit-module-boundary-types": "off"
}

3. 补充VSCode配置 #

在settings.json中添加以下配置，保证ESLint正确识别Vue文件的TS语法：

{
  "files.associations": {
    "*.vue": "vue"
  },
  "eslint.validate": ["vue", "javascript", "typescript"]
}

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