VSCode中如何让JSON文件遵循指定TypeScript Interface约束

VS Code本身自带JSON Schema校验能力，无需额外安装插件即可实现需求，操作步骤如下：

1. 先将你提供的TypeScript接口转换为对应的JSON Schema，你可以手动编写，也可以用ts-json-schema-generator这类工具批量转换，对应Schema示例如下：

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "id": {
      "type": "number"
    },
    "tag": {
      "type": "string"
    }
  },
  "required": ["tag"],
  // 如果你允许JSON里出现接口未定义的字段，可以删除下面这行
  "additionalProperties": false
}

将上述内容保存为settings.schema.json存放在项目中。
2. 打开项目的.vscode/settings.json（如果没有就手动新建），添加如下配置指定校验规则：

{
  "json.schemas": [
    {
      // 这里替换成你要校验的目录路径，**表示匹配所有子目录
      "fileMatch": ["/你的指定目录/**/*.json"],
      "url": "./settings.schema.json的相对路径"
    }
  ]
}

配置完成后，打开对应目录下的JSON文件时，VS Code会自动校验格式，类型错误、缺失必填的tag字段都会实时标红提示，还会自带字段自动补全。

如果需要在CI流水线、提交代码前置校验等场景做强制校验，可以用以下方案：

• 方案1：AJV脚本批量校验
  AJV是行业通用的JSON Schema校验库，你可以写个Node脚本批量扫描指定目录的所有JSON文件做校验，适合集成到CI流程，校验不通过直接阻断流水线，核心代码示例：

import Ajv from 'ajv'
import fs from 'fs'
import glob from 'glob'
import settingsSchema from './settings.schema.json'

const ajv = new Ajv()
const validate = ajv.compile(settingsSchema)
// 扫描指定目录下所有JSON文件
const jsonFiles = glob.sync('./你的指定目录/**/*.json')

jsonFiles.forEach(filePath => {
  const content = JSON.parse(fs.readFileSync(filePath, 'utf-8'))
  const valid = validate(content)
  if (!valid) {
    console.error(`文件${filePath}不符合规范：`, validate.errors)
    process.exit(1)
  }
})

• 方案2：TypeBox运行时校验
  如果你不想单独维护JSON Schema，可以用TypeBox定义和TS接口完全等价的运行时类型，既能导出给TS当静态类型用，也能直接做校验，避免Schema和TS接口不一致的问题，示例：

import { Type, Static } from '@sinclair/typebox'
import fs from 'fs'
import glob from 'glob'

// 定义和你给出的Settings接口完全一致的运行时类型
const SettingsSchema = Type.Object({
  id: Type.Optional(Type.Number()),
  tag: Type.String()
})
// 可以直接导出给业务代码当TS接口用
type Settings = Static<typeof SettingsSchema>

const jsonFiles = glob.sync('./你的指定目录/**/*.json')
jsonFiles.forEach(filePath => {
  const content = JSON.parse(fs.readFileSync(filePath, 'utf-8'))
  if (!SettingsSchema.Check(content)) {
    console.error(`文件${filePath}不符合Settings接口规范`)
    process.exit(1)
  }
})

• 方案3：前置提交校验
  可以把上面的校验脚本配置到husky等pre-commit钩子中，开发人员提交代码时自动触发校验，不通过就无法提交，从流程上避免不符合规范的JSON文件入库。

内容的提问来源于stack exchange，提问作者Dani-Br