让 VSCode 识别别名

Question

好的，所以我用 Vite 和 React 构建了一个应用程序。我添加了一些别名以使内容更易于阅读，它可以工作，但 VSC 很愚蠢并且无法识别别名，这也意味着它在推断类型等方面存在困难。

这尤其愚蠢，因为例如，@store 被强调为一个问题，但 @store/index 工作得很好。我在这里做错了什么？！

/* vite.config.ts */

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig({
  plugins: [react()],

  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@assets": path.resolve(__dirname, "./src/assets"),
      "@core": path.resolve(__dirname, "./src/core"),
      "@store": path.resolve(__dirname, "./src/core/store"),
      "@user": path.resolve(__dirname, "./src/user"),
    },
  },
});

/* tsconfig.app.json */ 

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"],
      "@assets/*": ["assets/*"],
      "@core/*": ["core/*"],
      "@store/*": ["core/store/*"],
      "@user/*": ["user/*"]
    }
  },
  "include": ["src/**/*"]
}

再次，它可以工作，它可以编译并运行，而且我什至不需要将别名添加到 tsconfig 文件中 - 这是有道理的，无论如何我讨厌必须将它添加到两个单独的位置。但 VSCode 仍然很笨......

Answer 1

更改路径别名以在

./**/*

中使用递归通配符

tsconfig.json

。

  "paths": {
    "@/*": ["./**/*"],
    "@assets/*": ["./assets/**/*"],
    "@core/*": ["./core/**/*"],
    "@store/*": ["./core/store/**/*"],
    "@user/*": ["./user/**/*"]
  }