MageForge for VS Code
The official VS Code integration for MageForge.
Features
MageForge adds a dedicated MageForge activity bar to VS Code that surfaces the most common MageForge CLI commands without leaving the editor.
- Welcome view – quick access to commands and helpful resources.
- Commands view – run MageForge CLI commands with a single click:
- Theme: Build, Watch, Clean, List, Inspector
- Hyvä: Tokens, Compatibility Check
- Template: Override
- Dependencies: Update
- System: Check, Version
- Themes view – browse installed Magento themes (frontend/adminhtml), build, watch, or clean a theme via the context menu, and refresh the list.
- Template override – right-click any template file in the Explorer and choose MageForge > Override File… to copy it into a selected theme.
- Integrated terminal output – commands run in named VS Code terminals inside your Magento root directory.
- DDEV aware – automatically runs
bin/magento through DDEV when a .ddev directory is detected, or force it via settings.
Requirements
- VS Code
^1.125.0
- A Magento 2 workspace with MageForge installed
- PHP available on your system (or via DDEV)
Configuration
The extension contributes the following settings under the mageforge. prefix:
| Setting |
Default |
Description |
mageforge.magentoRootPath |
"" |
Path to the Magento root directory (contains bin/magento). Defaults to the workspace folder. |
mageforge.phpExecution |
"auto" |
How to execute PHP commands: auto, ddev, docker-compose, lando, or local. |
mageforge.dockerComposeService |
"php" |
Docker Compose service name for PHP commands. |
mageforge.phpBinary |
"php" |
PHP binary for local execution. Can be a full command for custom setups. |
Development
Prerequisites
- Node.js
24+ (see .nvmrc; run nvm use if you use nvm)
- VS Code
^1.125.0
Setup
npm install
This also activates the pre-commit hook via husky (see Code quality).
Build & watch
npm run compile # type-check + lint + bundle (one-off)
npm run watch # incremental rebuilds in watch mode
Debugging
Press F5 (or run the Run Extension launch configuration) to open a new Extension Development Host window with the extension loaded. Breakpoints in src/ work out of the box.
Testing
npm test # runs extension tests in a headless VS Code instance
npm run pretest # what CI runs before tests: compile tests, compile extension, lint
Tests live in src/test/ and run via @vscode/test-electron — they execute against the real VS Code API, so you can assert on commands, editors, workspace state, etc.
Code quality
| Command |
What it does |
npm run check-types |
TypeScript type checking (tsc --noEmit) |
npm run lint |
ESLint on src/ |
npm run format |
Format all files with Prettier |
npm run format:check |
Verify formatting without writing |
On every commit, lint-staged automatically runs Prettier and eslint --fix on staged files only. If a check fails, the commit is blocked. To bypass in exceptional cases: git commit --no-verify (CI will still catch it).
CI
Every push and PR runs the CI workflow:
- Build & Lint (Ubuntu): type check, Prettier check, ESLint, production build
- Test (Ubuntu, Windows, macOS): extension tests in headless VS Code
Releases are automated via release-please using Conventional Commits (feat:, fix:, chore:, ...).
Release Notes
See CHANGELOG.md.
