Configuring Prettier & ESLint for TypeScript/JavaScript Projects

Introduction

Maintaining consistent code style and quality across a team can be challenging, especially in large TypeScript or JavaScript projects. However, combining Prettier and ESLint provides an elegant solution. Together, they automatically format code, detect common issues, and enforce shared rules — making collaboration smoother and reducing review friction. In this post, you’ll learn how to configure Prettier and ESLint step by step for modern projects.

Why Use Prettier and ESLint Together

Although both tools deal with code quality, they serve different purposes. Understanding the distinction helps you configure them correctly.

• Prettier focuses on code formatting — line length, spacing, quotes, semicolons, etc.
• ESLint focuses on code correctness — unused variables, missing imports, or unsafe syntax.

When integrated, ESLint ensures your code follows best practices, while Prettier handles how it looks. As a result, your project stays consistent and error-free.

Step 1: Install Dependencies

First, install both tools along with the TypeScript and Prettier integrations.

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

Here’s what each package does:

• eslint — The main linter.
• prettier — The formatter.
• eslint-config-prettier — Turns off ESLint rules that conflict with Prettier.
• eslint-plugin-prettier — Runs Prettier as an ESLint rule.
• @typescript-eslint/parser — Lets ESLint understand TypeScript syntax.
• @typescript-eslint/eslint-plugin — Adds TypeScript-specific rules.

Step 2: Create an ESLint Configuration File

Next, create a file called .eslintrc.json in your project root and add the following:

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["@typescript-eslint"],
  "env": {
    "es2021": true,
    "node": true,
    "browser": true
  },
  "rules": {
    "no-unused-vars": "warn",
    "@typescript-eslint/no-explicit-any": "off"
  }
}

This setup ensures ESLint and Prettier work side by side without conflicts.

Step 3: Configure Prettier

Create a .prettierrc file to define your formatting preferences:

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2
}

You can adjust these settings to match your team’s style. For example, some teams prefer semi: false or double quotes.

Step 4: Ignore Files

It’s important to exclude certain directories from linting and formatting. Add these files:

.eslintignore:

node_modules  
dist  
build  

.prettierignore:

node_modules  
dist  
build  
package-lock.json  

Ignoring generated or vendor files prevents unnecessary checks and speeds up linting.

Step 5: Add NPM Scripts

Now automate formatting and linting in your package.json:

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

Running these commands ensures everyone formats and lints code consistently:

npm run lint
npm run lint:fix
npm run format

Step 6: Integrate with VS Code

To make the experience seamless, install the ESLint and Prettier extensions in VS Code. Then, open Settings (Ctrl + ,) and search for “Format on Save.” Enable it and set the default formatter to Prettier.

Bonus Tip: Add a workspace-level .vscode/settings.json file:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": ["javascript", "typescript"]
}

Now, every time you save, Prettier and ESLint will run automatically.

Step 7: Optional – Combine with Git Hooks

To prevent unformatted or buggy code from being committed, integrate your setup with Husky and lint-staged.

npm install --save-dev husky lint-staged
npx husky install

Then, add this configuration in package.json:

{
  "lint-staged": {
    "*.{ts,tsx,js,jsx}": ["eslint --fix", "prettier --write"]
  }
}

As a result, only staged files will be linted and formatted before each commit.

Common Mistakes to Avoid

• Don’t run Prettier separately from ESLint without using eslint-config-prettier; otherwise, rules may conflict.
• Avoid formatting third-party code in node_modules.
• Don’t ignore lint warnings — they often point to potential bugs.

By addressing these issues early, your project stays cleaner and easier to maintain.

Final Thoughts

Combining Prettier and ESLint gives your TypeScript and JavaScript projects both consistency and quality. You’ll save time in reviews, reduce merge conflicts, and write cleaner, more maintainable code. Once configured, this setup requires little upkeep but offers massive productivity benefits. To take it further, read Using Git Hooks to Automate Code Quality Checks for an extra layer of automation. For official docs, check out the Prettier configuration guide and the ESLint documentation.