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

【问题标题】：eslint + jsconfig + nextjs module path aliases (absolue path import - @)eslint + jsconfig + nextjs 模块路径别名（绝对路径导入 - @）
【发布时间】：2020-10-27 21:42:27
【问题描述】：

我正在尝试使用 nextjs documentation 之后的自定义别名导入文件。

我目前的做法是

来自

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

到

import Header from '@components/Header';

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

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

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

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

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

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

提前谢谢...

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

【问题讨论】：

标签： reactjs import next.js eslintrc nestjs-config

【解决方案1】：

您还需要安装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

【讨论】：

【解决方案2】：

在深入研究了许多 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'

【讨论】：

【解决方案3】：

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

在您的compilerOptions 中添加baseUrl（在我的情况下为"baseUrl": "."）
在paths 对象中添加您的路径：

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

【讨论】：

您好，谢谢。是的，我也在做同样的事情。但我面临着 eslint 错误。如何修复 lint 错误