React Forge
React Forge is a Visual Studio Code extension that opens a visual step-by-step wizard to scaffold React projects — folder structure, CSS, routing and all config files ready to go.
🇧🇷 Versão em Português | 🇺🇸 English below
Features
- 5-step visual wizard inside VS Code
- Generates a complete React project (Vite or Create React App)
- Choose the number of pages and name each one individually
- CSS options: global or CSS Modules, with optional reset
- Optional React Router v6 navigation with auto-generated routes
- Generates
package.json, vite.config.js and all source files
- Post-creation actions: open folder in new window and/or auto-run the dev server
- Detects if the project folder already exists before creating
How to use
- Open the Command Palette (
Ctrl+Shift+P)
- Run React Forge: New Project
- Fill in the wizard:
- Step 1 — Project: name and bundler (Vite or CRA)
- Step 2 — Pages: number of pages and their names
- Step 3 — Styles: CSS reset, component standardization, CSS type
- Step 4 — Navigation: enable React Router with route preview
- Step 5 — Preview: review the file tree and choose post-creation actions
- Click Create Project
The project is created instantly. If you checked "Run project", the dev server starts automatically in the new window.
Generated structure
my-app/
├── src/
│ ├── pages/
│ │ ├── Home.jsx
│ │ └── Home.css
│ ├── components/
│ ├── assets/
│ ├── App.jsx
│ ├── main.jsx
│ └── index.css
├── index.html
├── package.json
└── vite.config.js
Requirements
Extension settings
No configuration required. Everything is set up through the wizard.
Release notes
1.0.0
React Forge — Português
React Forge é uma extensão para o Visual Studio Code que abre um wizard visual passo a passo para criar projetos React — estrutura de pastas, CSS, roteamento e arquivos de configuração prontos para uso.
Funcionalidades
- Wizard visual em 5 etapas dentro do VS Code
- Gera um projeto React completo (Vite ou Create React App)
- Escolha o número de páginas e nomeie cada uma individualmente
- Opções de CSS: global ou CSS Modules, com reset opcional
- Navegação com React Router v6 com rotas geradas automaticamente
- Gera
package.json, vite.config.js e todos os arquivos fonte
- Ações pós-criação: abrir pasta em nova janela e/ou iniciar o servidor de desenvolvimento automaticamente
- Verifica se a pasta do projeto já existe antes de criar
Como usar
- Abra o Command Palette (
Ctrl+Shift+P)
- Execute React Forge: New Project
- Preencha o wizard:
- Etapa 1 — Projeto: nome e bundler (Vite ou CRA)
- Etapa 2 — Páginas: número de páginas e seus nomes
- Etapa 3 — Estilos: reset de CSS, padronização de componentes, tipo de CSS
- Etapa 4 — Navegação: ativar React Router com preview das rotas
- Etapa 5 — Preview: revisão da árvore de arquivos e ações pós-criação
- Clique em Criar Projeto
O projeto é criado instantaneamente. Se você marcou "Rodar projeto", o servidor de desenvolvimento inicia automaticamente na nova janela.
Estrutura gerada
meu-app/
├── src/
│ ├── pages/
│ │ ├── Home.jsx
│ │ └── Home.css
│ ├── components/
│ ├── assets/
│ ├── App.jsx
│ ├── main.jsx
│ └── index.css
├── index.html
├── package.json
└── vite.config.js
Requisitos
Configurações da extensão
Nenhuma configuração necessária. Tudo é definido pelo wizard.
Notas de versão
1.0.0
