Schematics Pro

Ultimate code generation in Visual Studio Code. Easy & fast.

• Boost your productivity by never writing the same code twice and never having to type a command line.
• One tool to rule them all: works with all languages and frameworks, with ready to use schematics for Angular, React, Vue, Ionic, Svelte, Stencil, Lit, Nest, TypeScript and more.
• Better code whatever your background. Beginner? just use the included good practices. Lead developer? enforce your own architecture across the whole team.

By the author of the Angular Schematics for Visual Studio Code, installed 800 000 times.

Click to watch this 30s video to see a technical demo

Get Schematics Pro now

Schematics Pro is a paid extension for Visual Studio Code.

Upon subscription, you will be able to download the extension and you will get a license. It can be used on 1 computer at a time (you can change of computer at any time).

On installation, a walkthrough will be displayed: it includes a getting started tutorial and documentation for all Schematics Pro features.

You will also be able to contact the author directly.

Schematics Pro features

Below is a list of all the features, but be aware you do not need to master all these topics. Schematics Pro provides sensible defaults, and you can learn about customization along the way with the included documentation.

Code automation with no command line

Schematics Pro is a graphical interface inside Visual Studio Code to generate files (components, classes...). While some tools like Angular CLI already do that, you have to type a command line, which is tedious, slow and typos prone. With Schematics Pro, it's super easy and fast: right-click on the destination folder of your choice, and done! The generated file is opened automatically: just start coding.

• ✅ Graphical interface: no command line
• ✅ Automatic path detection
• ✅ Automatic file opening

Angular

Coming from the Angular Schematics extension? Schematics Pro exclusive Angular features are marked with 🚀.

Tooling compatibility and performance

Schematics Pro is totally independent from Angular CLI, which avoids many technical limitations and issues, works out of the box, and allows better performances.

• ✅ 🚀 Internal schematics generator: faster generation
• ✅ 🚀 No terminal involved: no shells issues, no configuration
• ✅ 🚀 No dependency on global Angular CLI
• ✅ 🚀 No package manager involved: no issues with yarn or pnpm

Productivity

While Angular CLI laid the foundations of schematics generation, so much more can be automated. Schematics Pro extends the default schematics, so your every day work is simplified as much as possible.

• ✅ 🚀 Route option for page components
• ✅ 🚀 Automatic ActivatedRoute if route has a parameter
• ✅ 🚀 ngOnInit() is still there, even in Angular v15+ (but you can skip it too)
• ✅ 🚀 Generation journey: module, then component or service in a row
• ✅ 🚀 Import a new module in multiple other modules
• ✅ 🚀 Existing modules are suggested for --module

Standalone components, the right and easy way

Angular standalone components are easier in some aspects, and more difficult in others. One pain point is that we now have to import other components, directives and modules inside each and every component. So Schematics Pro asks you what you want to import in your standalone components :

• ✅ CommonModule by default
• ✅ 🚀 or granular imports (NgIf, NgFor,...) if you prefer
• ✅ 🚀 (Reactive)FormsModule
• ✅ 🚀 IonicModule preselected in Ionic projects
• ✅ 🚀 Material, CDK and PrimeNG modules suggested (or any other library)

Reactivity made easy

Angular 16 introduced Signals for better and simplified reactivity. But there are still cases where you should stick to RxJS. Schematics Pro provides the best of both worlds :

• ✅ 🚀 Schematic for a synchronous reactive service via a Signal
• ✅ 🚀 Schematic for an asynchronous reactive service via RxJS

Optimization

Even beginners can start on the right track, for better application loading time and fluidity.

• ✅ Faster change detection with pure components
• ✅ 🚀 Enforce lazy loaded components / modules

Architecture

In Angular, dissociating pages (routed components) from view components is a major factor for maintainability, scalability, reusability, testability and optimization.

• ✅ Prevent mixing component types with different suffixes
• ✅ 🚀 And more architecture features below

No technical debt

Schematics Pro is aligned with the most modern Angular syntaxes :

• ✅ 🚀 Standalone components / directives / pipes by default (Angular >= 15)
• ✅ 🚀 Functional guards / resolvers by default (Angular >= 14.2)
• ✅ 🚀 Functional interceptors by default (Angular >= 15)

Your code, your choice

But Schematics Pro also gives you the choice. It is just a one-click configuration to:

• ✅ Enable inline templates
• ✅ 🚀 Enable Single File Components (SFC)
• ✅ 🚀 Stick to NgModules (instead of standalone components)
• ✅ 🚀 Stick to class interceptors (instead of functional interceptors)

Unit testing, the right way

Doing full unit tests coverage in a back-end project is good. Doing so in a front-end project is nonsense (most tests should rather be e2e tests). So instead of generating a unit test each time you generate something like the Angular CLI does by default, resulting in a lot of useless files, Schematics Pro allows you to generate unit tests afterwards, on a file basis, only when you need them.

• ✅ 🚀 File-basis unit tests with Jest
• ✅ 🚀 File-basis unit tests with Jasmine

React and Vue

Have you ever dreamed to have an equivalent of the Angular CLI for React and Vue? Your wish has been granted by Schematics Pro.

• ✅ React: choice between class or function notation
• ✅ React: styles choice (css, scss, css modules, styled-components)
• ✅ Vue: choice between options or composition API
• ✅ Automatic detection of TypeScript or native JavaScript

Other schematics

Schematics Pro also have ready to use schematics for:

• ✅ Ionic (page)
• ✅ Svelte (component and store)
• ✅ Stencil (component and store)
• ✅ Lit (component)
• ✅ Nest (controller, service, modules and many more)
• ✅ TypeScript (class, interface, entry files)
• ask for more!

Create your own schematics

The framework of your heart is not yet listed? Or you want to customize? Schematics Pro lets you create your own schematics in just a few minutes.

• ✅ Dynamic code templates while staying as easy to create as a static code snippet
• ✅ Templating syntax widely known and natively supported by VS Code: Handlebars
• ✅ Just a declarative configuration file (no headache logic code like in Angular CLI or Plop)

Enforce architecture

Your project is growing and it's already messy, because everyone in the team does things their own way? Enforce architecture with Schematics Pro: associate a specific schematic or a predefined type to a folder, and it will be automatically preselected. Lead developers can now lead projects for real.

• ✅ Associate a path to a schematic
• ✅ Prepare your own architecture models for your team
• ✅ Enforce the architecture

Entry files

30 messy imports in each file? Entry files (barrels) are the solution and what libraries do. For example, @angular/core is an entry point allowing to import many elements (Component, Input,...) from one place. Schematics Pro can automate entry files management.

• ✅ Automatic index.ts
• ✅ Automatic TypeScript path mapping
• ✅ Ask private or public in subsequent generations

Monorepos

If you need to manage multiple projects at the same time, there are a lot of solutions available today. Schematics Pro supports Visual Studio Code workspaces and Angular CLI monorepo configuration.

• ✅ VS Code workspaces
• ✅ Angular CLI monorepo

Your code, your style

The formatting world is a mess. For example, most frameworks boilerplates use single quotes by default, but all modern tools (VS Code, ESLint, Prettier) are configured for double quotes by default. Schematics Pro will respect your configuration for quotes and other format settings.

• ✅ Prettier (JSON / YAML / TOML configuration formats)
• ✅ Editorconfig
• ✅ VS Code settings