如何让VS Code检查JS中导入JSON对象属性引用的错误？

可以通过两种方式实现键名拼写检查：

方式一：利用VS Code内置TypeScript服务（无需额外扩展） #

VS Code自带的TypeScript服务可以结合JSDoc实现类型校验，步骤如下：

1. 在JS文件顶部添加// @ts-check开启类型检查
2. 导入JSON时用JSDoc标注其类型：

// @ts-check
/** @type {import('./your-json-file.json')} */
const jsonData = require('./your-json-file.json');

jsonData.wrongKeyName // 此处会显示红色波浪线错误提示

这种方法无需安装扩展，依赖VS Code原生能力就能实时检测键名拼写错误。

方式二：通过ESLint扩展配置校验规则 #

如果日常使用ESLint做代码检查，可通过以下步骤实现：

1. 安装VS Code的ESLint扩展
2. 安装对应的校验插件：

npm install eslint-plugin-json-schema-validator --save-dev

3. 在项目根目录的.eslintrc.json中添加配置：

{
  "plugins": ["json-schema-validator"],
  "rules": {
    "json-schema-validator/no-invalid": "error"
  },
  "settings": {
    "json-schema-validator": {
      "schemas": [
        {
          "fileMatch": ["./your-json-file.json"],
          "schema": "./your-json-file.json"
        }
      ]
    }
  }
}

配置完成后，引用错误键名时ESLint会即时给出错误提示。

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