Angular schematics extension for Visual Studio Code
Visual Studio Code extension allowing you to launch Angular schematics (CLI commands) with a Graphical User Interface, directly inside VS Code!
This extension will save you time:
By the same author
Follow instructions on Visual Studio Code marketplace, or just search for "Angular schematics" by "Cyrille Tuzi" directly inside VS Code extensions panel.
Then, you can launch Angular CLI commands from 4 places:
The quickest way to launch your Angular CLI commands is the first, with a right-click inside the files Explorer context menu.
Why? Because the destination path and
This extension is only enabled inside an Angular >=5 CLI project
(ie. with an
The project opened must be the root directory of the Angular project. It won't work from a parent directory, as the CLI itself requires to be in the Angular directory.
If your Angular project is inside your backend project, and you want both opened in VS Code:
On macOS or Linux, if you use a custom shell (like
By default, this extension supports (if they are installed):
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
If you are a library author, feel free to open an issue to ask for your schematics to be added in the default list.
If you created your own Angular schematics but didn't published them yet,
this extension can load them too. By default, the extension will look into
If your schematics collection path is different,
you can add a relative path in the VS Code preferences.
Additional steps are required if you use Nx workspace schematics.
You can add keyboard shortcuts to the following actions:
But again, it's not the easiest way to use this extension:
a right-click in the files Explorer menu is better as the extension will infer the destination path and
For example, if you want all your generated components templates to be inline, in all your projects,
just add in
Or only in a specific project:
The icons in the Angular Schematics view will be nicer if you use the Material Icon Theme extension.
Puzzled about the component type choice?
Components have a local scope by default, meaning they are only usable inside the module where they are declared. So if you want to use your component in another module (for example if you are doing a reusable UI component), you have to export it. Learn more about Angular modules and their scopes.
Reusable components should be exported and pure.
Pure component (also known as a presentation component)
A pure component is a component which relies only on its
Only available in Angular >= 7.
Used to create an Angular Element, i.e. a reusable native Web Component.
Such components need to be registered in