NG Generate for VS Code
A VS Code extension that allows you to run NG CLI generate commands directly from the folder context menu in the Explorer.
Features
- Right-click context menu integration: Generate angular schematics by right-clicking any folder in the Explorer
- Organized submenu: All generate commands in a single "NG Generate" submenu
- Configurable defaults: Set default options for all generate commands in VS Code settings
- Simple workflow: Only prompts for the name and optional project, all other options use configured defaults
- Multi-project support: Optionally specify which angular project to generate in
- Supports all major angular schematics:
- Component
- Service
- Module
- Directive
- Pipe
- Guard
- Interceptor
- Class
- Interface
- Enum
- Resolver
Usage
- Right-click on any folder in the VS Code Explorer
- Select "ng Generate" from the context menu
- Choose the type of schematic you want to generate (Component, Service, etc.)
- Enter the name for the item you want to generate
- Optionally enter a project name (leave empty to use the default project)
- The extension will run the Angular CLI command with your configured default options in the selected folder
Requirements
- Node.js and npm must be installed
- Angular CLI must be installed in your project or globally (
@angular/cli)
- Your workspace must be an angular project
Extension Settings
This extension contributes the following settings:
Component Options
ngGenerate.component.standalone: Whether generated components should be standalone (default: true)
ngGenerate.component.skipTests: Skip creating spec.ts test files (default: false)
ngGenerate.component.inlineStyle: Include styles inline in the component.ts file (default: false)
ngGenerate.component.inlineTemplate: Include template inline in the component.ts file (default: false)
ngGenerate.component.style: The file extension or preprocessor to use (css, scss, sass, less, none) (default: css)
ngGenerate.component.changeDetection: The change detection strategy (Default, OnPush) (default: Default)
ngGenerate.component.flat: Create files at the top level of the current folder (default: false)
Service Options
ngGenerate.service.skipTests: Skip creating spec.ts test files (default: false)
ngGenerate.service.flat: Create files at the top level of the current folder (default: true)
Module Options
ngGenerate.module.flat: Create files at the top level of the current folder (default: false)
ngGenerate.module.routing: Create a routing module (default: false)
Directive Options
ngGenerate.directive.standalone: Whether generated directives should be standalone (default: true)
ngGenerate.directive.skipTests: Skip creating spec.ts test files (default: false)
ngGenerate.directive.flat: Create files at the top level of the current folder (default: true)
Pipe Options
ngGenerate.pipe.standalone: Whether generated pipes should be standalone (default: true)
ngGenerate.pipe.skipTests: Skip creating spec.ts test files (default: false)
ngGenerate.pipe.flat: Create files at the top level of the current folder (default: true)
Guard Options
ngGenerate.guard.functional: Specifies whether to generate a guard as a function (default: true)
ngGenerate.guard.skipTests: Skip creating spec.ts test files (default: false)
ngGenerate.guard.flat: Create files at the top level of the current folder (default: true)
Interceptor Options
ngGenerate.interceptor.functional: Creates the interceptor as a HttpInterceptorFn (default: true)
ngGenerate.interceptor.skipTests: Skip creating spec.ts test files (default: false)
ngGenerate.interceptor.flat: Create files at the top level of the current folder (default: true)
Class Options
ngGenerate.class.skipTests: Skip creating spec.ts test files (default: false)
Resolver Options
ngGenerate.resolver.functional: Creates the resolver as a ResolveFn (default: true)
ngGenerate.resolver.skipTests: Skip creating spec.ts test files (default: false)
ngGenerate.resolver.flat: Create files at the top level of the current folder (default: true)
| |