Angular schematics (CLI commands) in Visual Studio Code

Cyrille Tuzi
Jun 22, 2018 · 3 min read

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
  • Will auto-open the generated file!
  • Promote good practices for component types

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 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 and projects 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
  • @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

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

Cyrille Tuzi

Written by

JavaScript and Angular trainer, PHP certified, @formationjs

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade