Angular schematics extension for Visual Studio Code
Visual Studio Code extension allowing you to generate Angular schematics with a Graphical User Interface.
Works with Ionic Angular projects too!
Why this extension?
This extension will save you time:
This extension promote Angular good practices, by improving component generation with the suggestion 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 350 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 view.
Then, you can launch Angular CLI commands from 4 places:
The quickest way to launch a generation is the first: a right-click on a directory in the Explorer. Why? Because in this scenario, the extension will automatically infer the path where you want to generate the schematic.
This extension requires Visual Studio Code version >= 1.41.
Basically, in your project, if
If the Angular CLI is not working in the VS Code Terminal, please correct that first before opening a GitHub issue. See the troubleshooting guide for help.
Compact folders setting
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:
The extension supports Ionic projects too, but it is recommended to adjust some Ionic settings.
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
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.
Angular CLI >= 9 introduces a new
The extension will add
Library specific component types
The extension suggests these additional component types if the related libraries are installed:
As for Pages, a custom
Library authors are encouraged to create a Pull Request to
easily add defaults components types in
Custom component types
You can add custom component types in your VS Code preferences (preferably your workspace preferences, so all your team can benefit).
For example, non-Ivy projects (ie. Angular <= 8 or Angular >= 9 with Ivy manually disabled) can add this deprecated component type for modals/dialogs:
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 detects the following schematics:
Scanning all packages to find all potential schematics would be too slow.
If you are a library author, you can open a Pull Request to easily add your schematics package in the
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:
If you work with multiple projects at the same time, the extension supports:
Using a right-click on a directory in the Explorer to launch a schematic generation is essential in both these cases, as the Code workspace folder and/or the Angular project will be automatically inferred by the extension. Otherwise you will have to choose them manually.