DEV Community

Cover image for ESLint Flat Config (v9) Setup for TypeScript: A Clean, Scalable Guide
Ankesh Sharma
Ankesh Sharma

Posted on

ESLint Flat Config (v9) Setup for TypeScript: A Clean, Scalable Guide

#eslint #webdev #productivity

Intro

With the release of ESLint v9, flat config is now the standard.

But most TypeScript projects are still using outdated .eslintrc setups.

If you're searching for:

  • ESLint flat config TypeScript setup
  • ESLint v9 configuration guide
  • modern ESLint config example

This guide shows a clean, scalable approach that works in real projects.

Why ESLint flat config matters

Flat config isn’t just a syntax change.

It solves real problems:

  • simpler configuration structure
  • better performance
  • easier composition across projects
  • future-proof with ESLint v9+

If you're still using .eslintrc, you're working against the direction ESLint is moving.

Where to put the config

Create this file at the root of your project:

eslint.config.js
Enter fullscreen mode Exit fullscreen mode

ESLint automatically detects this in v9.

Installation 

npm install -D eslint @iamankeshsharma/eslint-config
Enter fullscreen mode Exit fullscreen mode

Basic TypeScript setup (flat config) 

// eslint.config.js

import config from "@iamankeshsharma/eslint-config";

export default config();
Enter fullscreen mode Exit fullscreen mode

This gives you:

  • TypeScript support
  • import sorting
  • modern JavaScript best practices
  • Prettier compatibility

Project structure example 

your-project/
├── src/
├── eslint.config.js
├── package.json
└── tsconfig.json
Enter fullscreen mode Exit fullscreen mode

What this setup handles

TypeScript support

  • proper parsing
  • type-aware linting
  • consistent patterns

Code quality

  • catches subtle bugs early
  • prevents unsafe patterns
  • enforces modern syntax

Import organization

  • consistent ordering
  • cleaner diffs
  • better readability

Customization 

// eslint.config.js

import config from "@iamankeshsharma/eslint-config";

export default config({
  rules: {
    "no-console": "warn",
  },
});
Enter fullscreen mode Exit fullscreen mode

Running ESLint

Add script:

{
  "scripts": {
    "lint": "eslint ."
  }
}
Enter fullscreen mode Exit fullscreen mode

Run:

npm run lint
Enter fullscreen mode Exit fullscreen mode

Common mistakes with flat config

  • mixing .eslintrc with eslint.config.js
  • not placing config at project root
  • manually combining plugins incorrectly
  • ignoring TypeScript-specific rules

Why this scales better

In multi-project environments:

  • one shared config
  • consistent rules everywhere
  • faster onboarding
  • fewer PR discussions

Used across multiple projects to standardize code quality and reduce PR noise.

The key idea

Flat config makes ESLint composable.

That means you can treat linting as:

A system — not a per-project setup.

Try it

If you're setting up ESLint for TypeScript with flat config:

Check it here:
@iamankeshsharma/eslint-config

EsLint Config for Next.js

Final thought

The biggest benefit of modern ESLint setups isn’t stricter rules.

It’s removing inconsistency before it spreads.

Top comments (0)