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?

Productivity!

This extension will save you time:

No more typo errors = no more cleaning mess
No more documentation search, all options available are proposed and described
Many options are inferred (like the path and the project)
Generated files will auto open!
Promote good practices for component types

By the same author

@ngx-pwa/local-storage: 1st Angular library for local storage
Other Angular libraries: @ngx-pwa/offline and @ngx-pwa/ngsw-schema
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 panel.

Then, you can launch Angular CLI commands from 4 places:

the files Explorer context menu: right-click on any directory, then choose an "Angular: Generate..." command
the dedicated Angular Schematics view (icon in the Activity bar on the left)
the Command Palette
from a shortcut (see configuration below)

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 project will be automatically inferred to the directory you just right-clicked.

Requirements

Angular CLI

This extension is only enabled inside an Angular >=5 CLI project (ie. with an angular.json or .angular-cli.json file in workspace).

Project root

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:

open the root directory of the Angular project,
then in VS Code menu: "File" > "Add Folder to Workspace" > open the directory of your backend project.

Custom shell

On macOS or Linux, if you use a custom shell (like zsh) and your Angular CLI installation is tied it, it must be configured accordingly in your VS Code settings (terminal.integrated.shell.osx or terminal.integrated.shell.linux).

Other features

Other schematics

By default, this extension supports (if they are installed):

@schematics/angular (official Angular CLI commands)
@angular/material
@ionic/angular-toolkit
@ngrx/schematics
@nrwl/schematics
@nstudio/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 want to use other schematics, just add their package name in ngschematics.schematics in your VS Code preferences.

For example: "ngschematics.schematics": ["@angular/material"]

If you are a library author, feel free to open an issue to ask for your schematics to be added in the default list.

Custom schematics

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 ./schematics/collection.json.

If your schematics collection path is different, you can add a relative path in the VS Code preferences. For example: "ngschematics.schematics": ["./path/to/collection.json"]

Additional steps are required if you use Nx workspace schematics.

Keyboard shortcuts

You can add keyboard shortcuts to the following actions:

ngschematics.generateComponent
ngschematics.generateService
ngschematics.generateModule
ngschematics.generate

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 project.

Default options

schematics option of angular.json already 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
} } } } }

Icons

The icons in the Angular Schematics view will be nicer if you use the Material Icon Theme extension.

Component types

Puzzled about the component type choice?

Exported component

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 @Inputs for data, ie. its role is only presentation (~ 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). Observing this difference is a good practice, learn more about architecture in Angular projects.

Element component

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 entryComponents and to use native ShadowDom viewEncapsulation. See the documentation for more info.

Release Notes

Changelog available here.

License

MIT