Angular File Generator for VSCode

Are you tired of manually creating files for your Angular projects in Visual Studio Code? We have the solution for you! Introducing the Angular File Generator extension for VSCode.

demo

With this powerful extension, you can streamline your Angular development workflow by generating files with just a few clicks. Whether you need a new class, interface, module, or any other Angular component, our extension has you covered.

preview

Angular File Generator for VSCode

Requirements

VSCode 1.76.0 or later

Project Settings

Configure your project by creating or updating a settings.json file at the project's root. If you already have a .vscode/settings.json file, skip the first two steps.

Open the command palette in VSCode:
- CTRL + SHIFT + P (Windows)
- CMD + SHIFT + P (Mac OS)
Type Preferences: Open Workspace Settings (JSON).

In the .vscode/settings.json file, copy and paste the following settings:

{
  "angular.components.standalone": true,
  "angular.components.style": "css",
  "angular.files.include": [
    "ts"
  ],
  "angular.files.exclude": [
    "**/node_modules/**",
    "**/dist/**",
    "**/out/**",
    "**/build/**",
    "**/.*/**"
  ],
  "angular.files.watch": [
    "modules",
    "components",
    "services"
  ],
  "angular.files.showPath": true,
  "angular.submenu.customCommands": [
    {
      "name": "Template 1",
      "command": "ng g c",
      "args": "--style css --standalone true --inline-style --inline-template"
    },
    {
      "name": "Template 2",
      "command": "ng g c",
      "args": "--style scss --standalone false --inline-style --inline-template"
    }
  ],
  "angular.submenu.activateItem": {
    "terminal": {
      "component": true,
      "guard": true,
      "pipe": true,
      "service": true
    },
    "file": {
      "class": true,
      "component": true,
      "directive": true,
      "enum": true,
      "guard": true,
      "interceptor": true,
      "interface": true,
      "module": true,
      "pipe": true,
      "resolver": true,
      "service": true,
      "spec": true
    }
  }
}

Restart VS Code

Your project is now set up to automatically format code upon saving.

Features

Files

Title	Purpose
Angular: Generate Class	Creates a new, generic class definition
Angular: Generate Component File	Creates a new, generic component definition
Angular: Generate Directive	Creates a new, generic directive definition
Angular: Generate Enum	Generates a new, generic enum definition
Angular: Generate Guard	Generates a new, generic route guard definition
Angular: Generate Interceptor	Creates a new, generic interceptor definition
Angular: Generate Interface	Creates a new, generic interface definition
Angular: Generate Module	Creates a new, generic NgModule definition
Angular: Generate Pipe	Creates a new, generic pipe definition
Angular: Generate Resolver	Generates a new, generic resolver definition
Angular: Generate Service	Creates a new, generic service definition
Angular: Generate Test	Creates a new, generic test definition

Commands

Title	Purpose
Angular: Disable Analytics	Disables analytics gathering and reporting for the user
Angular: Enable Analytics	Enables analytics gathering and reporting for the user
Angular: Info Analytics	Prints analytics gathering and reporting configuration in the console
Angular: Prompt Analytics	Prompts the user to set the analytics gathering status interactively
Angular: Clean Cache	Deletes persistent disk cache from disk
Angular: Disable Cache	Disables persistent disk cache for all projects in the workspace
Angular: Enable Cache	Enables disk cache for all projects in the workspace
Angular: Info Cache	Prints persistent disk cache configuration and statistics in the console
Angular: Generate Component with CLI	Creates a new, generic component definition
Angular: Generate Guard with CLI	Creates a new, generic guard definition
Angular: Generate Pipe with CLI	Creates a new, generic pipe definition
Angular: Generate Service with CLI	Creates a new, service service definition
Angular: Generate Environments	Generates and configures environment files for a project
Angular: Generate Library	Creates a new, generic library project in the current workspace
Angular: Start Server	Builds and serves your application, rebuilding on file changes
Angular: Run Tests	Runs unit tests in a project
Angular: Run E2E	Builds and serves an Angular application, then runs end-to-end tests
Angular: Version	Outputs Angular CLI version

Snippets

Title	Purpose
ng_class_module	export class Module {}
ng_class_routing_module	export class RoutingModule {}
ng_const_routes	export const routes: Routes = []
ng_class_component	export class Component {}
ng_class_standalone_component	export class Component {}
ng_class_service	export class Service {}
ng_unsubscribe	private unsubscribe: Subscription[] = [];
ng_subscribe	this.unsubscribe.push(this.subscr);
ng_on_destroy	ngOnDestroy {}
ng_oninit	ngOnInit {}
ng_const_environment	export const environment = {}
ng_if	@if (condition) {}
ng_if_else	@if (condition) {} @else {}
ng_if_else_if	@if (condition) {} @else if (condition) {}
ng_else_if	@else if (condition) {}
ng_else	@else {}
ng_for	@for (condition) {}
ng_empty	@empty {}
ng_switch	@switch (condition) {}
ng_case	@case (condition) {}
ng_default	@default {}
ng-defer	@defer (condition) {}
ng-placeholder	@placeholder {}
ng-loading	@loading {}
ng_router_outlet	\\
ng_router_link	\\

Follow Me

If you enjoy using this extension, consider following me for updates on this and future projects:

VSXpert Template

This extension was created using VSXpert, a template that helps you create Visual Studio Code extensions with ease. VSXpert provides a simple and easy-to-use structure to get you started quickly.

Other Extensions

Contributing

Angular File Generator for VSCode is open-source software, and we welcome contributions from the community. If you'd like to contribute, please fork the GitHub repository and submit a pull request with your changes.

Before contributing, please read our Contribution Guidelines for instructions on coding standards, testing, and more.

Code of Conduct

We are committed to providing a friendly, safe, and welcoming environment for all, regardless of gender, sexual orientation, disability, ethnicity, religion, or similar personal characteristic. Please review our Code of Conduct before participating in our community.

Changelog

For a complete list of changes, see the CHANGELOG.md

Authors

Manuel Gil - Owner - ManuelGil

See also the list of contributors who participated in this project.

License

Angular File Generator for VSCode is licensed under the MIT License - see the MIT License for details.

ManuelGil / vscode-angular-generator

readme