VSCode中Next.js 13.4项目TypeScript插件无法正常启用问题

基础环境与配置检查 #

• 验证TypeScript版本：执行tsc -v，Next.js 13.4需搭配TS 5.0及以上版本，版本过低会导致编辑器无法识别TS服务。
• 确认项目根目录存在tsconfig.json：创建项目时必须带--typescript参数（如npx create-next-app@13.4 my-app --typescript），若未生成，手动创建基础配置：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [{"name": "next"}]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

编辑器TS服务重置与配置 #

• 重启TS服务：若使用VS Code，打开命令面板（Ctrl+Shift+P）输入TypeScript: Restart TS Server，若找不到该命令，说明编辑器未识别到项目TS配置，先补全上述tsconfig.json。
• 锁定编辑器TS版本：打开VS Code设置（Ctrl+,），搜索typescript.tsdk，设置为项目本地路径node_modules/typescript/lib，避免全局版本与项目依赖不兼容。
• 排查插件冲突：暂时禁用ESLint以外的语法检查、代码高亮类插件，部分第三方TS插件可能与Next.js内置TS服务冲突。

项目依赖修复 #

• 重装项目依赖：删除node_modules、package-lock.json/yarn.lock，执行npm install或yarn install，确保依赖无损坏。
• 补全类型依赖：执行npm list @types/react @types/node检查，缺失则手动安装：npm install @types/react @types/node --save-dev

Next.js特定配置验证 #

• 检查next.config.js：确保未配置typescript: { ignoreBuildErrors: true }这类禁用TS检查的选项，默认Next.js会启用TS服务。
• 确认ESLint配置：安装eslint-config-next后，.eslintrc.json需正确引入规则：

{
  "extends": ["next/core-web-vitals", "next/typescript"]
}

执行npm run lint验证ESLint能否正常识别TS文件，排除配置错误导致的TS服务异常。

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