Angular Extension Pack

Will 保哥

|
65,677 installs
|
272,894 downloads
| (40) | Free
Popular Visual Studio Code extensions for Angular Development
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Angular Extension Pack

This extension pack packages some of the most popular (and some of my favorite) Angular extensions. If you like it, please leave your Rating & Review and share with your friends. If you know any extension that is good for Angular development, just let me know by creating an issue.

Extensions Included

Angular Code Snippets

  • Angular v7 Snippets

    • Let's highlight some of my favorite code snippets that works very well with Angular CLI:
      • HTML Snippets
        • a-class: [class] binding
        • a-style: [style] binding
        • a-ngClass: ngClass
        • a-ngStyle: ngStyle
        • a-ngSwitch: ngSwitch
        • a-select: <select> control
        • a-ngFor: *ngFor
        • a-ngForAsync: *ngFor with async
        • a-ngFor-trackBy: *ngFor with trackBy
        • a-ngIf: *ngIf
        • a-ngIfElse: *ngIf with else
        • a-ngModel: ngModel
        • a-formControlName: formControlName
        • a-formGroup: formGroup
        • a-formGroupName: formGroupName
        • a-routerLink: routerLink (include routerLinkActive)
        • a-routerLink-param: routerLink with a route parameter (include routerLinkActive)
        • a-prej: show the JSON form of a model
        • a-preja: show the JSON form of a model, using async
      • TypeScript snippets
        • RxJS
          • a-rxjs-import: import RxJs features (e.g. Observable, of, Subject)
          • a-rxjs-operator: import RxJs opertors (e.g. map, tap, catchError)
          • a-pipe: pipe
        • HttpClient
          • a-httpclient-get: httpClient.get with Rx Observable
          • a-http-interceptor: Empty Angular HttpInterceptor for HttpClient
          • a-http-interceptor-headers: Angular HttpInterceptor that sets headers for HttpClient
          • a-http-interceptor-logging: Angular HttpInterceptor that logs traffic for HttpClient
          • a-service-httpclient: service with HttpClient
        • Routes
          • a-route-path-404: 404 route path
          • a-route-path-lazy: lazy route path
          • a-route-path-default: default route path
          • a-route-path-with-children: route path with children
          • a-route-path-eager: eager route path
          • a-route-path-lazy: lazy route path
          • a-router-events: listen to one or more router events
          • a-route-params-subscribe: subscribe to route parameters
        • Route Guards
          • a-guard-can-load: CanLoad guard
          • a-guard-can-activate: CanActivate guard
          • a-guard-can-activate-child: CanActivateChild guard
          • a-guard-can-deactivate: CanDeactivate guard
        • Misc
          • a-preload-strategy: implements PreloadingStrategy class
          • a-output-event: @Output event and emitter
      • JavaScript snippets
        • ex-simple-server: Node.js Express Server
      • Dockerfile snippets
        • docker-angular-node-multi-stage: Multi-stage Dockerfile for Node with Angular

  • Angular 7 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout

    • Setting: "editor.snippetSuggestions": "top"
      • Let default/user/extension snippets are on top of your suggestion list.
    • Snippet Prefixes | Prefix | Description | | ------- | ------------------------------------------------ | | ng- | Angular Snippets | | fx- | Angular Flex Layout Snippets | | ngrx- | Angular NgRx Snippets | | ngxs- | Angular NGXS Snippets | | m- | Angular Material Design Snippets | | rx- | RxJS Snippets for both TypeScript and JavaScript | | sw- | Service Workers Snippets | | t- | Test Snippets | | e- | Test Expect Snippets | | pwa- | Progressive Web Applications Snippets |

  • Some notes about importing RxJS stuff

    • Try RxJS Explorer to learn more!
    • There are many ways to import RxJS stuff and it's really confusing. This is fixed on RxJS 6. Thanks @BenLesh.
      • Operators
        • import { map } from 'rxjs/operators';
        • import { map } from 'rxjs/operator';
        • import 'rxjs/add/operator/map';
        • import { operators: { map } } from 'rxjs/Rx';
        • import * as Rx from 'rxjs';
        • import * as Rx from 'rxjs/Rx';
      • Observables
        • import { Observable } from 'rxjs/Observable;
        • import { Observable } from 'rxjs/Rx';
        • import { Observable } from 'rxjs';
      • More ways to import
        • import { fromEvent } from 'rxjs/observable/fromEvent';
        • import 'rxjs/add/observable/fromEvent';
        • import { Observable } from 'rxjs'; // adds fromEvent
        • import { FromEventObservable } from 'rxjs/observable/FromEventObservable';
      • Also, imports could get really long
        • import { Observable } from 'rxjs/Observable';
        • import { fromEvent } from 'rxjs/observable/fromEvent';
        • import { of } from 'rxjs/observable/of';
        • import { map } from 'rxjs/operators/map';
        • import { filter } from 'rxjs/operators/filter';
        • import { takeUntil } from 'rxjs/operators/takeUntil;
        • import { mergeMap } from 'rxjs/operators/mergeMap';
        • import { pipe } from 'rxjs/utils/pipe';
        • import { async } from 'rxjs/scheduler/async';
      • In RxJS 5.5 is got a little better
        • import { Observable } from 'rxjs/Observable';
        • import { fromEvent } from 'rxjs/observable/fromEvent';
        • import { of } from 'rxjs/observable/of';
        • import { map, filter, takeUntil, mergeMap } from 'rxjs/operators';
        • import { pipe } from 'rxjs/utils/pipe';
        • import { async } from 'rxjs/scheduler/async';
      • In RxJS 6+ is got MUCH better
        • import { Observable } from 'rxjs'; - import everything that is a Type, Creation methods, Scheduler, Helper from rxjs!
        • import { map } from 'rxjs/operators'; - all of the operators get imported from rxjs/operators!

TypeScript Productivity

  • JavaScript (ES6) code snippets
    • Import and export
      • imp→ imports entire module import fs from 'fs';
      • imn→ imports entire module without module name import 'animate.css'
      • ime→ imports everything as alias from the module import * as localAlias from 'fs';
      • imd→ imports only a portion of the module using destructing import { rename } from 'fs';
      • ima→ imports only a portion of the module as alias import { rename as localRename } from 'fs';
      • enf→ exports name function export const log = (parameter) => { console.log(parameter);};
      • edf→ exports default function export default (parameter) => { console.log(parameter);};
      • ecl→ exports default class export default class Calculator { };
      • ece→ exports default class by extending a base one export default class Calculator extends BaseClass { };
    • Class helpers
      • con→ adds default constructor in the class constructor() {}
      • met→ creates a method inside a class add() {}
      • pge→ creates a getter property get propertyName() {return value;}
      • pse→ creates a setter property set propertyName(value) {}
    • Various methods
      • fre→ forEach loop in ES6 syntax array.forEach(currentItem => {})
      • fof→ for ... of loop for(let item of object) {}
      • fin→ for ... in loop for(let item in object) {}
      • anfn→ creates an anonymous function (params) => {}
      • nfn→ creates a named function const add = (params) => {}
      • sti→ set interval helper method setInterval(() => {});
      • sto→ set timeout helper method setTimeout(() => {});
      • prom→ creates a new Promise return new Promise((resolve, reject) => {});
      • thenCatch→ adds then and catch declaration to a promise .then((res) => {).catch((err) => {});
    • Console methods
      • clg→ console log console.log(object)
      • cdi→ console dir console.dir
      • clt→ console table console.table
  • refactorix
    • Some of the Toggle access modifier are awesome:
      • x: Add semicolons ( There is so convenient shortcut: Ctrl+; )
      • x: Remove semicolons ( There is so convenient shortcut: Ctrl+Shift+; )
      • x: Property to getter/setter
      • x: Arrow function all single statement blocks to expression
  • JSON to TS
    • Remember to hit Ctrl+Alt+V to convert JSON from clipboard.
    • Remember to hit Ctrl+Alt+S to convert JSON from selection.
  • Paste JSON as Code
    • quicktype infers types from sample JSON data, then outputs strongly typed models and serializers for working with that data in your desired programming language. For more explanation, read A first look at quicktype.
    • It supports C#, Go, C++, Java, TypeScript, Swift, Elm, and JSON Schema. I have to say THIS IS AWESOME! Just try it.
    • For simple JSON document, I still using JSON to TS. If the JSON document are more complex, Paste JSON as Code is the best choice.
  • Document This
    • Remember to hit Ctrl+Alt+D and again Ctrl+Alt+D (hit twice) to generates documentation.
  • Latest TypeScript and Javascript Grammar
  • Move TS - Move TypeScript files and update relative imports

Template Productivity

  • Angular Language Service
    • This a MUST extension for your Angular development.
    • It provides a rich editing experience for Angular templates such as IntelliSense (Completions lists), Quick info, Go to definition ( F12 ) and AOT Diagnostic messages.
  • Auto Rename Tag
    • This might break something in the JS/TS file. So I prefer to turn on html and xml only. 
      "auto-rename-tag.activationOnLanguage": [
  "html",
  "xml"
],
  • CSS Peek
    • Remember to hit F12 that Go To css file and open in a new editor.
    • Remember to hit Ctrl to show the definition when hovering over the symbol.

Code Analysis

Code Navigation

  • angular2-switcher
    • Remember to use Alt+o shortcut to switch between Component and the HTML Template.

Collaboration

Workbench

  • VSCode simpler Icons with Angular
    • You have to enable this File Icon Theme manually.
      • Windows: File → Preferences → File Icon Theme → VSCode Great Icons
      • OSX: Code → Preferences → File Icon Theme → VSCode Great Icons
  • TODO Highlight
    • The TODO Highlight Keywords can be customized, see the docs for the details.
    • There are two main commands:
      1. Toggle highlight : turn on/off the highlight
      2. List hilighted annotations : list annotations and reveal from corresponding file
  • Git History
    • This helps you view and search git log along with the graph and details. Awesome!
    • It also support Compare, Cherry pick, Revert, Create branches from a commits actions.
  • Angular Schematics
    • Allows you to launch Angular schematics (CLI commands) from files Explorer (right-click) or Command Palette.

Some other extensions you may need (Optional) (You need to install the following extensions manually.)

Other manual setup (Optional)

Snippets Included

This extension contains supplementary code snippets to Angular v7 Snippets & Angular 7 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout.

TypeScript snippets

  • ng-import-FormsModule: imports FormsModule from @angular/forms
  • ng-import-ReactiveFormsModule: imports ReactiveFormsModule from @angular/forms
  • ng-import-HttpClientModule: imports HttpClientModule from @angular/common/http
  • ng-import-HttpClient: imports HttpClient from @angular/common/http
  • ng-import-createCustomElement: imports createCustomElement from @angular/elements
  • ng-ctor-elements: create required Angular Elements boilerplate on AppModule's constructor
  • ngDoBootstrap: generates ngDoBootstrap() method for AppModule

HTML snippets

  • a-ngSubmit: Angular Forms's ngSubmit event
  • a-formArrayName: Angular formArrayName
  • a-formGroupName: Angular formGroupName
  • a-routerLinkActive: Angular routerLinkActive="active"
  • a-routerLinkActiveOptions: Angular [routerLinkActiveOptions]="{exact: true}"

Enjoy!