Welcome to your first-class ticket into the TypeScript universe—carry-on baggage: curiosity, swagger, and a dash of pragmatism. This guide will get you from zero to "oh wow, this is clean" using Bun as your runtime, modern linting with OXC or Biome, a tiny-but-mighty type utility, and a VS Code setup that feels like cheating (but isn't).
Why Bun? #
Because it's fast, batteries-included, and actually fun to use. Bun is a runtime, package manager, bundler, and test runner rolled into one. Less tool glue, more building.
Quick hits:
- Blazing-fast installs and runs
- First-class TypeScript support
- Built-in test runner, bundler, and more
If you want a great overview of what Bun brings to the table, start here: blog.seancoughlin.me. For a simple REST server with Bun.serve, check out this walkthrough: dev.to.
Official docs: bun.sh
Project Bootstrap with Bun #
Spin up a fresh TS project and keep the vibe minimal:
bun init
Run scripts with:
bun run dev bun test
Bun's comfy defaults mean you'll write less config and more code. If you enjoy production-ready scaffolding with TS + linting and editor integration, this piece is a nice companion read: vdelacou.medium.com.
The Prettify Helper (Type-Level Clarity) #
Sometimes TypeScript types can look like a Jackson Pollock painting—beautiful but… chaotic. A small utility known as "Prettify" can make your inferred types readable by flattening and normalizing their structure:
type Prettify<T> = { [K in keyof T]: T[K]; } & {};
Use it when:
- You want cleaner hover tooltips in VS Code
- You're debugging a gnarly generic type
- You want to "lock in" a simplified shape for DX
Example:
type Result = { a: string } & { b: number }; type PrettyResult = Prettify<Result>; // shows as { a: string; b: number }
It's not runtime code—it's purely for developer ergonomics. Keep it handy and your future self will high-five you.
Linting: OXC or Biome #
TypeScript thrives with good guardrails. Two modern options:
- OXC (linting-first, performance-focused)
- A next-gen linter designed for speed and modern JS/TS.
- Integrates nicely with editors.
- The ecosystem around OXC is evolving quickly; it focuses on linting and aims for great DX. It's also exploring type-check synergies via external tools.
- Project: oxc.rs
- Biome (linter + formatter)
- All-in-one: lints, formats, and speeds up your workflow with a single tool.
- Great defaults, strong perf, minimal config.
- Project: biomejs.dev
Note on formatting: Biome ships a formatter today. The OXC project has indicated they plan to launch their own formatter, which will give you more flexibility if you want to stay in a single ecosystem.
Pick one:
- Want a "single binary" that lints and formats now? Choose Biome.
- Want to bet on a fast linter and keep formatting flexible? Choose OXC (and pair it with your formatter of choice today).
For a broader take on modern linting/formatting stacks and editor integration, see this write-up: onwebfocus.com.
Editor Setup: VS Code Extensions You'll Actually Use #
These aren't fluff—they directly sharpen your feedback loop and code quality.
Error Lens #
Error visibility that doesn't suck: Error Lens inlines diagnostics directly in your code instead of making you hunt through the Problems panel. Instant visibility means instant fixes, and your debugging speed will thank you.
Pretty TypeScript Errors #
TypeScript errors made human: Ever stared at a cryptic TS error that looked like it was written by aliens? Pretty TypeScript Errors translates those hieroglyphics into readable, actionable messages. Less time deciphering, more time shipping.
Type Challenges #
Level up your type game: Type Challenges brings the famous TypeScript challenges right into your editor. Think of it as daily type kung-fu practice—small reps that build stronger types and fewer bugs over time.
Turbo Console Log #
Smart logging without the tedium: Turbo Console Log generates contextual console.log statements fast. When you need to trace execution without writing repetitive logs, this saves serious time.
Better Comments & Comment Anchors #
Comments that actually communicate: Two extensions work beautifully together here. Better Comments styles your comments with colors and categories (alerts, todos, highlights), while Comment Anchors creates navigable anchors like TODO and FIXME across your entire project. Your intentions pop visually, and your team gets a navigable map of work-in-progress.
Code Spell Checker #
Clean copy everywhere: Code Spell Checker catches typos in code, comments, and strings. It's low noise but high value—clean copy matters in APIs, docs, and variable names.
Pair these with your linter's VS Code integration for on-save lint/format and you'll have a buttery editing experience. For deeper thoughts on integrating lint/format into editor workflows, check out onwebfocus.com.
A Minimal Dev Loop You'll Love #
- bun install
- bun run dev (or bun run start)
- Lint on-save with OXC or Biome
- Test with bun test
- Use Prettify to simplify debugging complex TS types
The goal: feedback in seconds, not minutes.
Bonus: TDD with Bun (Optional, but tasty) #
Bun includes a test runner, so you can write tests first and code with confidence. If you want a primer on TDD mindset and TypeScript workflows, this article gives a gentle ramp, even if it's not Bun-specific: medium.com.
- Bun keeps your toolchain tight and fast. Docs: bun.sh
- Use Prettify to make complex types human-friendly.
- Choose OXC or Biome for a modern linting experience. Projects: oxc.rs, biomejs.dev
- Supercharge VS Code with targeted extensions that reduce friction and boost clarity.
That's it for now; it will continue. You've got the gear—time to build something crisp.