Jun 22, 2018
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
- 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 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).
Become a Pro!
You liked the Angular Schematics extension for VS Code, and want to support my open source work by helping yourself at the same time? An extended version is available: Schematics Pro. It contains:
- even more advanced features for Angular
- code generation for other frameworks too: React, Vue, Ionic, Svelte, Stencil, Lit, Nest and more
- easy and fast custom schematics creation
