mdx-tsc for VS Code
Live type-checking for MDX — the same checks as the
mdx-tsc CLI, as you type:
- MDX type errors,
{expression} checks, and JSX component props
- provided components (
MDXProvider / mdx-components.tsx)
- frontmatter typing and value validation against your schema
Use it alongside the official MDX extension
mdx-tsc is additive — it publishes only type/frontmatter diagnostics and
nothing else, so it complements the official
MDX extension
rather than replacing it:
- Keep the official MDX extension installed (highlighting, hover,
completion, markdown features, parse errors).
- Install mdx-tsc for the type + frontmatter squiggles.
- In your
tsconfig.json, set "mdx": { "checkMdx": false } so the
official extension stops emitting type errors — mdx-tsc owns those now, so
they aren't reported twice.
Requirements
Your project needs a tsconfig.json that includes your .mdx files. Frontmatter
schemas are declared in the "mdx" section. See the main
mdx-tsc README.
Develop
From the repo root:
pnpm install
pnpm build # builds the mdx-tsc server, then bundles this extension
Press F5 (Test mdx-tsc extension (playground)) to open an
Extension Development Host with the demo project loaded.
The extension and the language server are bundled with esbuild into
dist/extension.js and dist/server.js, so the packaged .vsix is
self-contained. The TypeScript SDK is resolved via @volar/vscode
(typescript.tsdk setting or VS Code's bundled TypeScript), so checking matches
your workspace.
Publishing
Build a .vsix and upload it to the Marketplace manually:
pnpm --filter mdx-tsc-vscode run package
# -> editors/vscode/mdx-tsc-vscode-<version>.vsix
