Save a .ts file, get a .js file next to it — instantly. No bundler, no build tool to wire up, no config to write.
📦 v0.2.0 is a complete rewrite from scratch. If you used an earlier version of this extension, please read the Migration Note below — several settings changed shape.
Compilets watches your TypeScript files and compiles them to JavaScript the moment you save — using Node.js's own built-in type-stripping and esbuild under the hood, instead of the full TypeScript compiler. That's the entire reason it's fast: it's not running a type checker at all. Type-checking is your editor's job (VS Code already does this live, as you type); Compilets' only job is turning .ts into .js as quickly as possible so you can actually run or debug what you just wrote.
Your tsconfig.json is the single source of truth for how your code compiles. Compilets doesn't ask you to duplicate that configuration anywhere else — it just reads the tsconfig.json you already have.
- Zero config to get started. Open a folder with
.tsfiles in it, and Compilets starts watching automatically. - Your
tsconfig.jsonalready works.sourceMap,outDir,erasableSyntaxOnly,pathsaliases — Compilets reads what's already there. - No global TypeScript install required. Unlike a lot of "fast compile" setups, there's nothing to
npm install -g. - Path aliases just work. Import
@utils/time.jsin your source, and the compiled output gets a real, working relative import — automatically. - Built for real projects, not just toy examples. Multi-root workspaces, nested
tsconfig.jsonfiles, sourcemaps, and diagnostics in the Problems panel are all supported.
| Feature | What it does |
|---|---|
| Autostart watch mode | If your workspace has .ts files, Compilets starts watching them the moment you open it — no command needed. |
tsconfig.json as source of truth |
Module kind, erasableSyntaxOnly, sourceMap, and paths are all read from your real config. |
| Path alias rewriting | @utils/time.js in your source becomes a correct relative import (../utils/time.js) in the compiled output. |
| Import Map generation | One command detects whether you're building for the browser or Node.js and generates the right output — an HTML <script type="importmap"> or a package.json #imports field. |
| Sourcemaps | Set "sourceMap": true in tsconfig.json and Compilets emits real .js.map files (or inline maps). |
Multi-root & nested tsconfig.json support |
Monorepo-style projects with more than one tsconfig.json are resolved correctly, each independently. |
| Problems panel integration | Compile errors show up as real diagnostics in your file, not just a log line. |
Hide compiled .js in Explorer |
One setting keeps your file tree clean by hiding generated .js files next to their .ts source. |
compile-ts extension is lovingly maintained by a solo developer who needs food to survive and keep coding!
<style> img.kofiimg { display: initial !important; vertical-align: middle; height: 13px !important; width: 20px !important; padding-top: 0 !important; padding-bottom: 0 !important; border: none; margin-top: 0; margin-right: 5px !important; margin-left: 0 !important; margin-bottom: 3px !important; content: url('https://storage.ko-fi.com/cdn/cup-border.png') } .kofiimg:after { vertical-align: middle; height: 25px; padding-top: 0; padding-bottom: 0; border: none; margin-top: 0; margin-right: 6px; margin-left: 0; margin-bottom: 4px !important; content: url('https://storage.ko-fi.com/cdn/whitelogo.svg') } .btn-container { display: inline-block !important; white-space: nowrap; min-width: 160px } span.kofitext { color: #fff !important; letter-spacing: -0.15px !important; text-wrap: none; vertical-align: middle; line-height: 45px !important; padding: 0; text-align: center; text-decoration: none !important; text-shadow: 0 1px 1px rgba(34, 34, 34, 0.05); } .kofitext a { color: #fff !important; text-decoration: none !important; } .kofitext a:hover { color: #fff !important; text-decoration: none } a.kofi-button { box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); line-height: 36px !important; min-width: 150px; display: inline-block !important; background-color: #29abe0; padding: 2px 12px !important; text-align: center !important; border-radius: 7px; color: #fff; cursor: pointer; overflow-wrap: break-word; vertical-align: middle; border: 0 none #fff !important; font-family: 'Quicksand', Helvetica, Century Gothic, sans-serif !important; text-decoration: none; text-shadow: none; font-weight: 700 !important; font-size: 14px !important } a.kofi-button:visited { color: #fff !important; text-decoration: none !important } a.kofi-button:hover { opacity: .85; color: #f5f5f5 !important; text-decoration: none !important } a.kofi-button:active { color: #f5f5f5 !important; text-decoration: none !important } .kofitext img.kofiimg { height: 15px !important; width: 22px !important; display: initial; animation: kofi-wiggle 3s infinite; } @keyframes kofi-wiggle { 0% { transform: rotate(0) scale(1) } 60% { transform: rotate(0) scale(1) } 75% { transform: rotate(0) scale(1.12) } 80% { transform: rotate(0) scale(1.1) } 84% { transform: rotate(-10deg) scale(1.1) } 88% { transform: rotate(10deg) scale(1.1) } 92% { transform: rotate(-10deg) scale(1.1) } 96% { transform: rotate(10deg) scale(1.1) } 100% { transform: rotate(0) scale(1) } } </style> <style> .bmc-btn svg { height: 32px !important; margin-bottom: 0px !important; box-shadow: none !important; border: none !important; vertical-align: middle !important; transform: scale(0.9); flex-shrink: 0; } .bmc-btn { min-width: 210px; color: #000000; background-color: #FFDD00 !important; height: 60px; border-radius: 12px; font-size: 28px; font-weight: Normal; border: none; padding: 0px 24px; line-height: 27px; text-decoration: none !important; display: inline-flex !important; align-items: center; font-family: 'Cookie', cursive !important; -webkit-box-sizing: border-box !important; box-sizing: border-box !important; } .bmc-btn:hover, .bmc-btn:active, .bmc-btn:focus { text-decoration: none !important; cursor: pointer; } .bmc-btn-text { text-align: left; margin-left: 8px; display: inline-block; line-height: 0; width: 100%; flex-shrink: 0; font-family: [FONT] !important; } .logo-outline { fill: #000000; } .logo-coffee { fill: #ffffff; } </style> 
Feed the dev 🍜
- Install the extension and open a folder that contains
.tsfiles. - That's it — if
compilets.autoStartis on (the default), watch mode starts automatically and every save recompiles that file.
Open the Command Palette (F1 or Ctrl+Shift+P / Cmd+Shift+P) and search for Compilets:
| Command | What it does | Keybinding |
|---|---|---|
| Compilets: Compile watched TypeScript now | Compiles anything that's missing or out of date, without starting the live watcher. | Ctrl+Alt+C / Cmd+Option+C |
| Compilets: Start watch mode (compile on save) | Manually starts watching (mainly useful if you've turned off autostart for this workspace). | Ctrl+Alt+W / Cmd+Option+W |
| Compilets: Generate tsconfig.json... | Creates a ready-to-go tsconfig.json — choose Node.js or Browser. |
— |
| Compilets: Generate Import Map | Detects your project type and generates the right import map (see below). | — |
| Setting | Default | What it's for |
|---|---|---|
compilets.autoStart |
true |
Turn off in a workspace's .vscode/settings.json if you'd rather start watching manually. |
compilets.config.watchFolders |
(empty — falls back to tsconfig.json's include, then "src") |
Which folders to watch. |
compilets.compiler.outputLocation |
"sameFolderAsSource" |
.js next to its .ts, or in a separate output folder. |
compilets.dedicatedOutputFolder |
"out" |
Used when outputLocation is "separateFolder". |
compilets.hideCompiledJsInExplorer |
false |
Keeps generated .js files out of the Explorer view. |
|
| compilets.importMap.target | "auto" | Force "browser" or "nodejs" if auto-detection ever picks wrong. |
Run Compilets: Generate Import Map and it figures out what kind of project you have:
- Browser project (an
.htmlfile exists) — writes/updates a<script type="importmap">block in your currently open HTML file, orindex.html, plus animportmap.json. - Node.js project (
package.jsonexists, no.html) — writes yourtsconfig.jsonpath aliases intopackage.json'simportsfield (e.g.@utils/*becomes#utils/*, as Node requires). - Chrome extension (
manifest.jsonfound) — Compilets won't generate an import map here on purpose. Manifest V3's security policy blocks inline import maps in extension pages, so one would just fail silently. Your internal@aliasimports are still rewritten to plain relative paths automatically, which works fine in extensions.
This tour is split into five short videos, each covering one part of the extension:
- Install & your first compile — the zero-config happy path. 🎥 Video coming soon — link will be added here.
- Watch mode & autostart — what happens automatically, and how to control it. 🎥 Video coming soon — link will be added here.
tsconfig.jsonas the source of truth — sourceMap, outDir, erasableSyntaxOnly, and path aliases. 🎥 Video coming soon — link will be added here.- Import Map generation — browser vs. Node.js, walked through end to end. 🎥 Video coming soon — link will be added here.
- Settings deep-dive — outputLocation, hideCompiledJsInExplorer, and the rest. 🎥 Video coming soon — link will be added here.
.tsxis not supported. Compilets is built for plain TypeScript compilation, not JSX/React-style workflows. If you need.tsx(or support for another UI framework's file type), please 👍 the existing request on GitHub if there is one, or open a new issue if there isn't — feature interest is tracked there, not guessed at.
If anything doesn't work the way this README says it should, please open an issue rather than suffer in silence. Reports are genuinely useful, even small ones.
Version 0.2.0 is a from-scratch rewrite, not an incremental update. Here's the shape of what changed:
| 0.1.x | 0.2.0 | |
|---|---|---|
| Compile engine | Requires a global npm i -g typescript install |
Node's built-in type-stripping + esbuild — no global install needed |
| Config source | Extension settings (module, jsx, etc.) |
Your real tsconfig.json, settings only fill gaps tsconfig can't express |
| Start on save | Manual "watch mode" command required | Autostart if the workspace has .ts files |
| Incremental compile | Broken — recompiled everything, every time | Fixed — only stale files recompile |
Path aliases (@utils/*) |
Not supported | Rewritten automatically to working relative imports |
| Sourcemaps | Not supported | Full support, reading tsconfig.json directly |
| Multi-root workspaces | Not supported | Supported, including nested tsconfig.json files |
| Compile errors | Output channel only | Also shown as Problems panel diagnostics |
| Import maps | Not supported | New: browser and Node.js import map generation |
JSX/.tsx |
Partially attempted, broken | Not supported (see Limitations) |
If you have existing compilets.* settings from a previous version, they've been replaced:
| Old setting (0.1.x) | What to do now |
|---|---|
compilets.config.module |
Remove it — set compilerOptions.module in your tsconfig.json instead. |
compilets.config.jsx |
Remove it — JSX isn't supported in 0.2.0. |
compilets.config.rootDirectory |
Replace with compilets.config.watchFolders (or just delete it — it now falls back to tsconfig.json's include, then "src"). |
compilets.config.outDirectory |
Replace with compilets.dedicatedOutputFolder, or just set compilerOptions.outDir in tsconfig.json. |
compilets.custom.runCompileCommand / runWatchCommand |
Removed entirely — no replacement. |
Old settings left in place are simply ignored by 0.2.0, not read. If compiled output looks different than you expect after updating, check your tsconfig.json first — it's now the thing actually in charge.
If Compilets isn't quite the right tool for your specific workflow, these might be:
- crx-hmr — need TypeScript compiling with hot-reload support for your Chrome extension?
crx-hmrbuilds that HMR workflow on top of the same automatic TypeScript compiling — save a.tsfile, get a.jsfile, and your extension reloads automatically. The only real difference from Compilets is that one feature: hot-reload. - vsx-hmr — building a VS Code extension with a webview?
vsx-hmris an npm package (not a VS Code extension) that gives your webview the same hot-reload experience during development.
GPL-3.0-only. Free, and will stay free.
Found a bug, or something confusing in this README? Open an issue