eslint-plugin-import/no-relative-parent-imports rule recognizes path aliasing as relative import

Question

I'm trying to figure out why does ESlint refuses to accept path aliasing as absolute paths. Below there's an error message of the issue, telling me to either move the component to the same folder or make it a package.

I've found this video of the eslint-plugin-import package, setting up this rule (alongside a bunch of other useful rules) and to make it work, he used path aliasing like this:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@modules/*": ["src/modules/*"],
      "@pages/*": ["src/pages/*"],
      "@layouts/*": ["src/layouts/*"],
      "@hoc/*": ["src/hoc/*"],
      "@reducers/*": ["src/reducers/*"],
      "@utils/*": ["src/utils/*"],
      "@schemas/*": ["src/schemas/*"],
      "@guards/*": ["src/type-guards/*"],
      "@interfaces/*": ["src/interfaces/*"]
    },
    // other rules
}

I'm wondering if this is the correct approach to disallow relative imports with ESlint?

Answer 1

You can use the the following as a workaround

rules: {
    'import/no-relative-parent-imports': ['error', {
        ignore: ['@modules/', '@pages/', '@layouts/']
    }],
}