Introducing Copilot for VS Code

Hanyu Xiao
Apr 17 · 2 min read

We are excited to announce our new extension Copilot for VS Code. It is the successor of the AngularDoc extension, but we have made significant improvements to the static code analyzer’s performance, and best of all, we now support React, Vue, and NestJS in addition to Angular!

To install Copilot extension in Visual Studio Code, launch the command palette (cmd-shift-p), select Install Extension and enter Copilot.

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 let you browse the NgRx/Redux/Vuex constructs such as stores, states, reducers, selectors, and effects, etc. They 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.


Copilot also provides a nice UI for the Angular 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.


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!

AngularDoc

Architectural analysis, visualization, code generation, and many more!

Hanyu Xiao

Written by

Founder of AngularDoc. A technologist who loves building developer tools. Husband and proud father of two beautiful children.

AngularDoc

Architectural analysis, visualization, code generation, and many more!