Copilot for Visual Studio Code

This extension contributes JavaScript/TypeScript development tooling. It is the successor of the AngularDoc extension, but we have made significant improvements to the static analyzer's performance, and best of all, we now support React, Vue, NestJS, and Stencil in addition to Angular!

Features

• "Application Explorer" view that lets you browse the application's modules and components, and the top level constructs in the TypeScript file.
• "State Management Explorer" view that lets you browse the NgRx/Redux/Vuex constructs such as stores, states, reducers, selectors, and effects, etc.
• State management diagrams for NgRx, Redux, and Vuex.
• (Angular) Invoking schematics commands from the explorer's inline menu. The list of supported schematics is customizable (see the Usage section below).
• "RxJS Operator Decision Tree" command (see https://rxjs-dev.firebaseapp.com/operator-decision-tree).

Screenshots

Installation

Launch Visual Studio Code. In the command palette (cmd-shift-p) select Install Extension and enter Copilot.

Usage

To verify the installation, you can optionally clone the repositories from https://github.com/AngularDoc-Showcases and see if the Copilot features work as expected.

To use Copilot view, click the "Copilot" icon in the Activity bar on the far left-hand side. It may take a few seconds for the project to be analyzed and the items to show up in the Application Explorer and State Management Explorer. Click on an element in the tree view and the corresponding file will be previewed in the editor.

The "State Management Explorer" view and diagrams are advanced features that are enabled for projects using AngularDoc Team Services on https://angulardoc.io, and open source projects that have set up the free service on https://angulardoc.org.

To run the schematics commands, move the cursor over a module in Application Explorer, and select the inline icon "Schematics". You will then be asked to pick the schematics type and enter the entity type/name in the input box. Press "Enter" to confirm. The following schematics are supported by default (and you can add your own schematics to the list in the User Settings):

• @schematics/angular
• @ngrx/schematics
• @angular/pwa
• @ng-bootstrap/schematics
• @angular/material
• @clr/angular
• @angular/elements

Note: Only the schematics that have been installed in the project will be available to pick.

To run the "RxJS Operator Decision Tree" command, select it in the command palette (cmd-shift-p).

About

For more information on our product suite, please visit our web site. Follow us on Twitter @angulardocio to receive updates. Last but not the least, please leave a review if you like this extension!