วิธีทำให้ eslint สามารถแก้ไขพา ธ ใน jsconfig ได้

ในโปรเจค nextjs ของฉันฉันได้แม็พพา ธjsconfig.jsonเพื่อทำให้การนำเข้าสัมบูรณ์ง่าย

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["./*"]
    },
    "target": "es6",
    "module": "commonjs",
    "experimentalDecorators": true
  }
}

เส้นทางการนำเข้าของฉันมีลักษณะเช่นนี้ import { VIEW } from '@/src/shared/constants';

ฉันeslintrc.jsมีการตั้งค่าที่ระบุเป็น

module.exports = {
    ... ,
    settings: {
        "import/resolver": {
          alias: {
            extensions: [".js"],
            map: ["@", "."]
          }
        }
      }
}

ฉันยังคงได้รับข้อผิดพลาดที่บอกว่าไม่สามารถแก้ไข "@ / what / ever / my / path / is"

ฉันจะทำให้ eslint ตระหนักถึงเส้นทาง jsconfig ได้อย่างไร

ฉันใช้ babel-eslint เป็น parser ใน eslintrc ขณะค้นหาฉันรู้ว่าฉันต้องเพิ่มbabel-plugin-module-resolverbabelrc เพื่อแก้ไขโมดูล ในไฟล์นี้เราสามารถกำหนดเส้นทางที่แมปซึ่งมีอยู่ใน jsconfig ของเรา

ดังนั้นการเพิ่มปลั๊กอินต่อไปนี้ในไฟล์ babelrc รวบรวมรหัสของฉันสำเร็จ

[
    "module-resolver",
    {
        "alias": {
          "@": "./"
        }
    }
]

ตามเอกสารสำหรับ eslint นำเข้าจำแนกนามแฝงที่mapคุณสมบัติที่ควรจะเป็นอาร์เรย์ของอาร์เรย์ดังนั้นลองนี้

module.exports = {
    ... ,
    settings: {
        "import/resolver": {
          alias: {
            extensions: [".js"],
            map: [ ["@", "."] ]
          }
        }
      }
}

นอกจากนี้ตรวจสอบอีกครั้งว่าคุณได้eslint-import-resolver-aliasติดตั้งจริง ๆ แล้วมันง่ายที่จะลืม!