ts-plugin(2305)

Question

vue3+vite中，使用 index.ts 导出的文件，eslint 不识别，

明明导出了，但是使用时却报错：

这是什么原因，怎么解决呢？

Answer 1

引自免费微信小程序：皆我百晓生

根据你提供的信息，看起来你在 Vue 3 项目中使用了 TypeScript，并且在 index.ts 文件中导出了组件，但在其他地方导入这些组件时遇到了错误。错误提示是 ts-plugin(2305)，这通常意味着编译器找不到你试图导入的模块。

为了解决这个问题，可以尝试以下几个步骤：

1. 确保你的 index.ts 文件正确地导出了组件。确保每个导出语句都没有拼写错误，例如：

// src/components/index.ts
export { default as AChart } from './AChart/index.vue'
export { default as CardTemplate } from './CardTemplate.vue'
export { default as Block } from './Block/index.vue'
export { default as Table } from './Table/index.vue'

1. 检查你的 ESLint 配置。确保它支持 TypeScript 并且配置正确。打开 .eslintrc.cjs 或者相关的 ESLint 配置文件，添加对 TypeScript 的支持，例如：

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:vue/vue3-recommended'
  ],
  rules: {
    // ... 其他规则
  }
};

1. 在使用组件的地方，检查导入路径是否正确。在你的例子中，从 @/components 导入可能存在问题，因为通常情况下，Vue 会自动处理相对路径，你应该可以直接使用小写的组件名进行导入，除非你的组件路径与默认导入规则冲突。试着这样修改你的导入语句：

<!-- CardTemplate.vue -->
<template>
  <Block />
</template>

<script lang="ts">
import { CardTemplate } from './CardTemplate.vue'
export default {
  components: {
    CardTemplate
  }
}
</script>

如果你仍然遇到问题，确保你已经安装了 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin。在命令行中运行以下命令来安装它们：

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

然后，在 Vite 中重新启动开发服务器，让更改生效。如果以上步骤都不能解决问题，请提供更详细的错误信息或者项目的结构，以便我能更准确地定位问题。