In VS Code, how can I get JSON intellisense based on the files in a given directory?

Question

My application includes JSON Files. One JSON property common to all JSON files in my app is "type". The value of the type property must be the file name of any handlebars (.hbs) file in my /templates/ directory.

My goal is to get intellisense as I type the value for a given "type" property in a JSON file. The intellisense should include a list of all handlebars file names in the /templates/ directory. Either an automatic solution, or one where I provide a list of values would be great.

Is there a way in the VS Code config or with TypeScript to make that happen?

Answer 1

You can add a JSON schema to you workspace settings.json in .vscode directory.

This is an example that adds intellisense to package.json for ghooks settings:

"json.schemas": [
    {
        "fileMatch": [
            "/package.json"
        ],
        "schema": {
            "type": "object",
            "properties": {
                "config": {
                    "properties": {
                        "ghooks": {
                            "type": "object",
                            "description": "Git hook configurations",
                            "properties": {
                                "applypatch-msg": {
                                    "type": "string"
                                },
                                "pre-applypatch": {
                                    "type": "string"
                                },
                                "post-applypatch": {
                                    "type": "string"
                                },
                                "pre-commit": {
                                    "type": "string"
                                },
                                "prepare-commit-msg": {
                                    "type": "string"
                                },
                                "commit-msg": {
                                    "type": "string"
                                },
                                "post-commit": {
                                    "type": "string"
                                },
                                "pre-rebase": {
                                    "type": "string"
                                },
                                "post-checkout": {
                                    "type": "string"
                                },
                                "post-merge": {
                                    "type": "string"
                                },
                                "pre-push": {
                                    "type": "string"
                                },
                                "pre-receive": {
                                    "type": "string"
                                },
                                "update": {
                                    "type": "string"
                                },
                                "post-receive": {
                                    "type": "string"
                                },
                                "post-update": {
                                    "type": "string"
                                },
                                "pre-auto-gc": {
                                    "type": "string"
                                },
                                "post-rewrite": {
                                    "type": "string"
                                }
                            }
                        }
                    }
                }
            }
        }
    }
],

To get intellisense for specific property values you can check out this documentation: https://github.com/json-schema/json-schema/wiki/anyOf,-allOf,-oneOf,-not#oneof

For your usecase it could also be useful to dynamically generate the JSON schema that includes all possible template names and include the schema in your JSON file via $schema property or via configuration:

"json.schemas": [
    {
        "fileMatch": [
            "/json-files/*.json"
        ],
        "url": "./templates.schema.json"
    }
],

I'm not aware of any vscode feature to dynamically generate such a schema. You might want to use an approach as I did in this extension: https://github.com/skolmer/vscode-i18n-tag-schema - an extension that uses a node module to dynamically generate a schema file.