Angular schematics (CLI commands) in Visual Studio Code

Image for post
Image for post

I’m happy to announce the stable release of Angular schematics extension for Visual Studio Code!

A French version of this article is available here.

Why this extension?

No more errors

No more search

More productivity

  • Will auto-open the generated file!
  • Promote good practices for component types

Getting started

Then, from an Angular ≥ 5 CLI project:

  • right-click on any directory in files Explorer,
  • or open the Command Palette,

choose an “Angular: Generate…” command and just fill the requested options.

Image for post
Image for post

If you’re launching the command from the files Explorer context menu, the destination path and projects will be automatically configured to the directory you just right-clicked.

Schematics

  • @schematics/angular (official Angular CLI commands)
  • @angular/material
  • @ionic/angular-toolkit
  • @ngrx/schematics
  • @nstudio/schematics
  • ./schematics/collection.json

Scanning all packages to find all potential schematics would be too slow. If you want to use other schematics, just add their package name in ngschematics.schematics in your VS Code preferences.

For example: "ngschematics.schematics": ["@angular/material"]

If you are a library author, feel free to open an issue to ask for your schematics to be added in the default list.

Other features

Support

By the same author

JavaScript and Angular trainer, PHP certified, @formationjs

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store