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.
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.
Table of Contents
Requirements
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.enable": true, // Enable or disable the extension
"angular.components.standalone": true, // Standalone option when generating a new component
"angular.components.style": "css", // Style file extension when generating a new component
"angular.files.include": [
"ts"
], // Extensions to include in the Sidebar Angular File Generator
"angular.files.exclude": [
"**/node_modules/**",
"**/dist/**",
"**/out/**",
"**/build/**",
"**/.*/**"
], // Glob patterns of files or folders to exclude in the Sidebar Angular File Generator
"angular.files.watch": [
"modules",
"components",
"services"
], // Folders to watch
"angular.files.showPath": true, // Show the path in the list of files in the Sidebar Angular File Generator
"angular.terminal.cwd": "/path/to/your/project/", // Current working directory for the terminal. The directory must be absolute
"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"
}
], // Custom commands to execute in the custom command submenu
"angular.submenu.templates": [
{
"name": "Template 1",
"description": "Description of Template 1",
"type": "component",
"template": [
"import { Component, OnInit } from '@angular/core';",
]
}
], // Templates to execute in the submenu
"angular.submenu.activateItem": {
"terminal": {
"component": true,
"guard": true,
"pipe": true,
"service": true,
"custom": 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,
"template": true
}
}, // Activate items in the submenu
"angular.fileGenerator.skipFolderConfirmation": false, // Skip folder confirmation when generating a new file
}
Restart VS Code
Your project is now set up to automatically format code upon saving.
Settings Options
Configure the Angular File Generator extension to suit your needs. The following settings are available:
angular.enable: Enable or disable the extension. The default is true.angular.components.standalone: Sets the standalone option when generating a new component. The default is true.angular.components.style: Sets the style file extension when generating a new component. The default is css.angular.files.include: The list of extensions to include in the Sidebar Angular File Generator. The default is ts.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 **/.*/**.angular.files.watch: The list of types of files to watch in the Sidebar Angular File Generator. The default is modules, components, and services.angular.files.showPath: Show the path in the list of files in the Sidebar Angular File Generator. The default is true.angular.terminal.cwd: Sets the current working directory for the terminal. The directory must be absolute.angular.submenu.customCommands: The list of custom commands to execute in the custom command submenu. The default is an empty array.angular.submenu.templates: The list of templates to execute in the submenu. The default is an empty array.angular.submenu.activateItem: Activate items in the submenu.angular.fileGenerator.skipFolderConfirmation: Skip folder confirmation when generating a new file. The default is false.
The angular.submenu.customCommands setting is an array of objects with the following properties:
name: The name of the command. Example: "Template 1".command: The command to execute. Example: "ng g c".args: The arguments to pass to the command. Example: "--style css --standalone true --inline-style --inline-template".
The angular.submenu.templates setting is an array of objects with the following properties:
name: The name of the template. Example: "Service".description: A description of the template. Example: "Creates a service file".type: The type of component. Example: "service".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.
For more information on configuring the Angular File Generator extension, see the Project Settings section.
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 |
| Angular: Generate Template |
Creates a new file with a template definition |
Commands
| Title |
Purpose |
| Angular: New Application |
Creates a new Angular application |
| Angular: Start Server |
Builds and serves your application, rebuilding on file changes |
| Angular: Version |
Outputs Angular CLI version |
| 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: 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 |
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 |
<router-outlet></router-outlet> |
| ng_router_link |
<a routerLink=""></a> |
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
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.
| |
