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 导入别名

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

Answer 3

您可以尝试在

tsconfig.json

/

jsconfig.json

中添加自定义路径，如下所示：

• 在您的

  baseUrl

  中添加一个

  compilerOptions

  （在我的例子中是

  "baseUrl": "."

  ）
• 在

  paths

  对象中添加路径：

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

Answer 4

我无法通过上述方法解决问题。

但是，我们能够使用以下库解决该问题。

https://www.npmjs.com/package/eslint-import-resolver-alias

npm install eslint-plugin-import eslint-import-resolver-alias --save-dev

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
    }
  }
}

.eslintrc.json

{
...
  "settings": {
    "import/resolver": {
      "alias": {
        "map": [["@", "./src"]],
        "extensions": [".ts", ".js", ".jsx", ".json"]
      }
    }
  }
}

导入示例

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

to

import Header from '@/components/Header';

Answer 5

我昨天遇到了同样的问题。因为 .eslint.json => 由于某种原因 eslint 仅在 ide 中显示错误（不在浏览器中）。所以我通过添加 .eslint.mjs 版本来修复它。它对我有用。