{"id":18148791,"url":"https://github.com/doggy8088/angular-extension-pack","last_synced_at":"2026-02-24T12:01:24.877Z","repository":{"id":142280926,"uuid":"90768132","full_name":"doggy8088/angular-extension-pack","owner":"doggy8088","description":"Angular Extension Pack for Visual Studio Code","archived":false,"fork":false,"pushed_at":"2023-10-04T15:07:40.000Z","size":310,"stargazers_count":32,"open_issues_count":2,"forks_count":8,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-11-23T07:05:43.114Z","etag":null,"topics":["angular","vscode-extension"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=doggy8088.angular-extension-pack","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/doggy8088.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-05-09T16:30:50.000Z","updated_at":"2022-05-25T16:38:40.000Z","dependencies_parsed_at":"2023-10-04T19:52:57.774Z","dependency_job_id":null,"html_url":"https://github.com/doggy8088/angular-extension-pack","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/doggy8088/angular-extension-pack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doggy8088%2Fangular-extension-pack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doggy8088%2Fangular-extension-pack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doggy8088%2Fangular-extension-pack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doggy8088%2Fangular-extension-pack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doggy8088","download_url":"https://codeload.github.com/doggy8088/angular-extension-pack/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doggy8088%2Fangular-extension-pack/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29781207,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-24T10:45:18.109Z","status":"ssl_error","status_checked_at":"2026-02-24T10:45:09.911Z","response_time":75,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","vscode-extension"],"created_at":"2024-11-01T23:10:14.564Z","updated_at":"2026-02-24T12:01:24.842Z","avatar_url":"https://github.com/doggy8088.png","language":null,"readme":"# Angular Extension Pack\r\n\r\nThis extension pack packages some of the most popular (and some of my favorite) Angular extensions. If you like it, please leave your `Rating \u0026 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](https://github.com/doggy8088/angular-extension-pack/issues).\r\n\r\n## Extensions Included\r\n\r\n### Angular-specific Tools\r\n\r\n* [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)\r\n  * This a MUST extension for your Angular development.\r\n  * It provides a rich editing experience for Angular templates such as IntelliSense (Completions lists), Quick info, Go to definition ( `F12` ) and AOT Diagnostic messages.\r\n* [Angular Schematics](https://marketplace.visualstudio.com/items?itemName=cyrilletuzi.angular-schematics)\r\n  * Angular schematics (CLI commands) from files Explorer or Command Palette.\r\n* [angular2-switcher](https://marketplace.visualstudio.com/items?itemName=infinity1207.angular2-switcher)\r\n  * Remember to use `Alt+o` shortcut to switch between Component and the HTML Template.\r\n\r\n### Angular Code Snippets\r\n\r\n* [Angular Snippets (Version 16)](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2)\r\n\r\n  * Let's highlight some of my favorite code snippets that works very well with Angular CLI:\r\n    * HTML Snippets\r\n      * `a-class`: `[class]` binding\r\n      * `a-style`: `[style]` binding\r\n      * `a-ngClass`: `ngClass`\r\n      * `a-ngStyle`: `ngStyle`\r\n      * `a-ngSwitch`: `ngSwitch`\r\n      * `a-select`: `\u003cselect\u003e` control\r\n      * `a-ngFor`: `*ngFor`\r\n      * `a-ngForAsync`: `*ngFor` with async\r\n      * `a-ngFor-trackBy`: `*ngFor` with trackBy\r\n      * `a-ngIf`: `*ngIf`\r\n      * `a-ngIfElse`: `*ngIf` with `else`\r\n      * `a-ngModel`: `ngModel`\r\n      * `a-formControlName`: `formControlName`\r\n      * `a-formGroup`: `formGroup`\r\n      * `a-formGroupName`: `formGroupName`\r\n      * `a-routerLink`: `routerLink` (include routerLinkActive)\r\n      * `a-routerLink-param`: `routerLink` with a route parameter (include routerLinkActive)\r\n      * `a-prej`: show the JSON form of a model\r\n      * `a-preja`: show the JSON form of a model, using async\r\n    * TypeScript snippets\r\n      * RxJS\r\n        * `a-rxjs-import`: import RxJs features (e.g. Observable, of, Subject)\r\n        * `a-rxjs-operator`: import RxJs opertors (e.g. map, tap, catchError)\r\n        * `a-pipe`: pipe\r\n      * HttpClient\r\n        * `a-httpclient-get`: `httpClient.get` with Rx Observable\r\n        * `a-http-interceptor`: Empty Angular `HttpInterceptor` for `HttpClient`\r\n        * `a-http-interceptor-headers`: Angular `HttpInterceptor` that sets headers for `HttpClient`\r\n        * `a-http-interceptor-logging`: Angular `HttpInterceptor` that logs traffic for `HttpClient`\r\n        * `a-service-httpclient`: service with `HttpClient`\r\n      * Routes\r\n        * `a-route-path-404`: 404 route path\r\n        * `a-route-path-lazy`: lazy route path\r\n        * `a-route-path-default`: default route path\r\n        * `a-route-path-with-children`: route path with children\r\n        * `a-route-path-eager`: eager route path\r\n        * `a-route-path-lazy`: lazy route path\r\n        * `a-router-events`: listen to one or more router events\r\n        * `a-route-params-subscribe`: subscribe to route parameters\r\n      * Route Guards\r\n        * `a-guard-can-load`: `CanLoad` guard\r\n        * `a-guard-can-activate`: `CanActivate` guard\r\n        * `a-guard-can-activate-child`: `CanActivateChild` guard\r\n        * `a-guard-can-deactivate`: `CanDeactivate` guard\r\n      * Misc\r\n        * `a-preload-strategy`: implements PreloadingStrategy class\r\n        * `a-output-event`: `@Output` event and emitter\r\n    * JavaScript snippets\r\n      * `ex-simple-server`: Node.js Express Server\r\n    * Dockerfile snippets\r\n      * `docker-angular-node-multi-stage`: Multi-stage Dockerfile for Node with Angular\r\n\r\n* [Angular 10 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS \u0026 Flex Layout](https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode)\r\n\r\n  * Setting: `\"editor.snippetSuggestions\": \"top\"`\r\n    * Let default/user/extension snippets are on top of your suggestion list.\r\n  * Snippet Prefixes\r\n    * `t-`    (Test Snippets)\r\n    * `e-`    (Test Expect Snippets)\r\n    * `ng-`   (Angular Snippets)\r\n    * `fx-`   (Angular Flex Layout Snippets)\r\n    * `m-`    (Angular Material Design Snippets)\r\n    * `rx-`   (RxJS Snippets for both TypeScript and JavaScript)\r\n    * `sw-`   (Service Workers Snippets)\r\n    * `pwa-`  (Progressive Web Applications Snippets)\r\n    * `ngrx-` (Angular NgRx Snippets)\r\n    * `ngxs-` (Angular NGXS Snippets)\r\n\r\n* Some notes about importing RxJS stuff\r\n\r\n  * Try [RxJS Explorer](http://reactive.how/rxjs/explorer) to learn more!\r\n  * In RxJS 6+, there are only 2 kinds of pattern to import things.\r\n    * `import { Observable } from 'rxjs';`\r\n      * import everything that is a **Type**, **Creation methods**, **Scheduler**, **Helper** from `rxjs`!\r\n    * `import { map } from 'rxjs/operators';`\r\n      * all of the **operators** get imported from `rxjs/operators`!\r\n\r\n### TypeScript Productivity\r\n\r\n* [Auto Import](https://marketplace.visualstudio.com/items?itemName=steoates.autoimport)\r\n* [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)\r\n  * Import and export\r\n    * `imp→` imports entire module `import fs from 'fs';`\r\n    * `imn→` imports entire module without module name `import 'animate.css'`\r\n    * `ime→` imports everything as alias from the module `import * as localAlias from 'fs';`\r\n    * `imd→` imports only a portion of the module using destructing `import { rename } from 'fs';`\r\n    * `ima→` imports only a portion of the module as alias `import { rename as localRename } from 'fs';`\r\n    * `enf→` exports name function `export const log = (parameter) =\u003e { console.log(parameter);};`\r\n    * `edf→` exports default function `export default (parameter) =\u003e { console.log(parameter);};`\r\n    * `ecl→` exports default class `export default class Calculator { };`\r\n    * `ece→` exports default class by extending a base one `export default class Calculator extends BaseClass { };`\r\n  * Class helpers\r\n    * `con→` adds default constructor in the class `constructor() {}`\r\n    * `met→` creates a method inside a class `add() {}`\r\n    * `pge→` creates a getter property `get propertyName() {return value;}`\r\n    * `pse→` creates a setter property `set propertyName(value) {}`\r\n  * Various methods\r\n    * `fre→` forEach loop in ES6 syntax `array.forEach(currentItem =\u003e {})`\r\n    * `fof→` for ... of loop `for(let item of object) {}`\r\n    * `fin→` for ... in loop `for(let item in object) {}`\r\n    * `anfn→` creates an anonymous function `(params) =\u003e {}`\r\n    * `nfn→` creates a named function `const add = (params) =\u003e {}`\r\n    * `sti→` set interval helper method `setInterval(() =\u003e {});`\r\n    * `sto→` set timeout helper method `setTimeout(() =\u003e {});`\r\n    * `prom→` creates a new Promise `return new Promise((resolve, reject) =\u003e {});`\r\n    * `thenCatch→` adds then and catch declaration to a promise `.then((res) =\u003e {).catch((err) =\u003e {});`\r\n  * Console methods\r\n    * `clg→` console log `console.log(object)`\r\n    * `cdi→` console dir `console.dir`\r\n    * `clt→` console table `console.table`\r\n* [refactorix](https://marketplace.visualstudio.com/items?itemName=krizzdewizz.refactorix)\r\n  * Some of the **Toggle access modifier** are awesome:\r\n    * `x: Add semicolons` ( There is so convenient shortcut: `Ctrl+;` )\r\n    * `x: Remove semicolons` ( There is so convenient shortcut: `Ctrl+Shift+;` )\r\n    * `x: Property to getter/setter`\r\n    * `x: Arrow function all single statement blocks to expression`\r\n* [Paste JSON as Code (Refresh)](https://marketplace.visualstudio.com/items?itemName=doggy8088.quicktype-refresh)\r\n  * `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](http://blog.quicktype.io/first-look/).\r\n  * It supports `C#`, `Go`, `C++`, `Java`, `TypeScript`, `Swift`, `Elm`, and `JSON Schema`.  I have to say THIS IS AWESOME! Just try it.\r\n* [Document This](https://marketplace.visualstudio.com/items?itemName=oouo-diogo-perdigao.docthis)\r\n  * Remember to hit `Ctrl+Alt+D` and hit `Ctrl+Alt+D` again (hit twice) to generates documentation.\r\n\r\n### Template Productivity\r\n\r\n* Enable VSCode built-in **Linked Editing** ([Auto update tags](https://code.visualstudio.com/Docs/languages/html#_auto-update-tags)) feature.\r\n\r\n    ```json\r\n    \"editor.linkedEditing\": true\r\n    ```\r\n\r\n### Code Analysis\r\n\r\n* [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)\r\n  * Integrates [ESLint](http://eslint.org/) JavaScript into VS Code. If you are new to ESLint check the [documentation](http://eslint.org/).\r\n* [Gremlins tracker for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=nhoizey.gremlins)\r\n  * 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.\r\n\r\n### Workbench\r\n\r\n* [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)\r\n  * You can right-click on any folder in the **EXPLORER** pane and choose **Generate .editorconfig** command.\r\n* [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)\r\n  * TODO Tree just did an amazing job for highlighting the TODO's in the source code.\r\n  * It can aggregate all the TODO's in the project into sidebar.\r\n  * All the colors can be customized. New comment tags can be customized as well.\r\n\r\n### Some other extensions you may need (Optional)\r\n\r\n\u003e You need to install the following extensions manually.\r\n\r\n* [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)\r\n  * The code formatting is a subjective preferences. Your choice matters. I choose [Prettier](https://prettier.io/)!\r\n  * Setting: `\"prettier.singleQuote\": true`\r\n    * We love single quote on strings. Isn't it?\r\n  * Setting: `\"editor.formatOnSave\": false`\r\n    * Prettier use AST to parse your source code so you can safely enable `editor.formatOnSave` setting.\r\n  * Recommended reading: [Setting up Prettier in an Angular CLI Project](https://medium.com/@victormejia/setting-up-prettier-in-an-angular-cli-project-2f50c3b9a537)\r\n* [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)\r\n  * Real-time collaborative development from the comfort of your favorite tools.\r\n* [Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock)\r\n  * 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.\r\n* [Output Colorizer](https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer)\r\n  * This colorize your messages in the **Output**/**Debug**/**Extensions** panel and all the `*.log` files.\r\n* [angular2-inline](https://marketplace.visualstudio.com/items?itemName=natewallace.angular2-inline)\r\n  * 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.\r\n* [Git Extension Pack](https://marketplace.visualstudio.com/items?itemName=doggy8088.git-extension-pack)\r\n  * Popular Visual Studio Code extensions for Git version control\r\n    * [GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)\r\n      * Setting: `\"gitlens.currentLine.enabled\": false`\r\n    * [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)\r\n    * [gitignore](https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore)\r\n    * [Open in GitHub, Bitbucket, Gitlab, VisualStudio.com !](https://marketplace.visualstudio.com/items?itemName=ziyasal.vscode-open-in-github)\r\n    * [GitHub Repositories](https://marketplace.visualstudio.com/items?itemName=GitHub.remotehub)\r\n* [JavaScript Debugger](https://marketplace.visualstudio.com/items?itemName=ms-vscode.js-debug)\r\n  * An extension for debugging Node.js programs and Chrome.\r\n* [Wallaby.js](https://marketplace.visualstudio.com/items?itemName=WallabyJs.wallaby-vscode)\r\n  * Integrated Continuous Testing Tool for JavaScript.\r\n* [Quokka.js](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)\r\n  * Live Scratchpad for JavaScript.\r\n* [NGINX Configuration Language Support](https://marketplace.visualstudio.com/items?itemName=ahmadalli.vscode-nginx-conf)\r\n  * If you want to use `ng-nginx` snippet, you might want to install this extension for authoring `nginx.conf` file.\r\n* [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)\r\n* [VSCode simpler Icons with Angular](https://marketplace.visualstudio.com/items?itemName=davidbabel.vscode-simpler-icons)\r\n* [Nx Console](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console)\r\n  * This let you spend less time looking up command line arguments. Really useful!\r\n* [SCSS Formatter](https://marketplace.visualstudio.com/items?itemName=sibiraj-s.vscode-scss-formatter)\r\n* [SCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss)\r\n\r\n### Other manual setup (Optional)\r\n\r\n* Recommended Editor Fonts Settings\r\n  * English\r\n    * `\"editor.fontFamily\": \"Fira Code, Consolas, 'Courier New', monospace\"`\r\n      * Install [FiraCode: Monospaced font with programming ligatures](https://github.com/tonsky/FiraCode)\r\n      * The [FiraCode](https://github.com/tonsky/FiraCode) provided a ligatures feature for your code which is pretty cool. You have to set `\"editor.fontLigatures\": true` to enabled it.\r\n  * 繁體中文\r\n    * `\"editor.fontLigatures\": true`\r\n    * `\"editor.fontFamily\": \"Fira Code, 'Noto Sans CJK TC Medium', Consolas, 'Courier New', monospace\"`\r\n    * Install [Google Noto Fonts - Noto Sans CJK TC](https://www.google.com/get/noto/#sans-hant)\r\n    * Install [FiraCode: Monospaced font with programming ligatures](https://github.com/tonsky/FiraCode)\r\n  * 简体中文\r\n    * `\"editor.fontLigatures\": true`\r\n    * `\"editor.fontFamily\": \"Fira Code, 'Noto Sans CJK SC Medium', Consolas, 'Courier New', monospace\"`\r\n    * Install [Google Noto Fonts - Noto Sans CJK SC](https://www.google.com/get/noto/#sans-hans)\r\n    * Install [FiraCode: Monospaced font with programming ligatures](https://github.com/tonsky/FiraCode)\r\n* Recommended Settings\r\n  * `\"editor.minimap.renderCharacters\": false`\r\n    * Enhanced minimap performance by disabling render characters in minimap.\r\n  * `\"emmet.showSuggestionsAsSnippets\": true`\r\n    * Treat all emmet suggestion as snippets can make all suggestions get sorted alphabetically.\r\n\r\n## Snippets Included\r\n\r\nThis extension contains supplementary code snippets to [Angular Snippets (Version 12)](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2) \u0026 [Angular 10 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS \u0026 Flex Layout](https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode).\r\n\r\n### TypeScript snippets\r\n\r\n* main.ts (Standalone component)\r\n  * `ng-import-provideHttpClient`: imports `provideHttpClient` from `@angular/common/http`\r\n* main.ts\r\n  * `ng-bootstrapModule-NoopZone`: Setting up [NoopZone](https://angular.io/guide/zone#noopzone) in `main.ts`\r\n* polyfills.ts\r\n  * `ng-polyfills-zonejs-flags`: Setting up [Zone.js](https://angular.io/guide/zone) flags\r\n* app.module.ts (Angular Module)\r\n  * `ng-import-FormsModule`: imports `FormsModule` from `@angular/forms`\r\n  * `ng-import-ReactiveFormsModule`: imports `ReactiveFormsModule` from `@angular/forms`\r\n  * `ng-import-HttpClientModule`: imports `HttpClientModule` from `@angular/common/http`\r\n  * `ngDoBootstrap`: generates `ngDoBootstrap()` method for `AppModule`\r\n* app.module.ts (Angular Elements)\r\n  * `ng-import-element`: imports `createCustomElement` and `Injector` for Angular Elements\r\n  * `ng-elements`: create required Angular Elements boilerplate on AppModule\r\n  * `ng-import-LazyElementsModule`: imports `LazyElementsModule` from `@angular-extensions/elements`\r\n\r\n### HTML snippets\r\n\r\n* `a-ngSubmit`: Angular Forms's `ngSubmit` event\r\n* `a-formArrayName`: Angular `formArrayName`\r\n* `a-formGroupName`: Angular `formGroupName`\r\n* `a-routerLinkActive`: Angular `routerLinkActive=\"active\"`\r\n* `a-routerLinkActiveOptions`: Angular `[routerLinkActiveOptions]=\"{exact: true}\"`\r\n* `a-axLazyElement`: Lazy load **Angular Elements** or **any other web components** / **custom elements**\r\n\r\n### NGINX snippets\r\n\r\n* `ng-nginx`: NGINX configuration for Angular (`nginx.conf`)\r\n\r\n### Dockerfile snippets\r\n\r\n* `ng-dockerfile`: Multi-stage build for Angular and Nginx Dockerfile\r\n  * In this snippet, you can choose between `ng build` or `npm run build --` command.\r\n\r\n**Enjoy!**\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoggy8088%2Fangular-extension-pack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoggy8088%2Fangular-extension-pack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoggy8088%2Fangular-extension-pack/lists"}