The magic behind IDE autocompletion for files like angular.json

gempain

Geoffroy Empain

Posted on August 3, 2020

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"
}
Enter fullscreen mode Exit fullscreen mode

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 !

đź’– đź’Ş đź™… đźš©
gempain
Geoffroy Empain

Posted on August 3, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related