Skip to Content

Setup

Three packages, one lint.config.ts, one VS Code extension. Five minutes.

Requirements

  • Node.js 18 or later.
  • A TypeScript project: anything with a tsconfig.json works.

ttsc CLI

The standalone path: ttsc type-checks, lints, and emits from the command line.

Install

npm install -D ttsc @ttsc/lint typescript@rc

pnpm / yarn / bun work the same way (substitute add for install).

typescript is the TypeScript-Go native compiler that ttsc runs on. The TypeScript team versions it separately, so it’s a sibling package, pin it in your project and ttsc picks it up from node_modules.

tsconfig.json

If you don’t already have one:

{ "compilerOptions": { "target": "ES2022", "module": "NodeNext", "moduleResolution": "NodeNext", "strict": true, "outDir": "dist", "rootDir": "src", }, "include": ["src"], }

Same shape as a tsc project, ttsc reads the same fields.

lint.config.ts

Drop this next to tsconfig.json so @ttsc/lint knows which rules to enable:

// lint.config.ts import type { ITtscLintConfig } from "@ttsc/lint"; export default { rules: { "no-var": "error", "prefer-const": "error", "typescript/no-explicit-any": "warning", }, format: { printWidth: 100, singleQuote: true, trailingComma: "all", }, } satisfies ITtscLintConfig;

rules sets severity per lint rule. format is a Prettier-style block, the keys mirror .prettierrc. See Lint & Prettier for the full catalog.

First build

// src/index.ts function greet(name: string): string { return `hello, ${name} — running on ttsc`; } console.log(greet("world"));
npx ttsc # type-check + lint + emit to dist/ npx ttsc --noEmit # type-check + lint only (CI form) npx ttsc --watch # watch mode npx ttsc fix # autofix every fixable lint and format violation npx ttsc format # rewrite source files with the format rules node dist/index.js # run the emit

From here you can run a script directly with npx ttsx src/index.ts (type-checks, then executes, see TTSC · Execute), or add a transform plugin like typia for runtime validators generated from your types.

Bundlers (@ttsc/unplugin)

When a bundler owns the build, the ttsc CLI never runs, so its plugin pass would be skipped. @ttsc/unplugin runs the same pass from inside the bundler.

Install

npm install -D @ttsc/unplugin

Add the adapter for your bundler. It reads the same tsconfig.json, so your plugins and lint.config.ts apply unchanged, no extra config for most projects.

Vite

// vite.config.ts import ttsc from "@ttsc/unplugin/vite"; import { defineConfig } from "vite"; export default defineConfig({ plugins: [ttsc()], });

Rollup

// rollup.config.ts import ttsc from "@ttsc/unplugin/rollup"; export default { input: "src/index.ts", output: { dir: "dist", format: "esm" }, plugins: [ttsc()], };

Other bundlers

Adapters ship for Vite, Rollup, Rolldown, esbuild, Webpack, Rspack, Next.js, Turbopack, Farm, and Bun. Import the entrypoint that matches your bundler (@ttsc/unplugin/webpack, @ttsc/unplugin/esbuild, and so on). See Bundler integration for every adapter, the project / compilerOptions / plugins options, and watch-mode behavior.

React Native / Expo (@ttsc/metro)

React Native and Expo bundle with Metro, not a web bundler, so the ttsc CLI and @ttsc/unplugin never run.

@ttsc/metro is a Metro transformer that runs the same plugin pass on each TypeScript file, then hands the result to your existing Expo or React-Native Babel transformer.

Install

npm install -D @ttsc/metro

metro.config.js

// Expo (CommonJS, the standard for metro.config.js) const { getDefaultConfig } = require("expo/metro-config"); const { withTtsc } = require("@ttsc/metro"); module.exports = withTtsc(getDefaultConfig(__dirname));

For bare React Native, wrap getDefaultConfig from @react-native/metro-config instead. It reads the same tsconfig.json, so your plugins and lint.config.ts apply unchanged. See Bundler integration for the options and the v1 caveats.

Editor (VS Code)

The VS Code extension reads your project’s ttsc setup, so editor diagnostics match your build.

Install

Install it from the VS Code Marketplace: open the Extensions view, search ttsc, and pick the one by samchon. From a shell:

npx @ttsc/vscode

What it adds:

  • TypeScript-Go hover, navigation, completions, and diagnostics.
  • Supported ttsc plugin diagnostics and actions. @ttsc/lint adds lint diagnostics plus fix-all and format actions.
  • Format on save with @ttsc/lint’s format rules: formats the live (unsaved) buffer on every save. Lint fixes stay off-save by default. Enable it below.
  • Multi-root workspaces are supported. Add packages as VS Code workspace folders when each package should keep its own ttsc, typescript, and plugin config active.
  • Command Palette: ttsc: Restart language server, ttsc: Fix all lint issues, and ttsc: Format document. The lint and format commands need a plugin that provides them, such as @ttsc/lint.

If diagnostics don’t appear after install, open View → Output, select ttsc from the dropdown, and read the server log.

Format on save

Point the default formatter at samchon.ttsc and enable editor.formatOnSave in .vscode/settings.json:

"[typescript][typescriptreact]": { "editor.defaultFormatter": "samchon.ttsc", "editor.formatOnSave": true }

Lint fixes stay off-save by default (they can change code meaning), opt in with "editor.codeActionsOnSave": { "source.fixAll.ttsc": "explicit" }.

Full reference: @ttsc/vscode.

Coding agents (@ttsc/graph)

@ttsc/graph gives a coding agent a checker-resolved map of your project, over MCP.

It answers what relates to a symbol and its blast radius, and it surfaces the project’s full diagnostics — type errors, @ttsc/lint violations, and transform-plugin findings — so the agent stops grepping and re-reading source.

Because both come from one warm checker, the graph also shows a change’s reach over what is currently broken, before the edit.

Install

npm install -D ttsc @ttsc/graph typescript@rc

@ttsc/graph resolves the native ttscgraph binary from the ttsc platform package, so ttsc must be installed.

Configure your agent

Add the server to your MCP client. For Claude Code:

{ "mcpServers": { "ttsc-graph": { "command": "npx", "args": ["-y", "@ttsc/graph"] } } }

Start the agent from your project root, or pass --cwd and --tsconfig. Usage guidance is delivered in the MCP initialize response; the server never writes into your CLAUDE.md or AGENTS.md. On the project-specific prompt-file slice of codegraph’s agent-cost benchmark, Claude agents answer reading zero files, cutting tokens by 77% to 86% and tool calls by 94% to 95%; see Code Graph and its Benchmark.

See also

  • FAQ: common questions, gotchas, and migration tips.
  • TTSC · Compile: every flag and subcommand.
  • Lint & Prettier: lint.config.ts, the rule catalog, and the format block.
Last updated on