DevKit Gen

Generate clean React and Express project architecture in seconds — without overwriting your existing files.

---

What is DevKit Gen?

DevKit Gen is a VS Code extension for developers who want a consistent project structure without manually creating dozens of folders and files.

Instead of repeatedly creating:

src/
├── components/
├── pages/
├── hooks/
├── services/
├── types/
└── ...

or an Express backend such as:

src/
├── controllers/
├── routes/
├── services/
├── models/
├── validations/
└── ...

you choose a generator, enter a name, preview the plan, and DevKit Gen creates the missing files for you.

The core promise

DevKit Gen creates. It never overwrites.

If a generated file already exists, DevKit Gen skips it instead of replacing it.

---

Why DevKit Gen?

Starting a project is easy.

Keeping its architecture consistent as the project grows is harder.

DevKit Gen helps with the repetitive part:

• Create predictable folder structures
• Generate common React files
• Generate common Express files
• Generate complete CRUD resources
• Detect the existing project before generating
• Support TypeScript and JavaScript
• Apply consistent naming conventions
• Preview changes before writing
• Keep existing code untouched

It is designed to be fast enough for everyday development and safe enough to run inside an existing project.

---

Features

1. Project Structure Generation

Generate complete architecture presets instead of creating folders manually.

React

• React Basic
• React Scalable

Express

• Express Basic
• Express MVC
• Express REST API

---

2. Single File Generation

Need only one file?

Use Generate File and choose a generator.

Examples:

• React Component
• React Page
• React Hook
• React Context
• React Service
• React API Module
• React Type
• Express Controller
• Express Route
• Express Service
• Express Model
• Express Validation
• Express Middleware

---

3. Complete CRUD Resource

Create a backend resource in one operation.

For example:

User

can generate:

modules/
└── user/
    ├── user.controller.ts
    ├── user.route.ts
    ├── user.service.ts
    ├── user.model.ts
    └── user.validation.ts

The exact file extension depends on the detected/configured language.

---

4. Smart Project Detection

DevKit Gen checks the project before generating files.

It can detect:

• React
• Next.js
• Vite
• Express
• Node.js
• TypeScript
• JavaScript
• Existing source folders such as src, app, lib, or server

It also reads project information from package.json and existing files.

---

5. TypeScript and JavaScript

DevKit Gen supports both:

TypeScript → .ts / .tsx
JavaScript → .js / .jsx

With:

"language": "auto"

the extension can detect the project's language.

---

6. Naming Conventions

Choose a consistent naming style for generated folders and files.

Supported conventions:

camelCase
kebab-case
PascalCase
snake_case

Automatic naming is also available for generated files.

For example, a React component named:

UserProfile

can become:

UserProfile.tsx

while a hook can follow its idiomatic naming:

useAuth.ts

---

7. Preview Before Generation

Before writing anything, DevKit Gen can show you the generation plan.

You can see what will be:

• Created
• Skipped
• Failed

Only after confirmation does the extension apply the plan.

---

Screenshots

Generate a React Structure

Choose a React preset and generate the architecture inside your workspace.

---

Generate a Single File

Select a generator, enter the name, preview the plan, and generate the file.

---

Generate an Express CRUD Resource

Generate a complete backend resource without manually creating every layer.

---

Safe Merge Report

Existing files are skipped and reported instead of being modified.

---

Quick Start

1. Install DevKit Gen

Install the extension from the VS Code Marketplace.

Or install the packaged VSIX manually:

code --install-extension devkit-scaffold-1.0.0.vsix

The VSIX filename depends on the version you publish.

---

2. Open a Project

Open the React, Express, Node.js, or empty workspace where you want to generate files.

---

3. Open the Command Palette

Press:

Ctrl + Shift + P

Search for:

DevKit Gen

You will see the available commands.

---

4. Generate

Choose one:

Generate React Structure
Generate Express Structure
Generate File
Generate Express CRUD Resource
Show Detected Project Info

Follow the prompts.

---

Commands

All commands are available from the VS Code Command Palette.

Command	Purpose
Generate React Structure	Generate a complete React architecture preset
Generate Express Structure	Generate a complete Express architecture preset
Generate File	Generate one React or Express file
Generate Express CRUD Resource	Generate controller, route, service, model and validation together
Show Detected Project Info	Display detected framework, language and source root

Command IDs:

DevKit Gen.generateReactStructure
DevKit Gen.generateExpressStructure
DevKit Gen.generateFile
DevKit Gen.generateCrudResource
DevKit Gen.showProjectInfo

---

Generated Structures

React Basic

A simple structure for smaller projects.

src/
├── components/
├── pages/
├── hooks/
├── services/
└── types/

---

React Scalable

A more organized structure for larger applications.

src/
├── components/
├── pages/
├── hooks/
├── context/
├── services/
├── types/
└── ...

---

Express Basic

A lightweight backend structure.

src/
├── controllers/
├── routes/
├── models/
└── services/

---

Express MVC

A conventional MVC backend layout.

src/
├── controllers/
├── models/
├── routes/
├── services/
└── validations/

---

Express REST API

A scalable REST API structure.

src/
├── modules/
│   └── user/
│       ├── user.controller.ts
│       ├── user.route.ts
│       ├── user.service.ts
│       ├── user.model.ts
│       └── user.validation.ts
├── middlewares/
├── config/
└── ...

The generated output follows the configured language and naming conventions.

---

Safety

This is the most important part of DevKit Gen.

DevKit Gen does not overwrite existing files

Suppose your project already contains:

src/components/Button.tsx

and DevKit Gen tries to generate the same file.

It does not replace it.

Instead:

SKIPPED: src/components/Button.tsx

Your existing code stays untouched.

---

What DevKit Gen will never do

DevKit Gen will not:

• Overwrite an existing file
• Modify an existing file
• Delete your files
• Truncate your files
• Modify unrelated configuration
• Install dependencies
• Execute generated code
• Run shell commands for generated code
• Modify Git history
• Modify the Git index
• Write outside the selected workspace root

---

Safe merge behaviour

Every generation request becomes a plan:

GenerationPlan
      ↓
Preview
      ↓
Merge Engine
      ↓
Created / Skipped / Failed

The merge engine can create missing files, but it cannot replace existing files.

The filesystem write also uses exclusive file creation so a race between checking and writing cannot silently overwrite a file.

---

Configuration

DevKit Gen provides settings through VS Code Settings.

Setting	Default	Options
DevKit Gen.language	auto	auto, typescript, javascript
DevKit Gen.folderNaming	kebab-case	camelCase, kebab-case, PascalCase, snake_case
DevKit Gen.fileNaming	auto	auto, camelCase, kebab-case, PascalCase, snake_case
DevKit Gen.confirmBeforeGenerate	true	true, false
DevKit Gen.sourceRoot	src	Any folder name
DevKit Gen.react.preset	react-scalable	react-basic, react-scalable
DevKit Gen.express.preset	express-rest-api	express-basic, express-mvc, express-rest-api

Recommended defaults

For most projects:

{
  "DevKit Gen.language": "auto",
  "DevKit Gen.folderNaming": "kebab-case",
  "DevKit Gen.fileNaming": "auto",
  "DevKit Gen.confirmBeforeGenerate": true,
  "DevKit Gen.sourceRoot": "src"
}

---

Supported Languages

DevKit Gen currently supports:

Language	Extensions
TypeScript	.ts, .tsx
JavaScript	.js, .jsx

When language detection is set to auto, DevKit Gen uses project evidence to choose the appropriate template.

---

Examples

Example 1 — New React Project

Start with:

my-app/
└── package.json

Run:

Generate React Structure

Choose:

React Scalable

Result:

my-app/
├── src/
│   ├── components/
│   ├── pages/
│   ├── hooks/
│   ├── context/
│   ├── services/
│   └── types/
└── package.json

---

Example 2 — Existing React Project

Suppose you already have:

src/
├── components/
│   └── Button.tsx
└── App.tsx

Generate the React structure again.

DevKit Gen creates missing files/folders but keeps:

Button.tsx
App.tsx

untouched.

---

Example 3 — Express User Resource

Run:

Generate Express CRUD Resource

Enter:

User

DevKit Gen can create:

modules/
└── user/
    ├── user.controller.ts
    ├── user.route.ts
    ├── user.service.ts
    ├── user.model.ts
    └── user.validation.ts

---

Architecture

DevKit Gen is organized into four major layers.

V1 ─ Safe Generation Core
        ↓
V2 ─ Project Detection
        ↓
V3 ─ Generator Registry
        ↓
V4 ─ Presets, UX & Error Handling

V1 — Safe Generation Core

Responsible for:

• Generation plans
• Filesystem abstraction
• Merge engine
• Path safety
• Naming utilities
• Notifications
• Structure plans

The key idea:

Command
  ↓
GenerationPlan
  ↓
MergeEngine
  ↓
Filesystem

Commands do not directly write files.

---

V2 — Project Detection

Detects:

• Framework
• Language
• Source root
• package.json
• TypeScript sources
• Project markers

This lets generation adapt to an existing project.

---

V3 — Generator Registry

Generators are registered using metadata.

A generator describes:

id
label
description
category
default directory
name placeholder
generation function

The UI reads from the registry, so adding a generator does not require a large switch statement.

---

V4 — Presets, UX & Error Handling

Handles:

• Preset registry
• Settings
• QuickPick
• InputBox
• Confirmation
• Progress
• Notifications
• Error handling

This keeps command implementations small and predictable.

---

Testing

DevKit Gen includes an automated test suite that runs inside a real VS Code Extension Development Host.

Run:

npm test

The test pipeline performs:

Type-check
   ↓
Compile extension
   ↓
Compile tests
   ↓
Launch VS Code test host
   ↓
Run test suites

The test suite covers:

• String utilities
• Naming
• Path safety
• Merge engine
• Project detection
• Generator registry
• Preset registry
• React generators
• Express generators
• CRUD generation
• Structure generation
• Settings
• Extension activation
• End-to-end commands

A successful run should report all tests passing.

---

Packaging

To create a VSIX package:

npm run package

This produces a file similar to:

dev-architecture-toolkit-1.0.0.vsix

Install it locally with:

code --install-extension devkit-scaffold-1.0.0.vsix

---

Roadmap

DevKit Gen is intentionally designed so more generators and frameworks can be added without rewriting the core.

Planned ideas

• [ ] More React architecture presets
• [ ] More Express/MERN generators
• [ ] Next.js generators
• [ ] NestJS generators
• [ ] More backend architecture patterns
• [ ] Custom user-defined templates
• [ ] Custom generator presets
• [ ] More detailed generation preview
• [ ] Optional post-generation actions
• [ ] Additional language/template support
• [ ] Improved project detection

The architecture is built around registries and adapters, making these additions incremental rather than a rewrite.

---

Requirements

For users

• VS Code ^1.85.0

For development

• Node.js 20+
• npm

---

Development

Clone the repository and install dependencies:

npm install

Compile:

npm run compile

Run tests:

npm test

Create a VSIX:

npm run package

For local extension development, open the project in VS Code and press:

F5

This launches the Extension Development Host.

---

Project Principles

DevKit Gen follows a few simple principles:

1. Safety first

Existing code belongs to the developer.

2. Generate, don't replace

The extension creates missing architecture instead of taking control of the project.

3. Detect before generating

The project should influence the generated output.

4. Keep generators composable

Small generators should be reusable inside larger generators.

5. Keep the core framework-agnostic

The merge engine should not care whether the project is React, Express, or something else.

---

License

MIT License.

See LICENSE for details.

---

DevKit Gen — Build your architecture. Keep your code.