Install and configure ESLint + Prettier for code quality

Introduction

Now that you've set up your Node.js project, initialized npm, and configured TypeScript, it's time to focus on maintaining code quality and consistency. In this topic, we'll walk through installing and configuring ESLint and Prettier—two essential tools for keeping your TypeScript code clean, readable, and error-free. This foundation will help you avoid common pitfalls as you start writing Playwright tests and TypeScript code in the next checkpoints.

What Are ESLint and Prettier?

• ESLint is a popular tool for analyzing your code to find problems such as syntax errors, potential bugs, or style issues. It helps enforce coding standards and best practices.
• Prettier is an opinionated code formatter. It automatically formats your code to ensure consistency in things like indentation, spacing, quotes, and semicolons.

Using both together ensures your TypeScript code is not only correct but also consistently styled—making it easier to read, maintain, and collaborate on.

Installing ESLint and Prettier in a TypeScript Project

Let’s start by installing the necessary packages. Since you're using TypeScript, you'll need some extra plugins for proper support:

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin

💡 Pro Tip: Always use the --save-dev flag for tools that are only needed during development. This keeps your production dependencies lean.

Configuring ESLint for TypeScript

Next, let’s set up an ESLint configuration file. The easiest way is to use the ESLint CLI:

npx eslint --init

When prompted:

• Choose: "To check syntax, find problems, and enforce code style"
• Select: "JavaScript modules (import/export)"
• Pick: "TypeScript"
• Choose a style guide or "None of these" if you want full control
• Select: "JSON" or "JavaScript" for the config file format

Minimal .eslintrc.json for TypeScript

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    // You can customize rules here
  }
}

Configuring Prettier and Integrating with ESLint

Create a basic Prettier config file called .prettierrc:

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 80
}

• eslint-config-prettier disables ESLint rules that might conflict with Prettier
• eslint-plugin-prettier runs Prettier as an ESLint rule so formatting issues appear in your lint output

With this setup, running ESLint will check both code quality and formatting!

Running ESLint and Prettier on Your Codebase

You can now add scripts to your package.json to easily lint and format your code:

{
  "scripts": {
    "lint": "eslint . --ext .ts,.tsx",
    "format": "prettier --write ."
  }
}

💡 Pro Tip: Run npm run lint regularly to catch issues early. Use npm run format before committing to keep your codebase tidy.