Turborepo Eslint配置未生效。

Question

Turborepo Eslint配置未生效。

8

我创建了一个Turborepo测试项目，并想尝试在我的/apps文件夹中的所有项目中应用设置在Turborepo根目录中的ESlint配置，结果并没有起作用...我搞错了哪里吗？我正在遵循这篇文章：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（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;

- Floky99

遇到了相同的问题 :\ - Denny

有任何解决方案吗？我也是。 - Nightcrawler

我有一个类似的设置，尝试用你的一些配置替换后它可以正常工作。你安装了VSCode eslint扩展吗？ - Rodrigo

3个回答

0

尝试在顶层的 .eslintrc.js 文件中删除 root: true；对我来说，这会混淆 ESLint 对每个应用程序所需的应用程序根目录的理解。

- seawolf

0

事情是turborepo的eslint设置有点奇怪，因为他们将package.json中的eslint-config-custom命名为"eslint-config-custom"，但在所有的eslint配置中却使用了"custom"。

你需要做的是将你的extends属性更改为与package.json中的eslint-config-custom名称匹配。

查看这张图片以了解我所说的"name"是什么意思。

将 extends 属性设置为 package.json 文件中 eslint-config-custom 的名称。

我的自定义规则

新的 eslint 规则现在已经生效。

希望这能帮到你！

- Mikeul

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- darioblanco · Accepted Answer

我按照以下步骤解决了这个问题。

对于VSCode的ESLint集成，我创建了一个名为.vscode/settings.json的文件，并添加了以下内容：

{
  "eslint.workingDirectories": [{ "mode": "auto" }]
}

然后我从eslint-config-custom中移除了任何动态路径加载，并将其放在每个包中的.eslintrc.cjs文件中，例如：

const { join } = require("node:path");

const rootDir = join(__dirname, "..", "..");
const project = join(__dirname, "tsconfig.json");

module.exports = {
  extends: ["custom/next"],
  parserOptions: {
    project,
  },
  rules: {
    "import/no-extraneous-dependencies": [
      "error",
      { packageDir: [rootDir, __dirname] },
    ],
  },
  settings: {
    "import/resolver": {
      alias: {
        extensions: [".ts", ".tsx"],
        map: [
          ["@", join(__dirname, "src")],
          ["#", join(__dirname, "__tests__")],
        ],
      },
      typescript: {
        project,
      },
    },
    next: {
      rootDir,
    },
  },
};

这是一个高级的例子，在大多数情况下，这样的东西应该足够了。

const { join } = require("node:path");

module.exports = {
  extends: ["custom/next"],
  parserOptions: {
    project: join(__dirname, "tsconfig.json"),
  },
};

附带说明一下，它可以扩展到custom/next。内部包是eslint-config-custom，eslint的约定是在所有包的前缀加上eslint-config-。因此，正确的导入方式是custom。确保在eslint-config-custom包中暴露next，然后一切就准备就绪了。