Cách tạo eslint giải quyết các đường dẫn được ánh xạ trong jsconfig

Trong dự án nextjs của tôi, tôi đã ánh xạ đường dẫn jsconfig.jsonđể dễ dàng nhập tuyệt đối

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

Đường dẫn nhập của tôi trông như thế này import { VIEW } from '@/src/shared/constants';

My eslintrc.jscó các cài đặt được chỉ định là

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

Tôi vẫn nhận được lỗi nói rằng không thể giải quyết "@ / what / ever / my / path / is"

Làm cách nào để eslint nhận ra đường dẫn jsconfig

Tôi đã sử dụng babel-eslint làm trình phân tích cú pháp của mình trong eslintrc. Trong khi tìm kiếm, tôi nhận ra rằng tôi cần thêm babel-plugin-module-resolverbabelrc để giải quyết các mô-đun. Trong tệp này, chúng ta có thể định nghĩa các đường dẫn được ánh xạ có trong jsconfig.

Do đó, việc thêm các plugin sau vào tệp babelrc đã biên dịch mã của tôi thành công.

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

Theo các tài liệu cho bí danh eslint-import-decver-alias , thuộc maptính phải là một mảng các mảng, vì vậy hãy thử điều này:

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

Ngoài ra, hãy kiểm tra kỹ xem bạn đã eslint-import-resolver-aliascài đặt chưa - thật dễ quên!