Angular schematics extension for Visual Studio CodeVisual Studio Code extension allowing you to generate Angular schematics with a Graphical User Interface. Works with Ionic Angular projects too! Why this extension?Productivity!This extension will save you time:
Good practicesThis 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:
SponsorshipI 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
Getting startedFollow 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. RequirementsThis 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. RecommendationsCompact folders settingSince 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:
IonicThe extension supports Ionic projects too, but it is recommended to adjust some Ionic settings. Component good practicesThis extension helps you to follow good practices, by suggesting different component types. Learn more about Angular components types. PageOption pre-filled: A component associated to a route relies on specific features
(like the Pure componentOption pre-filled: A pure component, also known as a presentation component,
is a component which relies only on its Learn more about architecture in Angular projects. Exported componentOptions pre-filled: 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. Learn more about Angular modules and their scopes. Component suffixesAngular CLI >= 9 introduces a new For example, The extension will add
Library specific component typesThe 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 typesYou 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:
Default options
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:
Libraries schematicsBy 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
Custom schematicsIf 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:
Multiple projectsIf 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. Release NotesLicenseMIT |