Next.js 模块路径别名在 vscode 中不可点击答案

【问题标题】：Nex.js Module path aliases not clickable in vscodeNext.js 模块路径别名在 vscode 中不可点击
【发布时间】：2022-12-31 07:21:29
【问题描述】：

我正在尝试在 vscode 中获取可点击的模块路径别名

// Ctrl+click Working fine
import Layout from "src/components/layout/Layout";

// Not working
import SEO from "@components/SEO";

我的 JSconfig.json 文件

{
  "compilerOptions": {
    "jsx": "react",
    "baseUrl": ".",
    "paths": {
      "@components/*": ["/src/components/*"],
      "@sections/*": ["/src/sections/*"],
      "@assets/*": ["/src/assets/*"]
    }
  }
}

我已经尝试了一切但没有成功

【问题讨论】：

标签： visual-studio-code next.js

【解决方案1】：

这是解决方案

{
  "compilerOptions": {
    "jsx": "react",
    "baseUrl": "./",
    "paths": {
      "@components/*": ["./src/components/*"],
      "@sections/*": ["./src/sections/*"],
      "@assets/*": ["./src/assets/*"]
    }
  }
}

【讨论】：

【解决方案2】：

与“转到定义”有同样的问题。最后我发现它对我不起作用，因为我在项目中同时拥有 tsconfig.json 和 jsconfig.json。

似乎当 tsconfig.json 存在时，jsconfig.json 的别名设置将被忽略。

因为我想逐渐将东西转换成 Typescript，但是我保留了很多 .js 文件 tsconfig.json，并将 "**/*.js" 添加到 "include" 列表中，所以它也可以看到 .js 文件。现在 vscode 中的别名是可点击的。

tsconfig.json：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": [
        "components/*"
      ]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.js"
  ]
}

【讨论】：