Turborepo Eslint config not applying

Question

I created a Turborepo testing project and I wanted to try if ESlint config that it's set in the root of the Turborepo applies to all of the projects inside my /apps folder, turns out it does not work for me... Where did I mess up ? I was following this article .

/packages/esling-config-custom/index.js

module.exports = {
  extends: ["next", "turbo", "prettier"],
  rules: {
    "no-console": 2,
    "@next/next/no-html-link-for-pages": "off",
  },
};

.eslintrc.js (root of Turborepo)

module.exports = {
  root: true,
  // This tells ESLint to load the config from the package `eslint-config-custom`
  extends: ["custom"],
  settings: {
    next: {
      rootDir: ["apps/*/"],
    },
  },
};

/apps/testing-app/.eslintrc.js

module.exports = {
  ...require("eslint-config-custom/index"),
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: "./tsconfig.json",
  },
};

/apps/testing-app/package.json

{
  "name": "testing-app",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@headlessui/react": "^1.7.2",
    "@heroicons/react": "^2.0.10",
    "@stripe/react-stripe-js": "^1.13.0",
    "@stripe/stripe-js": "^1.41.0",
    "@supabase/supabase-js": "^2.0.0-rc.10",
    "@tailwindcss/line-clamp": "^0.4.2",
    "@tanstack/react-query": "^4.3.4",
    "axios": "^0.27.2",
    "daisyui": "^2.25.0",
    "framer-motion": "^7.3.2",
    "next": "12.2.5",
    "next-transpile-modules": "^10.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "stripe": "^10.14.0",
    "ui": "*"
  },
  "devDependencies": {
    "@types/node": "18.7.16",
    "@types/react": "18.0.18",
    "@types/react-dom": "18.0.6",
    "autoprefixer": "^10.4.8",
    "eslint": "8.23.0",
    "postcss": "^8.4.16",
    "prettier": "^2.7.1",
    "prettier-plugin-tailwindcss": "^0.1.13",
    "tailwindcss": "^3.1.8",
    "tsconfig": "*",
    "eslint-config-custom": "*",
    "typescript": "4.8.2"
  }
}

/apps/testing-app/pages/index.tsx

 import type { NextPage } from "next";
    
    const Home: NextPage = () => {
      return (
        <h1 className="text-3xl font-bold underline">
          Hello world!<>{console.log("hey")}</> //I should get an error here which I don't...
        </h1>
      );
    };
    
    export default Home;

I have a similar setup, checked replacing some configs with what you have and it worked. Do you have installed the VSCode eslint extension? — Rodrigo, Apr 20 '23 at 18:57

score 0 · Answer 1 · answered May 13 '23 at 19:36

0

Try removing root: true in your top-level .eslintrc.js file; for me this was mucking up ESLint's idea of what the app root was supposed to be per app.

answered May 13 '23 at 19:36

seawolf

2,147
3
20
37

score 0 · Answer 2 · answered Jun 08 '23 at 09:19

The thing is turborepo's eslint setting is kinda weird because they set their eslint-config-custom name in package.json as "eslint-config-custom" but put "custom" in all eslint configuration instead.

What you have to do is change your extends property to match eslint-config-custom name in package.json.

Check this image to see what I mean by name