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?

Productivity!

This extension will save you time:

Simple interface for Angular CLI: no command line required
Many options are pre-filled
The generated file will auto open
No more typo errors
No more search in documentation: all options available are described

Good practices

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:

the architecture of your project, ie. maintainability and scalability,
performances: pure components are optimized.

Sponsorship

I started this project to help my students learning Angular. Now, according to Visual Studio Code Marketplace, this extension helps more than 400 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

@ngx-pwa/local-storage: Angular library for local storage
typescript-strictly-typed: reliable code with TypeScript strictly typed
Popular Angular posts on Medium
Follow updates of this lib on Twitter
Angular onsite trainings (based in Paris, so the website is in French, but my English bio is here and I'm open to travel)

Getting started

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 Explorer: right-click on a directory, then choose "Angular: Generate..."
the dedicated Angular Schematics view (icon in the Activity bar on the left)
the Command Palette
with a keyboard shortcut

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.

Requirements

This extension requires Visual Studio Code version >= 1.41.

Basically, in your project, if ng g component hello works in the VS Code Terminal, the extension should work.

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.

Recommendations

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: "explorer.compactFolders": false

Ionic

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.

Learn more about Angular components types.

Page

Option pre-filled: --skip-selector

A component associated to a route relies on specific features (like the ActivatedRoute service to get URL params). Thus, it should not be called via a HTML tag and so should not have a selector.

Pure component

Option pre-filled: --change-detection OnPush

A pure component, also known as a presentation component, is a component which relies only on its @Inputs for data, ie. its role is only presentation / UI (~ view), as opposed to an impure component, which relies on external asynchronous operations (like a HTTP request via a service) for data, ie. a page (~ controller).

Learn more about architecture in Angular projects.

Exported component

Options pre-filled: --export --change-detection OnPush

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 suffixes

Angular CLI has a --type option for component generation, to change the component's suffix.

For example, ng g hello --type page will generate the hello.page.ts file with a HelloPage class (instead of the hello.component.ts file with a HelloComponent class).

The extension will add --type page automatically for Pages if you change the authorized suffixes in your lint config:

.eslintrc.json:

{
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "rules": {
        "@angular-eslint/component-class-suffix": [
          "error",
          {
            "suffixes": [
              "Component",
              "Page"
            ]
          }
        ]
      }
    }
  ]
}

tslint.json:

{
  "rules": {
    "component-class-suffix": [true, "Component", "Page"]
  }
}

Library specific component types

The extension suggests these additional component types if the related libraries are installed:

Angular Material dialog
Angular Material snackbar
Angular Material bottomsheet
Ionic modal
Ionic popover
PrimeNG dynamic dialog

As for Pages, a custom --type/suffix will be automatically added if your linter is configured accordingly.

Library authors are encouraged to create a Pull Request to easily add defaults components types in src/defaults.ts.

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:

{
  "ngschematics.componentTypes": [{
    "label": "Element",
    "options": [["changeDetection", "OnPush"], ["viewEncapsulation", "ShadowDom"]],
    "detail": "Component instanciated at runtime, like a dialog or modal",
  }]
}

Default options

schematics option of angular.json allows to save default options for schematics commands.

For example, if you want all your generated components templates to be inline, in all your projects, just add in angular.json:

{
  "schematics": {
    "@schematics/angular:component": {
      "inlineTemplate": true
} } }

Or only in a specific project:

{
  "projects": {
    "yourprojectname": {
      "schematics": {
        "@schematics/angular:component": {
          "inlineTemplate": true
} } } } }

It can be interesting for the following options:

@schematics/angular:component
- inlineTemplate
- inlineStyle
- style
- prefix
- changeDetection
- viewEncapsulation
- displayBlock
all schematics
- flat
- skipTests

Libraries schematics

By default, this extension detects the following schematics:

@schematics/angular (official Angular CLI commands)
@angular/material
@ionic/angular-toolkit
@ngrx/schematics
@ngxs/schematics
@nativescript/schematics
@ngx-formly/schematics
primeng-schematics
@ngx-kit/collection
ngx-spec
./schematics/collection.json

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 src/defaults.ts.

Custom schematics

If you created your own Angular schematics, this extension can load them too. By default, the extension will look into ./schematics/collection.json.

If your schematics collection path is different, you can add:

a relative path in VS Code preferences: "ngschematics.schematics": ["./path/to/collection.json"]
if it's a package in node_modules: "ngschematics.schematics": ["my-private-lib"]

Multiple projects

If you work with multiple projects at the same time, the extension supports:

VS Code workspace folders
Angular CLI monorepo (several ng g applications and/or ng g librarys in the same project)
Hoisted node_modules (eg. Yarn workspaces)

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 Notes

Changelog available here.

License

MIT

Angular Schematics

Cyrille Tuzi