Angular schematics (CLI commands) in Visual Studio Code
I’m happy to announce the stable release of Angular schematics extension for Visual Studio Code!
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.
- Directly inside your favorite editor
- Will auto-open the generated file!
- Promote good practices for component types
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.
By default, Angular schematics extension for Visual Studio Code supports (if they are installed):
@schematics/angular(official Angular CLI commands)
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.
If you are a library author, feel free to open an issue to ask for your schematics to be added in the default list.
You can also configure keyboard shortcuts and default options. See the README on Github for more information.
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