eslint + jsconfig + nextjs模块路径别名(absolue path import - @)

Question

我试图在nextjs文档之后使用自定义别名导入文件。

我现在的方法是

从…

import Header from '../../../components/Header';

至

import Header from '@components/Header';

我得到了预期的结果。但是eslint抛出以下错误：

• 无法解析到模块的路径(eslint /无未解析)

我尝试在eslintrc文件中添加以下行以解决错误

    settings: {
    'import/resolver': {
      node: {
        paths: ['src'],
      },
    },
  },

但同样的错误也会被抛出。

解决这个问题的正确方法是什么？

提前谢谢..。

注意:我不想删除eslint，我需要@components导入别名

Answer 1

最后，在深入研究了大量的GitHub答案之后.

在你的eslintrc文件里。添加以下别名

    settings: {
    'import/resolver': {
      alias: {
        map: [
          ['@components', '../../../components/'],
          ['@images', '../../../assets/images/'],
        ],
        extensions: ['.js', '.jsx'],
      },
    },
  },

还要修复流配置文件中的流错误，添加name_mapper

module.name_mapper='^@components' ->'<PROJECT_ROOT>/../../../components'
module.name_mapper='^@images' ->'<PROJECT_ROOT>/../../../assets/images'

Answer 2

您还需要安装npm i -D eslint-import-resolver-typescript，然后将下面添加到eslint文件中：

"settings": {
    "import/resolver": {
      "typescript": {} // this loads <rootdir>/tsconfig.json to eslint
    },
}

参考资料：https://gourav.io/blog/nextjs-cheatsheet

Answer 3

您可以尝试在tsconfig.json/jsconfig.json中添加自定义路径，如下所示：

• 在您的baseUrl中添加一个compilerOptions (在我的例子中是"baseUrl": ".")
• 在paths对象中添加路径：

"paths": {
   "components": ["components/*"],
}