VSCode无法检测NX创建的Next.js项目中的tsconfig问题

问题描述 #

运行npx nx lint无任何错误，但VSCode底部持续提示“No tsconfig.json”，Next.js项目中出现大量虚假类型错误，而工作区内的所有库项目均无此问题。已尝试创建tsconfig.app.json继承主配置、重启VSCode，且确认使用工作区自带的TypeScript版本而非VSCode默认版本，问题仍未解决。

项目环境与配置 #

创建命令 #

• 创建NX工作区：

npx create-nx-workspace@latest --preset=next --packageManager=yarn --skipGit

• 创建共享库：

npx nx g @nrwl/next:library components --directory=shared/ui/theme-v1.0 --component=false --tags=scope:themev1-ui,type:shared,platform:web --style=none --importPath=@my-app/shared/ui/theme-v1.0/components

Next.js项目tsconfig.json #

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "jsx": "preserve",
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "incremental": true,
    "types": ["jest", "node"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.js",
    "src/**/*.jsx",
    "next-env.d.ts"
  ],
  "exclude": ["node_modules", "jest.config.ts"]
}

工作区package.json #

{
  "name": "my-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "start": "nx serve",
    "build": "nx build",
    "test": "nx test"
  },
  "private": true,
  "dependencies": {
    "@nrwl/next": "15.3.3",
    "core-js": "^3.6.5",
    "next": "13.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "regenerator-runtime": "0.13.7",
    "tslib": "^2.3.0"
  },
  "devDependencies": {
    "@babel/preset-react": "^7.14.5",
    "@nrwl/cypress": "15.3.3",
    "@nrwl/eslint-plugin-nx": "15.3.3",
    "@nrwl/jest": "15.3.3",
    "@nrwl/linter": "15.3.3",
    "@nrwl/nx-cloud": "latest",
    "@nrwl/react": "15.3.3",
    "@nrwl/web": "15.3.3",
    "@nrwl/workspace": "15.3.3",
    "@swc/core": "^1.2.173",
    "@swc/jest": "0.2.20",
    "@testing-library/react": "13.4.0",
    "@types/jest": "28.1.1",
    "@types/node": "18.11.9",
    "@types/react": "18.0.25",
    "@types/react-dom": "18.0.9",
    "@typescript-eslint/eslint-plugin": "^5.36.1",
    "@typescript-eslint/parser": "^5.36.1",
    "babel-jest": "28.1.1",
    "cypress": "^11.0.0",
    "eslint": "~8.15.0",
    "eslint-config-next": "13.0.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-jsx-a11y": "6.6.1",
    "eslint-plugin-react": "7.31.11",
    "eslint-plugin-react-hooks": "4.6.0",
    "jest": "28.1.1",
    "jest-environment-jsdom": "28.1.1",
    "nx": "15.3.3",
    "prettier": "^2.6.2",
    "react-test-renderer": "18.2.0",
    "ts-jest": "28.0.5",
    "ts-node": "10.9.1",
    "typescript": "~4.8.2"
  }
}

nx.json #

{
  "$schema": "./node_modules/nx/schemas/nx-schema.json",
  "npmScope": "my-app",
  "tasksRunnerOptions": {
    "default": {
      "runner": "@nrwl/nx-cloud",
      "options": {
        "cacheableOperations": [
          "build",
          "lint",
          "test",
          "e2e"
        ],
        "accessToken": "some access token"
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": [
        "^build"
      ],
      "inputs": [
        "production",
        "^production"
      ]
    },
    "test": {
      "inputs": [
        "default",
        "^production",
        "{workspaceRoot}/jest.preset.js"
      ]
    },
    "e2e": {
      "inputs": [
        "default",
        "^production"
      ]
    },
    "lint": {
      "inputs": [
        "default",
        "{workspaceRoot}/.eslintrc.json"
      ]
    }
  },
  "namedInputs": {
    "default": [
      "{projectRoot}/**/*",
      "sharedGlobals"
    ],
    "production": [
      "default",
      "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
      "!{projectRoot}/tsconfig.spec.json",
      "!{projectRoot}/jest.config.[jt]s",
      "!{projectRoot}/.eslintrc.json"
    ],
    "sharedGlobals": [
      "{workspaceRoot}/babel.config.json"
    ]
  },
  "generators": {
    "@nrwl/react": {
      "application": {
        "babel": true
      }
    },
    "@nrwl/next": {
      "application": {
        "style": "css",
        "linter": "eslint"
      }
    }
  },
  "defaultProject": "my-app"
}

已尝试的操作 #

• 创建tsconfig.app.json并继承项目根目录的tsconfig.json
• 多次重启VSCode
• 确认VSCode使用工作区TypeScript版本而非自带版本

解决方案建议 #

1. 重新确认TypeScript版本选择
   打开命令面板（Ctrl+Shift+P），运行TypeScript: Select TypeScript Version，重新选择Use Workspace Version，强制刷新TypeScript服务的配置读取。

2. 检查tsconfig.base.json路径映射
   确保工作区根目录的tsconfig.base.json中包含正确的路径映射，示例：

   "compilerOptions": {
     "paths": {
       "@my-app/*": ["libs/*"]
     }
   }
   

   同时验证Next.js项目的tsconfig.json中extends路径是否与实际目录结构匹配（当前../../tsconfig.base.json适用于apps/my-app目录下的项目）。

3. 清除VSCode缓存与配置
   删除项目目录下的.vscode/settings.json（若存在），关闭VSCode后重新打开；或通过命令面板运行Developer: Reload Window强制刷新窗口。

4. 触发TypeScript配置重载
   临时修改Next.js项目tsconfig.json中的noEmit值为false，保存后再改回true，触发TypeScript服务重新解析配置文件。

5. 验证NX项目配置
   运行nx show project my-app，查看输出中是否正确识别了项目的tsconfig路径，确认NX对项目的配置无异常。

内容的提问来源于stack exchange，提问作者shet_tayyy