🚀 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
Open the Extensions view in Visual Studio Code (Cmd+Shift+X or Ctrl+Shift+X).
Search for AngularKit and click Install.
Once installed, the extension is ready to use!
🚀 Usage
Right-click in any TypeScript or HTML file to open the context menu.
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.
