{"id":21101266,"url":"https://github.com/manuelgil/vscode-angular-generator","last_synced_at":"2025-05-16T18:34:26.194Z","repository":{"id":211473614,"uuid":"728966043","full_name":"ManuelGil/vscode-angular-generator","owner":"ManuelGil","description":"Angular File Generator is a Visual Studio Code extension that allows you to generate Angular files with a few clicks. It is based on the Angular CLI and uses the same schematics as the CLI. It also allows you to generate files from the terminal.","archived":false,"fork":false,"pushed_at":"2024-11-08T03:21:08.000Z","size":8050,"stargazers_count":4,"open_issues_count":3,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-08T04:22:46.007Z","etag":null,"topics":["angular","angular-cli","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-angular-generator","language":"TypeScript","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/ManuelGil.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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},"funding":{"github":["ManuelGil"],"ko_fi":"ManuelGil","custom":["https://paypal.me/ManuelFGil","https://www.buymeacoffee.com/ManuelGil"]}},"created_at":"2023-12-08T05:03:54.000Z","updated_at":"2024-11-08T03:20:48.000Z","dependencies_parsed_at":"2023-12-13T02:29:07.930Z","dependency_job_id":"e50550ea-c45b-49c9-8c29-9f9b44db291b","html_url":"https://github.com/ManuelGil/vscode-angular-generator","commit_stats":null,"previous_names":["manuelgil/vscode-angular-generator"],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ManuelGil%2Fvscode-angular-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ManuelGil%2Fvscode-angular-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ManuelGil%2Fvscode-angular-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ManuelGil%2Fvscode-angular-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ManuelGil","download_url":"https://codeload.github.com/ManuelGil/vscode-angular-generator/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225444759,"owners_count":17475353,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","angular-cli","vscode","vscode-extension"],"created_at":"2024-11-19T23:43:58.075Z","updated_at":"2025-05-16T18:34:26.174Z","avatar_url":"https://github.com/ManuelGil.png","language":"TypeScript","readme":"# Angular File Generator for VSCode\n\n[![Visual Studio Marketplace Version](https://img.shields.io/visual-studio-marketplace/v/imgildev.vscode-angular-generator?style=for-the-badge\u0026label=VS%20Marketplace\u0026logo=visual-studio-code)](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-angular-generator)\n[![Visual Studio Marketplace Installs](https://img.shields.io/visual-studio-marketplace/i/imgildev.vscode-angular-generator?style=for-the-badge\u0026logo=visual-studio-code)](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-angular-generator)\n[![Visual Studio Marketplace Downloads](https://img.shields.io/visual-studio-marketplace/d/imgildev.vscode-angular-generator?style=for-the-badge\u0026logo=visual-studio-code)](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-angular-generator)\n[![Visual Studio Marketplace Rating](https://img.shields.io/visual-studio-marketplace/r/imgildev.vscode-angular-generator?style=for-the-badge\u0026logo=visual-studio-code)](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-angular-generator\u0026ssr=false#review-details)\n[![GitHub Repo stars](https://img.shields.io/github/stars/ManuelGil/vscode-angular-generator?style=for-the-badge\u0026logo=github)](https://github.com/ManuelGil/vscode-angular-generator)\n[![GitHub license](https://img.shields.io/github/license/ManuelGil/vscode-angular-generator?style=for-the-badge\u0026logo=github)](https://github.com/ManuelGil/vscode-angular-generator/blob/main/LICENSE)\n\nAre 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.\n\n![demo](https://raw.githubusercontent.com/ManuelGil/vscode-angular-generator/main/docs/images/demo.gif)\n\nWith 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.\n\n![preview](https://raw.githubusercontent.com/ManuelGil/vscode-angular-generator/main/docs/images/preview.png)\n\n## Table of Contents\n\n- [Angular File Generator for VSCode](#angular-file-generator-for-vscode)\n  - [Table of Contents](#table-of-contents)\n  - [Requirements](#requirements)\n  - [Project Settings](#project-settings)\n  - [Settings Options](#settings-options)\n  - [Features](#features)\n    - [Files](#files)\n    - [Commands](#commands)\n    - [Snippets](#snippets)\n  - [Follow Me](#follow-me)\n  - [VSXpert Template](#vsxpert-template)\n  - [Other Extensions](#other-extensions)\n  - [Contributing](#contributing)\n  - [Code of Conduct](#code-of-conduct)\n  - [Changelog](#changelog)\n  - [Authors](#authors)\n  - [License](#license)\n\n## Requirements\n\n- VSCode 1.88.0 or later\n\n## Project Settings\n\nConfigure 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.\n\n1. Open the command palette in VSCode:\n   - `CTRL + SHIFT + P` (Windows)\n   - `CMD + SHIFT + P` (Mac OS)\n\n2. Type `Preferences: Open Workspace Settings (JSON)`.\n\n3. In the `.vscode/settings.json` file, copy and paste the following settings:\n\n    ```jsonc\n    {\n      \"angular.enable\": true, // Enable or disable the extension\n      \"angular.components.standalone\": true, // Standalone option when generating a new component\n      \"angular.components.style\": \"css\", // Style file extension when generating a new component\n      \"angular.files.include\": [\n        \"ts\"\n      ], // Extensions to include in the Sidebar Angular File Generator\n      \"angular.files.exclude\": [\n        \"**/node_modules/**\",\n        \"**/dist/**\",\n        \"**/out/**\",\n        \"**/build/**\",\n        \"**/.*/**\"\n      ], // Glob patterns of files or folders to exclude in the Sidebar Angular File Generator\n      \"angular.files.watch\": [\n        \"modules\",\n        \"components\",\n        \"services\"\n      ], // Folders to watch\n      \"angular.files.showPath\": true, // Show the path in the list of files in the Sidebar Angular File Generator\n      \"angular.terminal.cwd\": \"/path/to/your/project/\", // Current working directory for the terminal. The directory must be absolute\n      \"angular.submenu.customCommands\": [\n        {\n          \"name\": \"Template 1\",\n          \"command\": \"ng g c\",\n          \"args\": \"--style css --standalone true --inline-style --inline-template\"\n        },\n        {\n          \"name\": \"Template 2\",\n          \"command\": \"ng g c\",\n          \"args\": \"--style scss --standalone false --inline-style --inline-template\"\n        }\n      ], // Custom commands to execute in the custom command submenu\n      \"angular.submenu.templates\": [\n        {\n          \"name\": \"Template 1\",\n          \"description\": \"Description of Template 1\",\n          \"type\": \"component\",\n          \"template\": [\n            \"import { Component, OnInit } from '@angular/core';\",\n            \"\",\n            \"@Component({\",\n            \"  selector: '{{EntityName}}',\",\n            \"  templateUrl: './{{EntityName}}.component.html',\",\n            \"  styleUrls: ['./{{EntityName}}.component.css']\",\n            \"})\",\n            \"export class {{ComponentName}}Component implements OnInit {\",\n            \"\",\n            \"  constructor() { }\",\n            \"\",\n            \"  ngOnInit(): void { }\",\n            \"\",\n            \"}\"\n          ]\n        }\n      ], // Templates to generate files in the submenu\n      \"angular.submenu.activateItem\": {\n        \"terminal\": {\n          \"component\": true,\n          \"guard\": true,\n          \"pipe\": true,\n          \"service\": true,\n          \"custom\": true\n        },\n        \"file\": {\n          \"class\": true,\n          \"component\": true,\n          \"directive\": true,\n          \"enum\": true,\n          \"guard\": true,\n          \"interceptor\": true,\n          \"interface\": true,\n          \"module\": true,\n          \"pipe\": true,\n          \"resolver\": true,\n          \"service\": true,\n          \"spec\": true,\n          \"template\": true\n        }\n      }, // Activate items in the submenu\n      \"angular.fileGenerator.skipFolderConfirmation\": false, // Skip folder confirmation when generating a new file\n    }\n    ```\n\n4. **Restart VS Code**\n\nYour project is now set up to automatically format code upon saving.\n\n## Settings Options\n\nConfigure the Angular File Generator extension to suit your needs. The following settings are available:\n\n- `angular.enable`: Enable or disable the extension. The default is `true`.\n- `angular.components.standalone`: Sets the standalone option when generating a new component. The default is `true`.\n- `angular.components.style`: Sets the style file extension when generating a new component. The default is `css`.\n- `angular.files.include`: The list of extensions to include in the Sidebar Angular File Generator. The default is `ts`.\n- `angular.files.exclude`: Glob patterns of files or folders to exclude in the Sidebar Angular File Generator. The default is `**/node_modules/**`, `**/dist/**`, `**/out/**`, `**/build/**`, and `**/.*/**`.\n- `angular.files.watch`: The list of types of files to watch in the Sidebar Angular File Generator. The default is `modules`, `components`, and `services`.\n- `angular.files.showPath`: Show the path in the list of files in the Sidebar Angular File Generator. The default is `true`.\n- `angular.terminal.cwd`: Sets the current working directory for the terminal. The directory must be absolute.\n- `angular.submenu.customCommands`: The list of custom commands to execute in the custom command submenu. The default is an empty array.\n- `angular.submenu.templates`: The list of templates to execute in the submenu. The default is an empty array.\n- `angular.submenu.activateItem`: Activate items in the submenu.\n- `angular.fileGenerator.skipFolderConfirmation`: Skip folder confirmation when generating a new file. The default is `false`.\n\nThe `angular.submenu.customCommands` setting is an array of objects with the following properties:\n\n- `name`: The name of the command. Example: \"Template 1\".\n- `command`: The command to execute. Example: \"ng g c\".\n- `args`: The arguments to pass to the command. Example: \"--style css --standalone true --inline-style --inline-template\".\n\nThe `angular.submenu.templates` setting is an array of objects with the following properties:\n\n- `name`: The name of the template. Example: \"Service\".\n- `description`: A description of the template. Example: \"Creates a service file\".\n- `type`: The type of component. Example: \"service\".\n- `template`: The template content for the file. Use `{{ComponentName}}` as a placeholder for the component name and `{{EntityName}}` for the lowercase component name or any other placeholder you want to use.\n\nFor more information on configuring the Angular File Generator extension, see the [Project Settings](#project-settings) section.\n\n## Features\n\n### Files\n\n| Title  | Purpose |\n| --- | --- |\n| Angular: Generate Class | Creates a new, generic class definition |\n| Angular: Generate Component File | Creates a new, generic component definition |\n| Angular: Generate Directive | Creates a new, generic directive definition |\n| Angular: Generate Enum | Generates a new, generic enum definition |\n| Angular: Generate Guard | Generates a new, generic route guard definition |\n| Angular: Generate Interceptor | Creates a new, generic interceptor definition |\n| Angular: Generate Interface | Creates a new, generic interface definition |\n| Angular: Generate Module | Creates a new, generic NgModule definition |\n| Angular: Generate Pipe | Creates a new, generic pipe definition |\n| Angular: Generate Resolver | Generates a new, generic resolver definition |\n| Angular: Generate Service | Creates a new, generic service definition |\n| Angular: Generate Test | Creates a new, generic test definition |\n| Angular: Generate Template | Creates a new file with a template definition |\n\n### Commands\n\n| Title  | Purpose |\n| --- | --- |\n| Angular: New Application | Creates a new Angular application |\n| Angular: Start Server | Builds and serves your application, rebuilding on file changes |\n| Angular: Version | Outputs Angular CLI version |\n| Angular: Run Tests | Runs unit tests in a project |\n| Angular: Run E2E | Builds and serves an Angular application, then runs end-to-end tests |\n| Angular: Disable Analytics | Disables analytics gathering and reporting for the user |\n| Angular: Enable Analytics | Enables analytics gathering and reporting for the user |\n| Angular: Info Analytics | Prints analytics gathering and reporting configuration in the console |\n| Angular: Prompt Analytics | Prompts the user to set the analytics gathering status interactively |\n| Angular: Clean Cache | Deletes persistent disk cache from disk |\n| Angular: Disable Cache | Disables persistent disk cache for all projects in the workspace |\n| Angular: Enable Cache | Enables disk cache for all projects in the workspace |\n| Angular: Info Cache | Prints persistent disk cache configuration and statistics in the console |\n| Angular: Generate Component with CLI | Creates a new, generic component definition |\n| Angular: Generate Guard with CLI | Creates a new, generic guard definition |\n| Angular: Generate Pipe with CLI | Creates a new, generic pipe definition |\n| Angular: Generate Service with CLI | Creates a new, service service definition |\n| Angular: Generate Environments | Generates and configures environment files for a project |\n| Angular: Generate Library | Creates a new, generic library project in the current workspace |\n\n### Snippets\n\n| Title  | Purpose |\n| --- | --- |\n| ng_class_module | export class Module {} |\n| ng_class_routing_module | export class RoutingModule {} |\n| ng_const_routes | export const routes: Routes = [] |\n| ng_class_component | export class Component {} |\n| ng_class_standalone_component | export class Component {} |\n| ng_class_service | export class Service {} |\n| ng_unsubscribe | private unsubscribe: Subscription[] = []; |\n| ng_subscribe | this.unsubscribe.push(this.subscr); |\n| ng_on_destroy | ngOnDestroy {} |\n| ng_oninit | ngOnInit {} |\n| ng_const_environment | export const environment = {} |\n| ng_if | @if (condition) {} |\n| ng_if_else | @if (condition) {} @else {} |\n| ng_if_else_if | @if (condition) {} @else if (condition) {} |\n| ng_else_if | @else if (condition) {} |\n| ng_else | @else {} |\n| ng_for | @for (condition) {} |\n| ng_empty | @empty {} |\n| ng_switch | @switch (condition) {} |\n| ng_case | @case (condition) {} |\n| ng_default | @default {} |\n| ng-defer | @defer (condition) {}  |\n| ng-placeholder | @placeholder {} |\n| ng-loading | @loading {} |\n| ng_router_outlet | \\\u003crouter-outlet\u003e\\\u003c/router-outlet\u003e |\n| ng_router_link | \\\u003ca routerLink=\"\"\u003e\\\u003c/a\u003e |\n\n## Follow Me\n\nIf you enjoy using this extension, consider following me for updates on this and future projects:\n\n[![GitHub followers](https://img.shields.io/github/followers/ManuelGil?style=for-the-badge\u0026logo=github)](https://github.com/ManuelGil)\n[![X (formerly Twitter) Follow](https://img.shields.io/twitter/follow/imgildev?style=for-the-badge\u0026logo=x)](https://twitter.com/imgildev)\n\n## VSXpert Template\n\nThis extension was created using [VSXpert](https://vsxpert.com), 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.\n\n## Other Extensions\n\n- [Angular File Generator](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-angular-generator)\n- [NestJS File Generator](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-nestjs-generator)\n- [T3 Stack / NextJS / ReactJS File Generator](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-nextjs-generator)\n- [JSON Flow](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-json-flow)\n- [Auto Barrel](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-auto-barrel)\n- [CodeIgniter 4 Spark](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-codeigniter4-spark)\n\n## Contributing\n\nAngular 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](https://github.com/ManuelGil/vscode-angular-generator) and submit a pull request with your changes.\n\nBefore contributing, please read our [Contribution Guidelines](./CONTRIBUTING.md) for instructions on coding standards, testing, and more.\n\n## Code of Conduct\n\nWe 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](./CODE_OF_CONDUCT.md) before participating in our community.\n\n## Changelog\n\nFor a complete list of changes, see the [CHANGELOG.md](./CHANGELOG.md)\n\n## Authors\n\n- **Manuel Gil** - _Owner_ - [ManuelGil](https://github.com/ManuelGil)\n\nSee also the list of [contributors](https://github.com/ManuelGil/vscode-angular-generator/contributors) who participated in this project.\n\n## License\n\nAngular File Generator for VSCode is licensed under the MIT License - see the [MIT License](https://opensource.org/licenses/MIT) for details.\n","funding_links":["https://github.com/sponsors/ManuelGil","https://ko-fi.com/ManuelGil","https://paypal.me/ManuelFGil","https://www.buymeacoffee.com/ManuelGil"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanuelgil%2Fvscode-angular-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanuelgil%2Fvscode-angular-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanuelgil%2Fvscode-angular-generator/lists"}