Angular schematics (CLI commands) in Visual Studio Code

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 manual command lines, you can now ng generate components, services and any other schematics with a visual interface. Save time!

No more errors

Remember all the times you misspelled a command and had to delete all files, remove all the imports and start again? No more! Angular schematics extension for Visual Studio Code will ensure the command is well formed, and you’ll have a chance to check before launching complex commands.

No more search

Remember all the times you erratically searched for documentation about advanced options in the CLI wiki? No more! Angular schematics extension for Visual Studio Code will suggest you all available commands and options, along with their up to date description and values.

More productivity

  • Directly inside your favorite editor (unlike the Angular Console)
  • Will auto-open the generated file!

Getting started

Just install Angular schematics extension for Visual Studio Code, in an up to date VS Code.

Then, from an Angular ≥ 5 CLI project:

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

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

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

Schematics

By default, Angular schematics extension for Visual Studio Code supports (if they are installed):

  • @schematics/angular (official Angular CLI commands)
  • @angular/material
  • @ngrx /schematics

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

You can also configure keyboard shortcuts and default options. See the README on Github for more information.

Support

If you have a problem with the extension, open an issue on Github (commenting here is not the right place to do it).

By the same author