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!
Why this extension?
This extension will save you time:
This extension promote Angular good practices, by improving component generation with the choice of different component types (explained below). To separate component types is good for:
I started this project to help my students learning Angular. Now, according to Visual Studio Code Marketplace, this extension helps more than 250 000 developers like you to be more productive.
It's a lot of free work. So if your company earns money with projects using this extension, consider becoming a sponsor.
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 requires Visual Studio Code version >= 1.41.
This extension is only enabled inside an Angular CLI project
(ie. with an
We follow Angular LTS support, ie. your project should use Angular >= 7.
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
VS Code compact folders
Since VS Code 1.41, a new default behavior combines single folders together.
While it might be a good idea in general, it is annoying with this extension, as clicking on the right directory where you want to generate something becomes more confusing.
So you should consider disabling this setting in your VS Code workspace preferences:
If you use Ionic, it configures custom default schematics in
Unfortunately, these schematics are completely outdated
(some important options like
While Ionic custom schematics were useful in Ionic 3,
because Ionic added special things on top of Angular,
they are now useless in Ionic >= 4, which is just standard Angular.
So you should remove this line of config in your
Component good practices
This extension helps you to follow good practices, by suggesting different component types.
A component associated to a route relies on specific features
Since Angular 9, a modal/dialog must be generated as a page too
(previously it was a special type:
A pure component, also known as a presentation component,
is a component which relies only on its
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 a component in another module (for example if you are doing a reusable UI component), you have to export it.
Customize component suffixes (Angular >= 9)
Angular CLI >= 9 introduces a new
To customize component suffixes, your root
Now the extension will ask which component type you want based on this suffixes list,
and set the
Common suffixes will automatically pre-select the recommended type:
The list above includes common suffixes in Angular, Material, Ionic and PrimeNG. If you think some other common suffixes are missing, please open a Pull Request with new defaults.
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:
It can be interesting for the following options:
By default, this extension supports (if they are installed):
Scanning all packages to find all potential schematics would be too slow. If you are a library author, feel free to open a Pull Request to add your schematics in the default list.
If you created your own Angular schematics,
this extension can load them too. By default, the extension will look into
If your schematics collection path is different, you can add:
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
The icons in the Angular Schematics view will be nicer if you use the Material Icon Theme extension.