tsconfig.json配置问题

Question

vite创建的react项目中，配置tsconfig.json时，添加compilerOptions和exclude，使用@符号引入文件仍然没有智能提示，如果删除files和references后就有提示了，但也会报很多错误，

下图是通过@引入文件的案例

Answer 1

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

根据你提供的描述和图片，看起来你在配置 tsconfig.json 时遇到了一些问题。下面我会尝试帮助你解决这个问题。

首先，你的 tsconfig.json 配置文件中存在一些格式和语法错误。正确的配置应该像这样：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
    "exclude": ["node_modules", "dist"],
    "files": [],
    "references": [
      { "path": "./tsconfig.app.json" },
      { "path": "./tsconfig.node.json" }
    ]
  }
}

注意以下几点：

1. 确保每个键值对都在正确的位置，并且用逗号分隔。
2. "files" 和 "references" 应该是一个数组，每个元素都是一个对象。你的原始配置中缺少了这些对象的括号。
3. 在 "references" 中，每个对象应该有一个 "path" 属性，指向其他 tsconfig 文件。确保路径是正确的，并且这些文件存在。

关于使用 @ 符号引入文件没有智能提示的问题，通常是因为 TypeScript 的路径映射没有正确配置。你已经配置了 "paths" 选项来映射 @/* 到 "src/*"，这通常应该能够解决智能提示问题。如果仍然没有智能提示，可以尝试以下方法：

1. 确保你的编辑器或 IDE 支持 TypeScript，并且正确设置了 TypeScript 路径。
2. 清除 .ts 文件的缓存（如使用 tsc --watch 重新编译项目）。
3. 检查全局样式文件的路径是否正确，并确保编辑器能够识别到这些文件。有时候，编辑器的重启或重新加载项目可以解决问题。

关于你提供的图片中的引入文件的案例，看起来是正常的。确保你的文件路径是正确的，并且编辑器能够识别到这些路径。如果仍然有问题，请提供更多的上下文信息或错误消息，以便我能更准确地帮助你解决问题。