优化 VSCode 导入提示

先看结果

优化前

目标是所有 src 内的文件导入都利用 @ 实现绝对路径的导入 这样的好处是导入看着比较统一，并且方便文件迁移

方法

以 创建 一个 Vite 项目为例子

CODE
Copy
pnpm create vite ts-hint
.../Library/pnpm/store/v3/tmp/dlx-41525  |   +1 +
.../Library/pnpm/store/v3/tmp/dlx-41525  | Progress: resolved 1, reused 1, downloaded 0, added 1, done
✔ Select a framework: › React
✔ Select a variant: › TypeScript

Scaffolding project in /Users/sedationh/workspace/repo/ts-hint...

Done. Now run:

  cd ts-hint
  pnpm install
  pnpm run dev

完成新建

CODE
Copy
mkdir -p src/components/XXX && touch src/components/XXX/X.tsx

X.tsx

React TSX
Copy
export default function X() {
  return <h1>X</h1>;
}

去任意 TS 文件使用可看到如下提示

目标是所有 src 内的文件导入都利用 @ 实现绝对路径的导入 这样的好处是导入看着比较统一，并且方便文件迁移

import X from "./components/XXX/X"; -> import X from "@/components/XXX/X";

改完后 Vite 编译报错，给 Vite 加 Alias https://vitejs.dev/config/shared-options#resolve-alias

vite.config.ts

TypeScript
Copy
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { fileURLToPath } from "node:url";


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      {
        find: "@",
        replacement: fileURLToPath(new URL("./src", import.meta.url)),
      },
    ],
  },
});

现在已经可以正常编译了，但 vite.config.ts 里 import { fileURLToPath } from "node:url"; 会类型错误

通过安装 @types/node 解决

CODE
Copy
pnpm i @types/node -D

接着解决这里的类型问题

修改 tsconfig.json, 添加 paths

CODE
Copy
{
   "compilerOptions": {

      ...

      "paths": {
         "@/*": ["./src/*"]
       }
   }
}

现在可以自动提示了，但提示的不带 @

打开设置 搜索 importModuleSpecifier

修改为 non-relative，再看提示

符合预期～

参考

https://stackoverflow.com/questions/58249053/how-to-intellisense-alias-module-path-in-vscode