How to Set Up Visual Studio Code for TypeScript Development

If you’ve already learned how to set up a TypeScript project, the next step is getting your editor ready. In this post, we’ll walk through how to set up Visual Studio Code (VS Code) for smooth and efficient TypeScript development.

---

⚙️ Before you begin:

1. If you haven’t installed TypeScript or created a project yet, read this first: How to Install TypeScript and Set Up a Project. It covers installing Node.js, initializing a project, and compiling your first .ts file.
2. If you have not installed visual studio code, install VS Code and get familiar with the menu options at Getting Started with Visual Studio Code (VS Code).

---

🧰 Step 1: Open Your TypeScript Project in VS Code

Since you already have both TypeScript and VS Code installed, let’s open your project.
You can do this in one of two ways:

• From the VS Code start screen, click “Open Folder” and select your project folder (for example, my-typescript-app).
• Or, from your terminal, run: code my-typescript-app

Once the folder is open, you’ll see your files in the Explorer sidebar on the left.

---

⚙️ Step 2: Make Sure TypeScript Is Installed

If you followed the prerequisites, you should already have TypeScript installed locally. To check, open VS Code’s terminal (Ctrl + ~ or View → Terminal) and run:

npx tsc -v

If you see a version number, you’re all set!

---

🧩 Step 3: Install Recommended Extensions

VS Code becomes much more powerful with extensions.
Here are a few must-have ones for TypeScript development:

Extension	Purpose
ESLint	Detects and fixes code errors and style issues
Prettier	Automatically formats your code
Path Intellisense	Helps with file imports by suggesting file paths
Code Runner (optional)	Lets you run code directly from the editor

To install an extension:

• Click the Extensions icon on the left sidebar (Ctrl + Shift + X)
• Search for the name
• Click Install

---

🧠 Step 4: Use the Workspace TypeScript Version

By default, VS Code may use its built-in TypeScript version.
It’s best to make it use your local project’s version for consistency.

1. Press Ctrl + Shift + P (or Cmd + Shift + P on Mac)
2. Type TypeScript: Select TypeScript Version
3. Choose Use Workspace Version

This ensures VS Code uses the same TypeScript version you installed in your project.

---

🧱 Step 5: Add a Build Script (Optional)

To make it easy to compile your code from VS Code’s terminal, add a build script to your package.json:

"scripts": {
  "build": "tsc"
}

Now, you can compile your project with:

npm run build

---

🐞 Step 6: Enable Debugging (Optional)

VS Code lets you debug your TypeScript code directly.
To enable this, create a folder named .vscode in your project and add a file named launch.json inside it.

Example launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/dist/index.js"
    }
  ]
}

Now, click the Run and Debug icon on the sidebar and start debugging!

---

🪄 Step 7: Format Code Automatically

To keep your code clean, you can make VS Code automatically format it every time you save.
Open your Settings (Ctrl + ,), search for “Format on Save,” and enable it.

Or, add this to your settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

---

🎁 Bonus: About the dist Folder

When you compile your TypeScript code using:

npx tsc

or

npm run build

TypeScript converts your .ts files into .js files.
By default, it places the compiled files in the same folder as your source code (for example, inside src/).

However, many projects prefer to keep compiled JavaScript files in a separate folder — often named dist — to keep things clean and organized.

To do this, open your tsconfig.json file and inside the "compilerOptions" section, add these lines:

{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist"
  }
}

Then recompile your code using:

npx tsc

or

npm run build

Your project will now look like this:

src/
  index.ts
dist/
  index.js
  index.js.map
  index.d.ts
  index.d.ts.map

💡 Note – About the Files in the dist Folder:

• index.js → The compiled JavaScript file that runs on Node.js or browsers.
• index.js.map → A source map that helps debug TypeScript code.
• index.d.ts → A type definition file describing your code’s types.
• index.d.ts.map → A source map for the type definitions.

These extra files are created automatically by TypeScript to make debugging and reuse of your code easier.

---

🎯 In Summary

You’ve now set up Visual Studio Code for TypeScript development with:

• Syntax highlighting and type checking
• Auto-formatting and linting
• Easy builds and debugging

With this setup, VS Code becomes a full-featured TypeScript IDE — ready for smooth development from writing code to running it.