Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>AngularKitNew to Visual Studio Code? Get it now.
AngularKit

AngularKit

Alvin Bellero

|
5 installs
| (0) | Free
| Sponsor
A collection of productivity tools built exclusively for Angular development
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

AngularKit — VSCode Extension

🚀 Supercharge your Angular development with a collection of easy-access productivity tools!

✨ Features

  • ⚡ Scaffold new Angular components with a guided UI
  • 📝 Create a component from selected HTML in any file
  • 🏷️ Instantly insert @Input and @Output decorators (with import management)
  • 🔄 One-click insertion of Angular lifecycle hooks (with implements and import management)
  • 🔧 Smart dependency injection with constructor and @inject() support
  • 🧠 Smart context menu organization for Components, Decorators, Lifecycle Hooks, and Services
  • 🧪 Comprehensive test coverage with Jest

📥 Installation

  1. Open the Extensions view in Visual Studio Code (Cmd+Shift+X or Ctrl+Shift+X).
  2. Search for AngularKit and click Install.
  3. Once installed, the extension is ready to use!

🚀 Usage

  1. Right-click in any TypeScript or HTML file to open the context menu.
  2. Under AngularKit, you'll find:
    • Components: Scaffold a new component or create one from selected HTML.
    • Decorators: Insert @Input or @Output decorators.
    • Lifecycle Hooks: Insert any Angular lifecycle hook method, with correct imports and implements.
    • Services: Inject services using constructor or @inject() dependency injection.

💡 Examples

Component Creation

  • Scaffold New Component:
    Quickly create a new Angular component with your preferred options (CSS type, inline/external template, change detection, standalone, etc.).
  • Create Component from HTML:
    Select HTML in any file, right-click, and instantly generate a component with that template.

Decorators & Lifecycle Hooks

  • Insert Decorators:
    Add @Input or @Output properties to your component class, with imports automatically managed.
  • Insert Lifecycle Hooks:
    Add methods like ngOnInit, ngOnDestroy, ngOnChanges, etc., with correct interface and import handling.

Dependency Injection

  • Constructor Injection:
    Inject services via constructor parameters with automatic import management.
  • @inject() Injection:
    Use the modern @inject() function for dependency injection with proper import handling.

Example Service Injection:

// Before
export class MyComponent {
  constructor() {}
}

// After using @inject()
export class MyComponent {
  private userService = inject(UserService);
  constructor() {}
}

Testing

The extension uses Jest for testing. Tests are located in src/test/.

To run tests:

npm test

Building

npm run compile    # Compile the extension
npm run watch      # Watch mode for development
npm run lint       # Run ESLint

📜 License

This project is licensed under the MIT License. See the LICENSE file for more details.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft