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-specific Tools

• 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.
• Angular Schematics
  • Allows you to launch Angular schematics (CLI commands) from files Explorer (right-click) or Command Palette.
• angular2-switcher
  • Remember to use Alt+o shortcut to switch between Component and the HTML Template.
• arrr
  • The extension provides refactoring tools for your Angular codebase.

Angular Code Snippets

• Angular Snippets (Version 11)

  • 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 10 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
    • t- (Test Snippets)
    • e- (Test Expect Snippets)
    • ng- (Angular Snippets)
    • fx- (Angular Flex Layout Snippets)
    • m- (Angular Material Design Snippets)
    • rx- (RxJS Snippets for both TypeScript and JavaScript)
    • sw- (Service Workers Snippets)
    • pwa- (Progressive Web Applications Snippets)
    • ngrx- (Angular NgRx Snippets)
    • ngxs- (Angular NGXS Snippets)

• Some notes about importing RxJS stuff

  • Try RxJS Explorer to learn more!
  • In RxJS 6+, there are only 2 kinds of pattern to import things.
    • 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

• Auto Import
• 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

• 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
  • This extension works using VS Code's built-in version of TypeScript and a local or global install of tslint. You do not need to configure the plugin in your tsconfig.json if you are using VS Code's version of TypeScript.
  • If you are using a workspace version of typescript, you must currently configure the TS Server plugin manually by following these instructions
• ESLint
  • TSLint's support for Angular CLI is discontinued and it already marking deprecated since Angular CLI 11.
  • You can follow this guideline for opt-in using the community driven ESLint builder.
• Gremlins tracker for Visual Studio Code
  • Reveals some characters that can be harmful because they are invisible or looking like legitimate ones. It could possibly cost you few hours to find out problems.

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.

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

• Peacock
  • Subtly change the workspace color of your workspace. Ideal when you have multiple VS Code instances and you want to quickly identify which is which.
• Angular Console
  • The user interface app for the Angular CLI.
• 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.
• Todo Tree
  • TODO Tree just did an amazing job for highlighting the TODO's in the source code.
  • It can aggregate all the TODO's in the project into sidebar.
  • All the colors can be customized. New comment tags can be customized as well.

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 Snippets (Version 9) & Angular 10 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout.

TypeScript snippets

• app.module.ts (Angular Module)
  • 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
  • ngDoBootstrap: generates ngDoBootstrap() method for AppModule
• app.module.ts (Angular Elements)
  • ng-import-element: imports createCustomElement and Injector for Angular Elements
  • ng-elements: create required Angular Elements boilerplate on AppModule
  • ng-import-LazyElementsModule: imports LazyElementsModule from @angular-extensions/elements
• main.ts
  • ng-bootstrapModule-NoopZone: Setting up NoopZone in main.ts
• polyfills.ts
  • ng-polyfills-zonejs-flags: Setting up Zone.js flags

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}"
• a-axLazyElement: Lazy load Angular Elements or any other web components / custom elements

NGINX snippets

• ng-nginx: NGINX configuration for Angular (nginx.conf)

Dockerfile snippets

• ng-dockerfile: Multi-stage build for Angular and Nginx Dockerfile
  • In this snippet, you can choose between ng build or npm run build -- command.

Enjoy!