Supercharge Your TypeScript Workflow: ESLint, Prettier, and Build Tools

Introduction

TypeScript has become the go-to language for modern JavaScript developers, offering static typing, better tooling, and improved maintainability. But writing clean and efficient TypeScript isn’t just about knowing the syntax, it’s about using the right tools to enhance your workflow.

In this blog, we’ll explore essential TypeScript tools like ESLint, Prettier, tsconfig settings, and VS Code extensions to help you write better code, catch errors early, and boost productivity. By the end, you’ll have a fully optimized TypeScript development environment with links to quality resources to deepen your knowledge.

Why Tooling Matters in TypeScript Development

Unlike JavaScript, TypeScript enforces static typing and requires compilation. This means proper tooling can:
✅ Catch syntax and type errors early.
✅ Ensure consistent formatting across your project.
✅ Improve code maintainability and collaboration.
✅ Enhance debugging and refactoring efficiency.

Now, let’s dive into the must-have TypeScript tools for an optimal workflow!

Setting Up ESLint for TypeScript 🛠

ESLint is a linter that helps catch errors, bad practices, and inconsistencies in your TypeScript code.

Installing ESLint in a TypeScript Project

First, install the required packages for ESLint, TypeScript, and our tooling:

npm install --save-dev eslint @eslint/js typescript typescript-eslint

 Configuring ESLint

Create an eslint.config.mjs file in your project root and populate it with the following:

// TS-check

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  eslint.configs.recommended,
  tseslint.configs.recommended,
);

This setup:
✅ Uses TypeScript parser to understand TypeScript syntax.
✅ Enables recommended TypeScript rules to enforce best practices.
✅ Disables some strict rules for flexibility (can be adjusted later).

Running ESLint

To check your code for errors, run:

pnpm eslint .

💡 Pro Tip: Add "lint": "pnpm eslint ." in package.json scripts to run ESLint easily with pnpm lint.

ESLint will lint all TypeScript compatible files within the current folder, and will output the results to your terminal.

Optimizing tsconfig.json for Better Type Safety

TypeScript’s compiler settings (tsconfig.json) control how TypeScript checks and compiles your code.

Recommended tsconfig.json Setup

💡 Pro Tip: Use tsc --noEmit to check for type errors without compiling the code.

Debugging TypeScript in VS Code 🐞

VS Code provides built-in debugging for TypeScript.

 Setting Up Debugging

• Go to Run & Debug (Ctrl + Shift + D) → Click "Create a launch.json file".
• Select "Node.js".
• Modify .vscode/launch.json:

Run the debugger by pressing F5.

💡 Pro Tip: Set breakpoints in .ts files and VS Code will map them correctly to .js files using source maps.

Best VS Code Extensions for TypeScript

Boost your productivity with these must-have extensions:
✅ Prettier ESLint TypeScript Formatter – Formats TypeScript code through Prettier, then through ESLint.

✅ Path Intellisense – Auto-suggests import paths.

✅ Error Lens – Highlights TypeScript errors inline.

MS Learn Resources to Deepen Your Knowledge 📚

Here are some official Microsoft Learn resources to help you master TypeScript tooling:
Using ESLint and Prettier in Visual Studio Code
Linting JavaScript/Typescript in Visual Studio

Getting Started with ESLint