The magic behind IDE autocompletion for files like angular.json

We all use frameworks like Angular, React and tools like ESLint, Npm, etc.

Have you ever wondered how your IDE gives you autocompletion for files like angular.json, package.json, .eslintrc, and many more ?

Well, they match your files against several remote JSON Schema stores, among which the most popular is schemastore.org.

Their API provides a catalog of JSON Schemas that describe various commonly used files.

There are two types of entries:

• static: references a file stored directly on schemastore.org
• dynamic: references a URL which points to a specific JSON Schema

The advantage of dynamic entries is that you can update your JSON Schema without having to update your entry in the catalog, and that's exactly what .angular-cli.json does:

{
  "name": ".angular-cli.json",
  "description": "Angular CLI configuration file",
  "fileMatch": [".angular-cli.json", "angular-cli.json"],
  "url": "https://raw.githubusercontent.com/angular/angular-cli/master/packages/angular/cli/lib/config/schema.json"
}

At Pmbot, we automatically generate and publish the JSON Schema of our CLI configuration file to our Github config repo every time we release a new version of our CLI. The entry for our .pmbot.yml in the schemastore.org points to the raw JSON Schema file hosted on Github.

Thanks for reading !