时间戳

首页 > 解决方案 > ESlint import/no-unresolved with Babel plugin root import

typescript - ESlint import/no-unresolved with Babel plugin root import

问题描述

有谁可以解释一下，为什么 ESlint（VS Code，WebStorm）突出了这种导入变体？

import UserBlock from '~/templates/UserBlock'; //js file

.babelrc

"plugins": [
        [
            "babel-plugin-root-import",
            {
                "rootPathSuffix": "./src/",
                "rootPathPrefix": "~/"
            }
        ]
    ]

.eslintrc.js

module.exports = {
  settings: {
    'import/resolver': {
      'babel-plugin-root-import': {
        rootPathPrefix: '~',
        rootPathSuffix: 'src',
      },
    },
  },
};

标签： typescriptbabeljseslint

解决方案

根据文档解决方案

根据我对“babel-plugin-root-import”插件的经验，您应该将配置更改为：

"plugins": [[
  "babel-plugin-root-import",
    {
      "rootPathPrefix": "~"
      "rootPathSuffix": "src",
    }
 ]]

多余的斜线 ( /) 和点 ( .) 似乎使插件感到困惑。

但 ...

不幸的是，“babel-plugin-root-import”的 eslint 包目前没有得到很好的维护。根据您的 eslintrc，您似乎正在使用该eslint-import-resolver-babel-root-import软件包，因此您“不要让 ESLint 被混淆”。如果您尚未安装该软件包，您可能想先尝试一下。

我目前正在尝试最近更新的“ eslint-import-resolver-babel-root-import-fixed ”分支。由于 NPM 命名冲突，它的配置略有不同；在您的 eslintrc 文件中，您需要替换babel-plugin-root-import为eslint-import-resolver-babel-root-import-fixed.

有效的解决方案

尽管如此，我还是无法让这些工作中的任何一个工作。使用 babel 编译时，没有问题，但是 eslint 会抛出你描述的错误。

过去几年我的解决方案是添加以下 eslint 规则：

"import/no-unresolved": [
  "error",
  {
    "ignore": [
      "^[~]",
    ]
  }
]

另一种方法

我使用 是babel-plugin-root-import因为我们有多个根前缀。如果您只需要一个，我建议您研究一下babel-plugin-module-resolver，尽管这可能有其自身的一系列问题。我过去也使用过“Webpack Module Aliases”，尽管您可能无法使用它。

推荐阅读