mkhCodeFormatter
One formatter for all your web development files — HTML, CSS, PHP, Blade, JS, TS, JSX, Vue, SCSS, and Less. No Prettier, no separate PHP formatter, no Blade extension required.
Platform Overview
mkhCodeFormatter is a lightweight, universal VS Code extension that formats your entire web development project with a single, consistent indentation engine. Instead of installing and configuring three or four separate formatters for different file types — Prettier for JS, a PHP formatter, a Blade formatter, a SCSS plugin — mkhCodeFormatter handles all of them natively. It integrates with VS Code's standard formatting system: works with Format Document (Alt+Shift+F), Format on Save, and a dedicated Ctrl+Alt+F shortcut. The formatting engine is a stateful line-by-line parser with language-specific handler branches, string-safe bracket counting, stateful block comment tracking, and a full Laravel Blade directive pair engine.
Enterprise Subsystems & Feature Hub
Explore all 8 production-ready modules, engines, and background services included out of the box.
Universal Language Support
Registers as a VS Code document formatting provider for all file types (language ID: `*`). Includes dedicated handler branches for: HTML and Vue (tag-based indent tracking with void tag awareness), Laravel Blade (directive pair engine), CSS, SCSS, and Less (nested selector hierarchies), PHP (bracket counting + PHP comment stripping), JavaScript, TypeScript, JSX, and TSX (bracket counting + switch/case dedenting). Falls back to a general bracket-based formatter for any other file type.
Native VS Code Integration
Fully integrates with VS Code's standard formatting engine. Responds to all standard formatting triggers: `Alt+Shift+F` (Format Document on Windows/Linux), `Option+Shift+F` (macOS), `editor.formatOnSave: true` in settings, right-click → Format Document, and the Command Palette (`Ctrl+Shift+P` → "Format Code"). A dedicated `Ctrl+Alt+F` keybinding triggers the formatter directly via a registered command. Can be set as the default formatter per language in `settings.json`.
Stateful Block Comment Tracking
A stateful comment detection engine prevents comment lines from incorrectly shifting to the right as indent level increases. Tracks three block comment types: CSS/JSDoc multi-line blocks (`/* ... */`), HTML comment blocks (`<!-- ... -->`), and single-line variants (`//`, `#`, and JSDoc `*` continuation lines). JSDoc `*` continuation lines receive exactly +1 space beyond the current indent level to align with the `/*` opening. Comment state is preserved across lines — the engine knows whether it's inside a block comment before processing each new line.
String-Safe Bracket Counting
Before counting opening and closing brackets to determine indent changes, the `cleanCodeLine()` function strips string literals (double-quoted, single-quoted, and template literal strings) and inline comments from the line. This prevents false bracket counts from brackets inside strings (e.g., `const msg = 'Hello {world}'` does not incorrectly increment the indent level). PHP `#` comments are also stripped in the PHP language branch. Inline `/* */` comments are removed before bracket analysis.
Laravel Blade Directive Engine
Full template indentation for Laravel Blade files. Tracks 15+ directive pairs: `@if` / `@endif`, `@foreach` / `@endforeach`, `@for` / `@endfor`, `@while` / `@endwhile`, `@section` / `@endsection`, `@auth` / `@endauth`, `@guest` / `@endguest`, `@push` / `@endpush`, `@can` / `@endcan`, `@unless` / `@endunless`, `@verbatim` / `@endverbatim`, `@production` / `@endproduction`, `@env` / `@endenv`, `@once` / `@endonce`. Mid-block directives (`@else`, `@elseif`, `@empty`) dedent before printing and maintain the same level after. Blade indentation is combined with standard HTML tag tracking for files that mix Blade and HTML.
Smart switch/case Handling
In JavaScript and TypeScript files, `case` and `default:` labels are automatically dedented by one level relative to their surrounding `switch` block. This produces the conventional formatting style where `case` labels align with the `switch` keyword, and the case body is indented one additional level inside. This avoids the double-indent that naive bracket-only formatters produce for switch statements.
HTML Void Tag Awareness
The HTML formatter recognises all 13 HTML5 void elements — `area`, `base`, `br`, `col`, `embed`, `hr`, `img`, `input`, `link`, `meta`, `param`, `source`, `track`, `wbr` — and never increments the indent level for them, since they have no closing tag. Self-closing attributes (tags ending in `/>`) are also excluded from indent counting. This ensures void elements like `<input>`, `<img>`, and `<br>` don't push subsequent content further right.
Configurable Indentation Size
One setting: `mkhCodeFormatter.indentationSize` (number, default: `2`). Controls the number of spaces used per indent level across all supported languages. Set it to `4` for PSR-12 PHP style or `2` for modern JS/TS/HTML conventions. Configured in VS Code's `settings.json` or via the Settings UI under Extensions → MKH Code Formatter. The setting is read per-document using `vscode.workspace.getConfiguration('mkhCodeFormatter', document.uri)`, respecting workspace-level overrides.
Frequently Asked Questions
Answers to common questions regarding licensing, deployment, POS hardware, and courier integrations.
Open VS Code, press `Ctrl+Shift+X` (or `Cmd+Shift+X` on macOS) to open the Extensions panel, search for `mkhCodeFormatter`, and click Install. Or go directly to the VS Code Marketplace page and click the Install button — it will open VS Code and install automatically. Publisher ID: `mustafa-Mlab.mkh-codeformatter`.
Add `"editor.formatOnSave": true` to your VS Code `settings.json`. To set mkhCodeFormatter as the default formatter for specific languages, add entries like: `"[blade]": { "editor.defaultFormatter": "mustafa-Mlab.mkh-codeformatter" }` for each language. This is especially useful for Blade files, where no other commonly installed formatter handles Blade directives well.
Only if both are set as the default formatter for the same language. If Prettier is your default for JavaScript but you want mkhCodeFormatter for Blade and PHP, set per-language defaults in `settings.json`. They can coexist with no issue as long as default formatters are configured per language. mkhCodeFormatter's `*` registration means it appears in the "Format Document With..." list for any language, but won't automatically conflict unless set as the default.
15+ directive pairs: `@if/@endif`, `@foreach/@endforeach`, `@for/@endfor`, `@while/@endwhile`, `@section/@endsection`, `@auth/@endauth`, `@guest/@endguest`, `@push/@endpush`, `@can/@endcan`, `@unless/@endunless`, `@verbatim/@endverbatim`, `@production/@endproduction`, `@env/@endenv`, `@once/@endonce`, and `@hasSection`. Mid-block directives `@else`, `@elseif`, and `@empty` are recognised as dedenting their own line before maintaining the same indent level for the following content.
Yes. Open VS Code Settings (`Ctrl+,`), search for `mkhCodeFormatter`, and set `mkhCodeFormatter.indentationSize` to `4` (or any number). Or add `"mkhCodeFormatter.indentationSize": 4` to your `settings.json` directly. This applies globally unless overridden at the workspace or folder level.
Yes. The full source is available on GitHub at `github.com/mustafa-Mlab/mkh-codeformatter`. Contributions, bug reports, and feature requests are welcome via GitHub Issues and Pull Requests.
VS Code `1.96.0` or higher. The extension is built with the `@types/vscode ^1.96.0` API bindings and tested with `@vscode/test-electron`. It uses the stable `vscode.languages.registerDocumentFormattingEditProvider` and `vscode.commands.registerCommand` APIs, both of which have been stable for many versions.