ts-setup

VSCode TypeScript + ESM Setup Guide (with ts-node and Debugging)

This guide sets up a clean TypeScript development environment in VSCode using:

• Node.js with native ESM
• ts-node for on-the-fly TypeScript execution
• VSCode launch.json for debugging
• Code Runner plugin for quick .ts execution
• Clean tsconfig.json using:

  tsc --init --sourceMap --rootDir src --outDir dist .

---

✅ 1. Initialize Your Project

npm init -y
npm install -D typescript ts-node

---

✅ 2. Setup tsconfig.json

Run:

tsc --init --sourceMap --rootDir src --outDir dist .

Then edit your tsconfig.json like this:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "node",
    "outDir": "dist",
    "rootDir": "src",
    "sourceMap": true,
    "esModuleInterop": true,
    "strict": true
  },
  "ts-node": {
    "esm": true
  },
  "include": ["src"]
}

---

✅ 3. Add "type": "module" to package.json

This is required for native ESM support:

{
  "type": "module"
}

---

✅ 4. Setup VSCode launch.json (F5 to Debug)

1. Press Ctrl+Shift+D in VSCode → Create a launch.json file

2. Replace with:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug TypeScript (ESM)",
      "runtimeExecutable": "node",
      "runtimeArgs": [
        "--loader",
        "ts-node/esm"
      ],
      "program": "${workspaceFolder}/src/index.ts",
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

🔹 Adjust src/index.ts if your entry file differs.

---

✅ 5. Setup settings.json for Code Runner Plugin

To run .ts files using Ctrl+Alt+N or the Run Code button:

1. Open Command Palette → Preferences: Open Settings (JSON)

2. Add this to your settings.json:

{
  "code-runner.executorMap": {
    "typescript": "node --no-warnings --loader ts-node/esm"
  },
  "code-runner.runInTerminal": true,
  "code-runner.clearPreviousOutput": true
}

---

✅ 6. Test It

Create a test file: src/index.ts

console.log("✅ TypeScript + ESM is working!");

• Press F5 to debug

• Press Ctrl+Alt+N to run via Code Runner

---

📦 Summary

Feature	Config File	Purpose
TypeScript Project	tsconfig.json	Compiler + ts-node settings
ESM Support	package.json	”type”: “module” for ESM
Debug with F5	launch.json	Use ts-node/esm loader
Run with Code Runner	settings.json	Run .ts via Code Runner plugin

---

✅ Done!

You now have a modern VSCode setup for TypeScript + ESM with debugging and fast script execution.