vscode插件：json文件语法提示

小程序 app.json 增加语法提示

众所周知：微信开发者工具使用的是 vscode 的代码，（不会有人不知道吧）。在开发小程序的时候，app.json 会有对应的字段语法提示，这是怎么实现的呢？

这里以 macos 举例，windows 类似，微信开发者工具用到的 vscode 扩展地址：

/Applications/wechatwebdevtools.app/Contents/Resources/package.nw/js/libs/vseditor/extensions

其中wx-json/就是用来实现 app.json 的语法提示的。内容如下：

{
  "name": "wx-json",
  "displayName": "wx-json",
  "description": "Wechat MiniProgram & MiniGame Related JSON Language",
  "version": "1.0.0",
  "publisher": "wechat.miniprogram",
  "license": "MIT",
  "engines": {
    "vscode": "^1.40.0"
  },
  "contributes": {
    "jsonValidation": [
      {
        "fileMatch": "app.json",
        "url": "https://dldir1.qq.com/WechatWebDev/editor-extension/wx-json/app.schema.json"
      },
      {
        "fileMatch": "ext.json",
        "url": "https://dldir1.qq.com/WechatWebDev/editor-extension/wx-json/ext.schema.json"
      },
      {
        "fileMatch": "game.json",
        "url": "https://dldir1.qq.com/WechatWebDev/editor-extension/wx-json/game.schema.json"
      },
      {
        "fileMatch": "plugin.json",
        "url": "https://dldir1.qq.com/WechatWebDev/editor-extension/wx-json/plugin.schema.json"
      },
      {
        "fileMatch": "project.config.json",
        "url": "https://dldir1.qq.com/WechatWebDev/editor-extension/wx-json/project.config.schema.json"
      },
      {
        "fileMatch": "sitemap.json",
        "url": "https://dldir1.qq.com/WechatWebDev/editor-extension/wx-json/sitemap.schema.json"
      },
      {
        "fileMatch": "container.config.json",
        "url": "https://dldir1.qq.com/WechatWebDev/editor-extension/wx-json/container.config.schema.json"
      },
      {
        "fileMatch": [
          "*.json",
          "!/settings.json",
          "!/config.json",
          "!/app.json",
          "!/ext.json",
          "!/game.json",
          "!/plugin.json",
          "!/project.config.json",
          "!/sitemap.json",
          "!/container.config.json",
          "!/.eslintrc.*"
        ],
        "url": "https://dldir1.qq.com/WechatWebDev/plugins/editor/wechat-miniprogram_wx-json/1.0.0/page_component.schema.json"
      }
    ]
  }
}

可以发现。关于 app.json 的 json-scehma 的定义文件就是：https://dldir1.qq.com/WechatWebDev/editor-extension/wx-json/app.schema.json (opens new window)

自定义 JSON 语法提示

除了开发插件，IDE 的用户也可以修改 IDE 中的配置，来增加 json 的语法提示。具体操作如下：

1. 打开 setting 面板
2. 搜索 json.schemas
3. 增加自定义配置，配置方法和 jsonValidation 相同

{
  "json.schemas": [
    {
      "fileMatch": ["custom.json"],
      "url": "./custom-schema.json"
    }
  ]
}