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

• TSLint

Code Navigation

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

Collaboration

• EditorConfig for VS Code
  • There is a EditorConfig: Generate can generate .editorconfig on the fly.

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

• Prettier - JavaScript formatter
  • Setting: "prettier.singleQuote": true
    • We love single quote on strings. Isn't it?
  • Setting: "editor.formatOnSave": false
    • Prettier use AST to parse your source code so you can safely enable editor.formatOnSave setting.
  • Recommended reading: Setting up Prettier in an Angular CLI Project
• AngularDoc for Visual Studio Code
  • Sometimes it's buggy. Many of our projects are unable to produce documentation.
• Git Lens — git blame annotations, code lens, and more
  • It's too informative for me. I turn it off all the time.
• Bracket Pair Colorizer
  • I don't need this extension usually, but maybe someone needs it.
• angular2-inline
  • I don't use inline template at all. If you need it, you can install this extension. I don't like to mix HTML with TypeScript anyway.
• Angular Component Extension
  • Language support for inline-defined template and styles.
  • I don't use inline template at all. If you need it, you can install this extension.
• TypeScript Importer
  • Setting: "tsimporter.noStatusBar": true
• TypeScript Toolbox
  • Setting: "genGetSet.spacedImportLine": true
  • Some features are broken.
• Output Colorizer
  • This colorize your messages in the Output/Debug/Extensions panel and all the *.log files.
• Wallaby.js
  • Integrated Continuous Testing Tool for JavaScript.
• Quokka.js
  • Live Scratchpad for JavaScript.

Other manual setup (Optional)

• Recommended Editor Fonts Settings
  • English
    • "editor.fontFamily": "Fira Code, Consolas, 'Courier New', monospace"
      • Install FiraCode: Monospaced font with programming ligatures
      • The FiraCode provided a ligatures feature for your code which is pretty cool. You have to set "editor.fontLigatures": true to enabled it.
  • 繁體中文
    • "editor.fontLigatures": true
    • "editor.fontFamily": "Fira Code, 'Noto Sans CJK TC Medium', Consolas, 'Courier New', monospace"
    • Install Google Noto Fonts - Noto Sans CJK TC
    • Install FiraCode: Monospaced font with programming ligatures
  • 简体中文
    • "editor.fontLigatures": true
    • "editor.fontFamily": "Fira Code, 'Noto Sans CJK SC Medium', Consolas, 'Courier New', monospace"
    • Install Google Noto Fonts - Noto Sans CJK SC
    • Install FiraCode: Monospaced font with programming ligatures
• Recommended Settings
  • "editor.minimap.renderCharacters": false
    • Enhanced minimap performance by disabling render characters in minimap.
  • "emmet.showSuggestionsAsSnippets": true
    • Treat all emmet suggestion as snippets can make all suggestions get sorted alphabetically.

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!