VSCode中React项目JSON JS Intellisense自动补全失效求助

你在导入jobs.json后无法获得JSON对象及嵌套值的自动补全，以下是几种无需额外配置文件即可实现该功能的方法：

方法1：JSDoc类型注解（纯JavaScript项目适用） #

在导入JSON的文件中，给导入变量添加JSDoc类型注释，让VS Code识别JSON结构：

/**
 * @type {Array<{
 *   id: string;
 *   title: string;
 *   type: string;
 *   description: string;
 *   location: string;
 *   salary: string;
 *   company: {
 *     name: string;
 *     description: string;
 *     contactEmail: string;
 *     contactPhone: string;
 *   }
 * }>}
 */
import jobs from './jobs.json';

添加后，VS Code会根据注解生成对应的自动补全提示。

方法2：TypeScript类型声明（TS/TSX项目适用） #

如果是TypeScript项目，创建一个类型声明文件（如jobs.d.ts）放在项目根目录：

interface Company {
  name: string;
  description: string;
  contactEmail: string;
  contactPhone: string;
}

interface Job {
  id: string;
  title: string;
  type: string;
  description: string;
  location: string;
  salary: string;
  company: Company;
}

declare module '*.json' {
  const value: Job[];
  export default value;
}

VS Code会自动识别该类型文件，为JSON导入提供完整的嵌套结构补全。

方法3：检查VS Code核心设置 #

确认以下VS Code设置是否开启：

• 打开设置（快捷键Ctrl+,），搜索javascript.implicitProjectConfig.checkJs，开启后VS Code会自动推断JavaScript文件中的类型
• 搜索json.schemas，确保没有配置屏蔽jobs.json的Schema关联
• 若项目使用TypeScript，搜索typescript.enablePromptUseWorkspaceTsdk，确保使用项目本地的TS版本，避免全局版本兼容问题

内容的提问来源于stack exchange，提问作者Alex Akshaj Mody