VS Code中Next.js JSX文件代码提示失效问题求助

检查VS Code扩展 #

• 确认启用ESLint和官方的JavaScript扩展（或JavaScript and TypeScript Nightly），并更新到最新版本。
• 暂时禁用第三方JS/JSX相关扩展，排查是否存在扩展冲突。

添加JS项目类型配置文件 #

Next.js JS项目默认未开启完整类型提示，需手动创建配置文件：

1. 在项目根目录新建jsconfig.json，写入以下内容：

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Node",
    "target": "ES2020",
    "jsx": "preserve",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*", "pages/**/*", "components/**/*"],
  "exclude": ["node_modules"]
}

2. 重启VS Code让配置生效，该文件会为JS项目提供类似TS项目的类型检查支持。

确认VS Code核心设置 #

即使重置过设置，仍可手动验证以下选项：

• 打开设置（快捷键Ctrl+,），搜索javascript.suggest.completeFunctionCalls，确保勾选启用。
• 搜索javascript.implicitProjectConfig.checkJs，设置为true，开启JS文件的类型检查。

清除VS Code缓存 #

缓存异常可能导致提示失效：

• 关闭VS Code，删除项目根目录下的.vscode文件夹（若存在）。
• 打开命令面板（Ctrl+Shift+P），执行Developer: Reload Window重载窗口。
• 可尝试删除VS Code全局缓存：
  • Windows：%APPDATA%\Code\Cache、%APPDATA%\Code\CachedData
  • Mac：~/Library/Caches/Code
  • Linux：~/.config/Code/Cache、~/.config/Code/CachedData

更新项目依赖 #

• 确保next、react、react-dom为最新稳定版，执行命令更新：

npm update next react react-dom

• 安装类型声明包辅助提示（JS项目也可使用）：

npm install --save-dev @types/react @types/react-dom

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