Using JSON Schema for Visual Studio Code autocompletion

I’ve been working on a few code generations ideas that I have and found the need to create a number of

I’ve built a few small scale versions of this kidn of thing over the years. Typcially when you’re working on a system designed as a set of

This is a very time consuming and error prone process. Every couple of years, I’ll try some of the latest tools that seem to help in this area, and I think you need a few things to be useful for the average programmer.

• A system that doesn’t require a 4-year degree to pick up
• An easy, clean, and simple way to define a source of truth for your application models
• Integration with your code editors and
  IDE
  s

Every couple of years I try out things like the

The four year degree software

I haven’t reviewed

I recall concepts you have to keep in your head also makes this a bit of an issue to use while you’re trying to think through the design you’re actually getting paid to build.

Easy, clean, and simple way to define your source of truth

Using something like the

I think systems like

Integeration with you code editors and IDEs

The

A good start

I used the following articles as a getting started guide for this work:

• How to create your own auto-completion for JSON and YAML files on VS Code with the help of JSON Schema
• Intellisense for JSON and YAML in VS Code

While this isn’t a a real code generation tool. I found something related to the IDE integration using

For this site I’ve built a simple code generation tool that uses the a

First I started with a

export interface Data {
    title: string
    abbr?: string
    desc?: string
    refs?: Ref[]
}

export interface Ref {
    url: string
    title?: string
    desc?: string
}

Which is a relativly simple interface (and simplied for the real interfaced use to generated the pop-ups on this site).

The interface has the following:

• title: displayed inline with the page text and displayed on the title position of the
  Standard Card
  displayed in the pop-up.
• abbr: if provided displayed inline with the page text (instead of the title) and as a parenthetical on the title position of the
  Standard Card
  displayed in the pop-up.
• desc if provided is displayed in the main content position of the
  Standard Card
  displayed in the pop-up.
• refs[]: if provided is is displayed as a list in the main content position of the
  Standard Card
  displayed in the pop-up.

I wanted to be able to create a data file in

ide:
    title: <b>I</b>ntegrated  <b>D</b>evelopment <b>E</b>nvironment
    abbr:
        - visual studio code
    desc: A software application that provides comprehensive facilities to computer programmers for software development.
    refs:
        -   title: Wikipedia
            url: https://en.wikipedia.org/wiki/Integrated_development_environment

which will generate a

<script lang="ts">
    import type {Data} from '$lib/popover/Data'
    import DataCard from '$lib/popover/Data.svelte'

    const data:Data = {
    "title": "<b>I</b>ntegrated  <b>D</b>evelopment <b>E</b>nvironment",
    "abbr": "IDE",
    "desc": "A software application that provides comprehensive facilities to computer programmers for software development.",
    "refs": [
        {
            "title": "Wikipedia",
            "url": "https://en.wikipedia.org/wiki/Integrated_development_environment"
        }
    ]
}
</script>

<DataCard {data} />

and a

...
import ide from './Ide.svelte'
...
export const IDE = ide

which allows me to import the pop-up like:

<script lang="ts">
    import { IDE } from '$lib/ref/tooltip';
</script>


This is a example of the <IDE /> Svelte based pop-up.

While this artice isn’t about the component itself, to make something like this useful you need to be able to edit the input data file easily to add items while you’re writing and avoid to much of a context switch. If you’re constantly trying to lookup the interfaces and reviewing the code to recall which parameters are available the usage of the system will not be fun.

For the above, I created the following

{
    "$schema": "http://json-schema.org/draft-07/schema",
    "title": "JSON Schema for data generator",
    "type": "object",
    "patternProperties": {
        "[a-zA-Z0-9_]": {
            "required": ["title"],
            "properties": {
                "title": {
                    "type": "string"
                },
                "abbr": {
                    "type": "string"
                },
                "desc": {
                    "type": "string"
                },
                "refs": {
                    "type": "array",
                    "items": {
                        "$ref": "#/definitions/refs"
                    }
                },                
            }
        }
    },
    "definitions": {
        "refs": {
            "type": "object",
            "required": ["url"],
            "properties": {
                "url": {
                    "type": "string"
                },
                "title": {
                    "type": "string"
                },
                "desc": {
                    "type": "string"
                }
            }
        },        
    }
}

and added the following section to the

{
    "yaml.schemas": {
        "./.vscode/json-schema.json": [
            "**/*.data.yaml",
            "*.data.yaml",
            "/gen/*"
        ]
    },
    "json.schemas": [
        {
            "fileMatch": ["*.data.yaml"],
            "url": "./.vscode/json-schema.json"
        }
    ]
}