eslint + jsconfig + nextjs 模块路径别名（绝对路径导入 - @）

Question

我正在尝试按照nextjs 文档使用自定义别名导入文件。

我目前的做法是

从

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

到

import Header from '@components/Header';

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

• 无法解析模块路径（eslint - 导入/没有未解析）

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

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

但 eslint 仍然抛出同样的错误。

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

提前致谢...

注意：我不想删除 eslint 并且我需要 @components import 别名

Answer 1

最后，在深入研究了很多 GitHub 答案等之后……

在你的 eslintrc 文件中...添加以下别名

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

还要修复 flowconfig 文件中的流错误，添加 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