How to Create an ESLint Config Package in Turborepo

In a growing monorepo, maintaining consistent code quality across multiple apps and packages is crucial. One powerful way to do this is by creating a shared ESLint config package. In this post, I’ll walk you through how I set up a reusable ESLint config inside a Turborepo-based monorepo — perfect for full-stack projects using TypeScript, React, and Node.js.

✅ Related: How to Create a TypeScript Config Package in Turborepo

🧩 Step-by-Step: Creating the `@dtr-cli/eslint-config` Package

1. Create a Package Folder

Inside your packages folder, create a new directory for the ESLint config package:

mkdir -p packages/eslint-config
cd packages/eslint-config
npm init -y

2. Update the `package.json` with a proper name and export map:

{
  "name": "@dtr-cli/eslint-config",
  "version": "0.0.1",
  "description": "Shared Eslint configuration for @dtr-cli",
  "license": "ISC",
  "author": "Saiful Islam <saiful.islam.rafi.88@gmail.com>",
  "exports": {
    "./base-eslint-config": "./base-eslint-config.js",
    "./backend-eslint-config": "./backend-eslint-config.js",
    "./react-eslint-config": "./react-eslint-config.js",
    "./frontend-eslint-config": "./frontend-eslint-config.js",
    "./extension-eslint-config": "./extension-eslint-config.js",
    "./ui-eslint-config": "./ui-eslint-config.js"
  },
  "files": [
    "base-eslint-config.js",
    "backend-eslint-config.js",
    "react-eslint-config.js",
    "frontend-eslint-config.js",
    "extension-eslint-config.js",
    "ui-eslint-config.js"
  ],
  "devDependencies": {
    "@eslint/js": "^9.26.0",
    "@tanstack/eslint-plugin-query": "^5.74.7",
    "eslint-config-prettier": "^10.1.3",
    "eslint-plugin-react": "^7.37.5",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.20",
    "eslint-plugin-turbo": "^2.5.3",
    "globals": "^16.1.0",
    "typescript-eslint": "^8.32.0"
  }
}

3. Create Base ESLint Config

`base-eslint-config.js`

This config includes basic settings for TypeScript, TurboRepo, and Prettier:

import eslintJs from "@eslint/js";
import eslintConfigPrettier from "eslint-config-prettier";
import turboPlugin from "eslint-plugin-turbo";
import tseslint from "typescript-eslint";

export const baseEslintConfig = [
  eslintConfigPrettier,
  eslintJs.configs.recommended,
  turboPlugin.configs["flat/recommended"],
  ...tseslint.configs.recommended,
  {
    languageOptions: {
      ecmaVersion: 2020,
    },
    rules: {
      "turbo/no-undeclared-env-vars": "warn",
    },
  },
];

4. Create targeted ESLint config

🔧 `backend-eslint-config.js`

import globals from "globals";
import { baseEslintConfig } from "./base-eslint-config";

export const backendEslintConfig = [
  ...baseEslintConfig,
  {
    languageOptions: {
      globals: globals.node,
    },
  },
];

⚛️ `react-eslint-config.js`

import reactEslint from "eslint-plugin-react";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import globals from "globals";
import { baseEslintConfig } from "./base-eslint-config";

export const reactEslintConfig = [
  ...baseEslintConfig,
  reactEslint.configs.flat.recommended,
  reactHooks.configs["recommended-latest"],
  reactRefresh.configs.recommended,
  {
    settings: {
      react: { version: "19.1.0" },
    },
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    rules: {
      "react/react-in-jsx-scope": "off",
      "react/prop-types": "off",
      "react-refresh/only-export-components": [
        "warn",
        { allowConstantExport: true },
      ],
    },
  },
];

🧩 `frontend-eslint-config.js`

import { reactEslintConfig } from "./react-eslint-config";

export const frontendEslintConfig = [...reactEslintConfig];

🧪 `extension-eslint-config.js`

import { reactEslintConfig } from "./react-eslint-config.js";
import pluginQuery from "@tanstack/eslint-plugin-query";

export const extensionEslintConfig = [
  ...reactEslintConfig,
  ...pluginQuery.configs["flat/recommended"],
];

🎨 `ui-eslint-config.js`

import { reactEslintConfig } from "./react-eslint-config.js";

export const uiEslintConfig = [...reactEslintConfig];

Use the ESLint Config Package

In any project inside your monorepo, like apps/backend, create an eslint.config.mjs:

import { backendEslintConfig } from "@dtr-cli/eslint-config/backend-eslint-config";

/** @type {import("eslint").Linter.Config} */
export default [
  ...backendEslintConfig,
  {
    ignores: ["dist/**"],
  },
];

apps/frontend create an eslint-config.js

import { frontendEslintConfig } from "@dtr-cli/eslint-config/frontend-eslint-config";

/** @type {import("eslint").Linter.Config} */
export default [...frontendEslintConfig];

Final Thoughts

Having a centralized ESLint config package in your Turborepo setup is a massive productivity and consistency boost. Instead of rewriting and maintaining config files in every app, you can rely on one source of truth that scales with your repo.

This setup supports various contexts like backend, React apps, extensions, and UI libraries — making your developer experience smoother and your codebase cleaner.

Saiful Islam @saiful7778