VSCode多项目工作区TypeScript类型未被IntelliSense识别问题

问题场景 #

VSCode工作区包含多个项目，其中一个是自带tsconfig.json的Nuxt.js应用。添加Nx monorepo后，IntelliSense无法识别$axios这类Nuxt插件的类型定义，报错：

Property '$axios' does not exist on type 'Context'.ts(2339)

尽管@nuxtjs/axios已添加到my-project/tsconfig.json的types数组中，但多项目配置下该配置未生效。工作区结构如下：

my-project
 --tsconfig.json
my-other-project
 --tsconfig.json
my-monorepo
 --tsconfig.base.json
 apps/my-app
   --tsconfig.json
   --tsconfig.spec.json

当前使用Volar的Takeover Mode，工作区配置：

{
  "folders": [
    { "name": "my-project", "path": "my-project" },
    { "name": "my-other-project", "path": "my-other-project" },
    { "name": "my-monorepo", "path": "my-monorepo" }
  ],
  "settings": {}
}

解决方案 #

1. 为单个项目指定专属TypeScript配置 #

多项目工作区中，VSCode可能自动选用Nx的tsconfig.base.json作为全局配置，忽略Nuxt项目的专属配置。需在工作区配置中为my-project单独指定tsconfig：

打开工作区的.code-workspace文件，添加以下设置：

"settings": {
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.preferences.autoImportFileExcludePatterns": ["**/my-monorepo/**"],
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "volar.tsPlugin": true,
  "volar.tsPluginStatus": "active",
  // 绑定my-project的专属tsconfig
  "typescript.configurations": {
    "my-project": {
      "extends": "./my-project/tsconfig.json"
    }
  },
  // 让VSCode识别my-project文件的类型并匹配对应配置
  "files.associations": {
    "**/my-project/**/*.vue": "vue",
    "**/my-project/**/*.ts": "typescript"
  }
}

2. 调整Nuxt项目的tsconfig.json #

确保my-project/tsconfig.json的compilerOptions正确配置类型，避免与Nx配置冲突：

{
  "compilerOptions": {
    "types": [
      "@nuxt/types",
      "@types/node",
      "@nuxtjs/i18n",
      "@types/jest",
      "@testing-library/vue",
      "@testing-library/jest-dom",
      "@pinia/nuxt",
      "@nuxtjs/axios"
    ],
    "skipLibCheck": true, // 跳过库类型检查，避免跨项目类型冲突
    "moduleResolution": "node"
  },
  "extends": "@nuxt/typescript-build/config/tsconfig.json"
}

3. 重启服务生效配置 #

按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），执行以下命令：

• Volar: Restart Takeover Mode Server
• TypeScript: Restart TS Server

4. 排除Nx配置对单项目的干扰 #

在my-project/tsconfig.json中添加exclude字段，避免Nx的类型定义混入：

{
  "exclude": [
    "../my-monorepo/**/*",
    "node_modules"
  ]
}

验证方法 #

打开my-project中使用$axios的文件，检查IntelliSense是否能识别类型，错误提示是否消失。若仍有问题，可尝试删除node_modules和.nuxt目录，重新执行npm install和npm run dev。

内容的提问来源于stack exchange，提问作者Théo Lavaux