Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Angular Extension PackNew to Visual Studio Code? Get it now.

Angular Extension Pack

Will 保哥

|
195,918 installs
| (53) | 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-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.
  • Nx Console
    • This let you spend less time looking up command line arguments. Really useful!
  • angular2-switcher
    • Remember to use Alt+o shortcut to switch between Component and the HTML Template.

Angular Code Snippets

  • Angular Snippets (Version 13)

    • 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
  • Paste JSON as Code (Refresh)
    • 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.
  • Document This
    • Remember to hit Ctrl+Alt+D and again Ctrl+Alt+D (hit twice) to generates documentation.

Template Productivity

  • Enable VSCode built-in Linked Editing (Auto update tags) feature.

    "editor.linkedEditing": true
    
  • CSS Peek

    • Remember to hit F12 on the CSS class in HTML that will trigger Go To Definition command and preview CSS content.

Code Analysis

  • ESLint
    • TSLint's support for Angular CLI is discontinued and it already marking deprecated since Angular CLI 11.
    • You can follow this guideline for migrating an Angular CLI project from Codelyzer and TSLint to ESLint.
  • 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.

Workbench

  • EditorConfig for VS Code
    • You can right-click on any folder in the EXPLORER pane and choose Generate .editorconfig command.
  • 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.

Some other extensions you may need (Optional)

You need to install the following extensions manually.

  • Prettier - JavaScript formatter
    • The code formatting is a subjective preferences. Your choice matters. I choose Prettier!
    • 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
  • Live Share
    • Real-time collaborative development from the comfort of your favorite tools.
  • 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.
  • Output Colorizer
    • This colorize your messages in the Output/Debug/Extensions panel and all the *.log files.
  • 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.
  • Git Extension Pack
    • Popular Visual Studio Code extensions for Git version control
      • GitLens — Git supercharged
        • Setting: "gitlens.currentLine.enabled": false
      • Git Graph
      • gitignore
      • Open in GitHub, Bitbucket, Gitlab, VisualStudio.com !
      • GitHub Repositories
  • JavaScript Debugger
    • An extension for debugging Node.js programs and Chrome.
  • Wallaby.js
    • Integrated Continuous Testing Tool for JavaScript.
  • Quokka.js
    • Live Scratchpad for JavaScript.
  • NGINX Configuration Language Support
    • If you want to use ng-nginx snippet, you might want to install this extension for authoring nginx.conf file.
  • Material Icon Theme
  • VSCode simpler Icons with Angular

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 12) & 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!

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft