路径别名没有智能提示 / 智能提示可以识别文件夹但无法识别文件？30秒搞定！

问题描述

你为一个路径写了别名（alias），但是没有智能提示，或者有智能提示但只能识别文件夹却识别不了文件。

// 没智能提示害我拼错了哭
import viteLogo from '~public/vipack.svg'

// 文件夹好好的，但是里面的svg却没有智能提示，害我拼错了哭
import vueLogo from '~public/images/vueact.svg' 
// 咦，为啥代码文件有正常的智能提示？
import main from '~/main.js'

解决方案

没智能提示

事实上，路径别名的智能提示是 typescript（js也能用） 和 vscode 提供的功能。

在 tsconfig.json (jsconfig.json) 中配置：

{
  "compilerOptions": {
    "paths": {
      "~public/*": ["./public/*"],
      "~/*": ["./src/*"]
    },
    // ...
  },
  // ...
}

这使得vscode知道 ~public 指向 ./public， 这里的相对路径取决于 tsconfig.json 所在位置。

不提示文件

这是因为 typescript 不认为 .png 这样的文件是代码的一部分，需要你主动告诉他：

1. 手动写个声明文件

// statics.d.ts

declare module '*.png' {
  const src: string
  export default src
}
// ... 其他类型的文件

2. 如果你使用Vite，事实上Vite已经提供了这个文件

// vite-env.d.ts

/// <reference types="vite/client" />

注意 /// <reference types="vite/client" /> 是ts的一个语法，而不是注释，不要把前面三斜杠去掉。

最后别忘记把他们放入typescript的作用范围内：

{
  "compilerOptions": {
    // ...
  },
  includes: ["src/vite-env.d.ts"]
}