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.