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 JavaScript 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 650 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.

• ✅ Existing modules are suggested for --module
• ✅ 🚀 Route option for page components
• ✅ 🚀 Automatic ActivatedRoute if route has a parameter
• ✅ 🚀 Import a new module in multiple other modules
• ✅ 🚀 Easily import (Reactive)Forms, Material, PrimeNG and Ionic modules
• ✅ 🚀 Generation journey: module, then component or service in a row
• ✅ 🚀 ngOnInit() is still there, even in Angular v15+

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 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
• ✅ 🚀 Inline module option for AIM / SCAM pattern

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

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