typescript - กฎภายในไฟล์ ` .eslintrc.json ` ของรากงาน NX ไม่ได้ขยายไปยังไฟล์ ` .eslintrc.json ` ของโครงการ

ฉันมีกฎบางอย่างอยู่ภายในไฟล์รากของฉัน .eslintrc.json นี่คือไฟล์นั้น

{
  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@nrwl/nx", "react", "@typescript-eslint", "prettier"],
  "extends": [
    "plugin:react/recommended",
    "google",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    "camelcase": "off",
    "prettier/prettier": 0,
    "no-unused-vars": "error",
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-empty-function": "off",
    "require-jsdoc": 0,
    "no-invalid-this": 0,
    "valid-jsdoc": 0,
    "indent": "off",
    "linebreak-style": "off",
    "object-curly-spacing": 0,
    "quotes": ["error", "single"],
    "semi": ["error", "always"],
    "operator-linebreak": [
      "error",
      "after",
      { "overrides": { "?": "before", ":": "before" } }
    ],
    // React
    "react/prop-types": 0,
    "react/react-in-jsx-scope": 0, // NEXT dynamic imports
    "comma-dangle": [
      "error",
      {
        "arrays": "only-multiline",
        "objects": "only-multiline",
        "imports": "only-multiline",
        "exports": "only-multiline",
        "functions": "only-multiline"
      }
    ],
    "max-len": [
      "error",
      {
        "code": 80,
        "ignoreTrailingComments": true,
        "ignoreRegExpLiterals": true,
        "ignoreUrls": true,
        "tabWidth": 2,
        "ignorePattern": ".*[as|import]"
      }
    ]
  },
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "rules": {
        "@nrwl/nx/enforce-module-boundaries": [
          "error",
          {
            "enforceBuildableLibDependency": true,
            "allow": [],
            "depConstraints": [
              {
                "sourceTag": "*",
                "onlyDependOnLibsWithTags": ["*"]
              }
            ]
          }
        ]
      }
    },
    {
      "files": ["*.ts", "*.tsx"],
      "extends": ["plugin:@nrwl/nx/typescript"],
      "rules": {}
    },
    {
      "files": ["*.js", "*.jsx"],
      "extends": ["plugin:@nrwl/nx/javascript"],
      "rules": {}
    }
  ]
}

ฉันมี .eslintrc.json อยู่ในหนึ่งในโปรเจกต์ของฉัน ซึ่งขยายกฎจากไฟล์ราก อย่างไรก็ตาม กฎเหล่านั้นไม่ได้ถูกนำไปใช้ นี่คือรูปร่างของไฟล์นั้น

{
  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "rules": {}
    },
    {
      "files": ["*.ts", "*.tsx"],
      "rules": {}
    },
    {
      "files": ["*.js", "*.jsx"],
      "rules": {}
    }
  ],
  "rules": {
    "camelcase": "off",
    "prettier/prettier": 0,
    "no-unused-vars": "error",
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-empty-function": "off",
    "require-jsdoc": 0,
    "no-invalid-this": 0,
    "valid-jsdoc": 0,
    "indent": "off",
    "linebreak-style": "off",
    "object-curly-spacing": 0,
    "quotes": ["error", "single"],
    "semi": ["error", "always"],
    "operator-linebreak": [
      "error",
      "after",
      { "overrides": { "?": "before", ":": "before" } }
    ],
    // React
    "react/prop-types": 0,
    "react/react-in-jsx-scope": 0, // NEXT dynamic imports
    "comma-dangle": [
      "error",
      {
        "arrays": "only-multiline",
        "objects": "only-multiline",
        "imports": "only-multiline",
        "exports": "only-multiline",
        "functions": "only-multiline"
      }
    ],
    "max-len": [
      "error",
      {
        "code": 80,
        "ignoreTrailingComments": true,
        "ignoreRegExpLiterals": true,
        "ignoreUrls": true,
        "tabWidth": 2,
        "ignorePattern": ".*[as|import]"
      }
    ]
  }
}

เพราะเหตุนี้ ฉันจึงถูกบังคับให้คัดลอกกฎจากไฟล์หลักไปยังไฟล์ภายในโครงการด้วยตนเอง ซึ่งนี่ไม่ใช่วิธีที่เหมาะสม ดังนั้นฉันหวังว่ามีใครสักคนสามารถชี้ให้เห็นว่าฉันอาจทำผิดพลาดตรงไหน

คำตอบ #1

ฉันเคยเจอสิ่งที่คล้ายกันและพบโพสต์ที่เกี่ยวข้องบางส่วน:

• https://github.com/nrwl/nx/issues/5866
• การกำหนดค่า Esslint สำหรับโครงการ Nx/Angular (no-host-metadata-property)
• ฉันจะเขียนทับกฎ eslint ในพื้นที่ทำงาน nx ของฉันได้อย่างไร?
• วิธีเพิ่มกฎของ typescript-eslint ลงใน eslint
• https://github.com/nrwl/nx/issues/7759

สถานการณ์ของฉันคือฉันต้องการเปิดใช้งาน no-unreachable ในระดับข้อผิดพลาดบนแอปและไลบรารีทั้งหมดใน workspace ของ nx ของฉัน ฉันกำลังใช้ NX เวอร์ชัน 13 ฉันมีไฟล์ใน myapp (เป็นแอป NestJS) ที่มีบรรทัดของโค้ดที่ไม่สามารถเข้าถึงได้

นี่คือสิ่งที่ฉันสังเกตเห็น:

สถานการณ์ที่ 1: การตั้งค่า eslint เริ่มต้น

เมื่อใช้การตั้งค่าเริ่มต้น ฉันได้รับ:

nx lint myapp
...
>  NX   SUCCESS  Running target "lint" succeeded

ฉันยังไม่ได้รับคำเตือนสำหรับโค้ดที่ไม่สามารถเข้าถึงได้เลย

สถานการณ์ที่ 2: เพิ่มกฎลงในกฎรากของ eslint

การเพิ่ม rules.no-unreachable ในไฟล์ราก .eslintrc.json ดังนี้:

{
  "rules": {
    "no-unreachable": "error"
  }
...

ผลลัพธ์ใน:

nx lint myapp
...
>  NX   SUCCESS  Running target "lint" succeeded

นี่ไม่ใช่สิ่งที่ฉันคาดไว้ ฉันคาดว่าจะล้มเหลว

สถานการณ์ที่ 3: เพิ่มกฎลงใน root eslint overrides

เพิ่ม rules.overrides ในไฟล์ราก .eslintrc.json ดังนี้:

{
  "overrides": [
    {
      "files": ["*.ts", "*.tsx"],
      "extends": ["plugin:@nrwl/nx/typescript"],
      "rules": {
        "no-unreachable": "error"
      }
    },
...

หมายเหตุ: มีหลายองค์ประกอบในอาเรย์ overrides กุญแจ “rules” ถูกเพิ่มไปยังองค์ประกอบที่ไฟล์ตรงกับ *.ts และมันขยาย @nrwl/nx/typescript ว่าสำคัญว่าเลือกองค์ประกอบไหนในอาเรย์ overrides

ผลลัพธ์ใน:

nx lint myapp
...
/Users/myuser/src/myrepo/apps/myapp/src/app/mymodule/mymodule.service.ts
  82:9  error  Unreachable code  no-unreachable
>  NX   ERROR  Running target "myapp:lint" failed

เย้! ฉันคาดหวังความล้มเหลวและก็ได้มันมา

สถานการณ์ที่ 4: เพิ่มกฎไปยังกฎ eslint ของ myapp

เพิ่ม rules.no-unreachable ลงใน .eslintrc.json ของ myapp ดังนี้:

{
  "rules": {
    "no-unreachable": "error"
  }
...

ผลลัพธ์ใน:

nx lint myapp
...
/Users/myuser/src/myrepo/apps/myapp/src/app/mymodule/mymodule.service.ts
  82:9  error  Unreachable code  no-unreachable
>  NX   ERROR  Running target "myapp:lint" failed

เย้! ฉันคาดหวังความล้มเหลวและก็ได้มันมา

สถานการณ์ที่ 5: เพิ่มกฎไปยังการแทนที่ eslint ของ myapp

การเพิ่ม rules.overrides ใน .eslintrc.json ของ myapp ดังนี้:

{
  "overrides": [
    {
      "files": ["*.ts", "*.tsx"],
      "rules": {
        "no-unreachable": "error"
      }
    },
...

หมายเหตุ: ดังที่ได้กล่าวไปก่อนหน้านี้ มันสำคัญว่าคุณเพิ่มไปยังองค์ประกอบของอาร์เรย์การแทนที่ใด

ผลลัพธ์ใน:

nx lint myapp
...
/Users/myuser/src/myrepo/apps/myapp/src/app/mymodule/mymodule.service.ts
  82:9  error  Unreachable code  no-unreachable
...
>  NX   ERROR  Running target "myapp:lint" failed

เย้! ฉันคาดว่าจะล้มเหลวและก็ล้มเหลวจริงๆ

คำแนะนำ

ฉันได้ดู tsconfig ในคำถามแล้ว และฉันยังไม่ชัดเจนว่ากฎใดที่ไม่ได้ถูกนำมาใช้ ถ้าคุณสามารถตอบได้นั้น ฉันอาจมีคำแนะนำที่เฉพาะเจาะจงมากขึ้น

ในขณะเดียวกัน จากสถานการณ์เหล่านี้ที่ฉันได้ทำไว้ข้างต้น ฉันคิดว่าคุณมีตัวเลือกทั่วไปสองอย่าง:

ตัวเลือกที่ 1: ใส่กฎในส่วน "overrides" ของไฟล์ราก .eslintrc.json ซึ่งจะทำให้กฎนั้นถูกนำไปใช้กับไฟล์ทั้งหมดที่ตรงกับรูปแบบไฟล์ที่เกี่ยวข้อง (เช่น *.ts, *.tsx)

ตัวเลือกที่ 2: ใส่กฎในส่วน "rules" ของ .eslintrc.json ของแอป (หรือไลบรารี) สิ่งนี้จะทำให้กฎนั้นใช้กับทุกอย่างในแอป (หรือไลบรารี) นั้นได้ คุณยังสามารถใส่มันในส่วน "overrides" เพื่อการควบคุมที่ละเอียดมากขึ้นได้

ฉันสันนิษฐานว่า "extends" จะเป็นไปตามรูปแบบที่คล้ายกับ "rules" ที่นี่ ซึ่งหมายความว่าคุณสามารถใส่ extends ในส่วน overrides ของ root (ตัวเลือก 1) หรือใส่ extends ในส่วน "extends" ของแอปได้

เอกสารของ eslint อธิบายเพิ่มเติมเกี่ยวกับ overrides ที่นี่: https://eslint.org/docs/user-guide/configuring/configuration-files#how-do-overrides-work.