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.
-
- Let's highlight some of my favorite code snippets that works very well with Angular CLI:
- HTML Snippets
a-class
:[class]
bindinga-style
:[style]
bindinga-ngClass
:ngClass
a-ngStyle
:ngStyle
a-ngSwitch
:ngSwitch
a-select
:<select>
controla-ngFor
:*ngFor
a-ngForAsync
:*ngFor
with asynca-ngFor-trackBy
:*ngFor
with trackBya-ngIf
:*ngIf
a-ngIfElse
:*ngIf
withelse
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 modela-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 Observablea-http-interceptor
: Empty AngularHttpInterceptor
forHttpClient
a-http-interceptor-headers
: AngularHttpInterceptor
that sets headers forHttpClient
a-http-interceptor-logging
: AngularHttpInterceptor
that logs traffic forHttpClient
a-service-httpclient
: service withHttpClient
- Routes
a-route-path-404
: 404 route patha-route-path-lazy
: lazy route patha-route-path-default
: default route patha-route-path-with-children
: route path with childrena-route-path-eager
: eager route patha-route-path-lazy
: lazy route patha-router-events
: listen to one or more router eventsa-route-params-subscribe
: subscribe to route parameters
- Route Guards
a-guard-can-load
:CanLoad
guarda-guard-can-activate
:CanActivate
guarda-guard-can-activate-child
:CanActivateChild
guarda-guard-can-deactivate
:CanDeactivate
guard
- Misc
a-preload-strategy
: implements PreloadingStrategy classa-output-event
:@Output
event and emitter
- RxJS
- JavaScript snippets
ex-simple-server
: Node.js Express Server
- Dockerfile snippets
docker-angular-node-multi-stage
: Multi-stage Dockerfile for Node with Angular
- HTML Snippets
- Let's highlight some of my favorite code snippets that works very well with Angular CLI:
-
Angular 8 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)
- Setting:
-
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 everything that is a Type, Creation methods, Scheduler, Helper from
import { map } from 'rxjs/operators';
- all of the operators get imported from
rxjs/operators
!
- all of the operators get imported from
- JavaScript (ES6) code snippets
- Import and export
imp→
imports entire moduleimport fs from 'fs';
imn→
imports entire module without module nameimport 'animate.css'
ime→
imports everything as alias from the moduleimport * as localAlias from 'fs';
imd→
imports only a portion of the module using destructingimport { rename } from 'fs';
ima→
imports only a portion of the module as aliasimport { rename as localRename } from 'fs';
enf→
exports name functionexport const log = (parameter) => { console.log(parameter);};
edf→
exports default functionexport default (parameter) => { console.log(parameter);};
ecl→
exports default classexport default class Calculator { };
ece→
exports default class by extending a base oneexport default class Calculator extends BaseClass { };
- Class helpers
con→
adds default constructor in the classconstructor() {}
met→
creates a method inside a classadd() {}
pge→
creates a getter propertyget propertyName() {return value;}
pse→
creates a setter propertyset propertyName(value) {}
- Various methods
fre→
forEach loop in ES6 syntaxarray.forEach(currentItem => {})
fof→
for ... of loopfor(let item of object) {}
fin→
for ... in loopfor(let item in object) {}
anfn→
creates an anonymous function(params) => {}
nfn→
creates a named functionconst add = (params) => {}
sti→
set interval helper methodsetInterval(() => {});
sto→
set timeout helper methodsetTimeout(() => {});
prom→
creates a new Promisereturn new Promise((resolve, reject) => {});
thenCatch→
adds then and catch declaration to a promise.then((res) => {).catch((err) => {});
- Console methods
clg→
console logconsole.log(object)
cdi→
console dirconsole.dir
clt→
console tableconsole.table
- Import and export
- 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
- Some of the Toggle access modifier are awesome:
- 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.
- Remember to hit
- 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
, andJSON 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 againCtrl+Alt+D
(hit twice) to generates documentation.
- Remember to hit
- Latest TypeScript and Javascript Grammar
- Move TS - Move TypeScript files and update relative imports
-
- 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.
-
-
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" ],
-
-
- 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.
- Remember to hit
- 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
- 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
- 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.
- angular2-switcher
- Remember to use
Alt+o
shortcut to switch between Component and the HTML Template.
- Remember to use
- EditorConfig for VS Code
- There is a EditorConfig: Generate can generate
.editorconfig
on the fly.
- There is a EditorConfig: Generate can generate
- 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
- You have to enable this File Icon Theme manually.
- TODO Highlight
- The TODO Highlight Keywords can be customized, see the docs for the details.
- There are two main commands:
- Toggle highlight : turn on/off the highlight
- 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.)
- 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.
- Prettier use AST to parse your source code so you can safely enable
- Recommended reading: Setting up Prettier in an Angular CLI Project
- Setting:
- 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
- Setting:
- TypeScript Toolbox
- Setting:
"genGetSet.spacedImportLine": true
- Some features are broken.
- Setting:
- Output Colorizer
- This colorize your messages in the Output/Debug/Extensions panel and all the
*.log
files.
- This colorize your messages in the Output/Debug/Extensions panel and all the
- 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.
- 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
- English
- 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.
This extension contains supplementary code snippets to Angular v7 Snippets & Angular 7 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout.
ng-import-FormsModule
: importsFormsModule
from@angular/forms
ng-import-ReactiveFormsModule
: importsReactiveFormsModule
from@angular/forms
ng-import-HttpClientModule
: importsHttpClientModule
from@angular/common/http
ng-import-HttpClient
: importsHttpClient
from@angular/common/http
ng-import-createCustomElement
: importscreateCustomElement
from@angular/elements
ng-ctor-elements
: create required Angular Elements boilerplate on AppModule's constructorngDoBootstrap
: generatesngDoBootstrap()
method forAppModule
a-ngSubmit
: Angular Forms'sngSubmit
eventa-formArrayName
: AngularformArrayName
a-formGroupName
: AngularformGroupName
a-routerLinkActive
: AngularrouterLinkActive="active"
a-routerLinkActiveOptions
: Angular[routerLinkActiveOptions]="{exact: true}"
Enjoy!