如何在eslintrc中手动添加路径以进行解析

Question

我在项目中有一个名为main的文件夹，我将其视为一个模块来解析。例如，import x from 'main/src'会导入main/src/index.js。这是通过webpack的resolve别名配置实现的。

我的问题是如何通过eslint消除错误。我知道eslint提供了webpack resolve插件，但我一直无法使其正常工作。我怀疑这是因为我使用了es6配置文件，并且正在使用webpack 2。

是否有手动编写解决方案以修复此问题的方法？

唯一可行的方法是使用import/core-modules，但这样我就必须列出子目录树中的每个文件夹main/src/bar、main/src/foo，这显然并不理想。

- wlingke

Answer 1

我认为下面的链接可以帮助您。

https://github.com/benmosher/eslint-plugin-import#resolvers

例如，如果您想解析src/，则可以在.eslintrc中编写以下内容。

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

然后，ESLint从src目录解析。您可以通过编写 const moge = require('hoge/moge'); 来要求 src/hoge/moge.js，而ESLint会知道它。

- Sota Sugiura

---

ESLint 配置无效：意外的顶级属性“settings”。 - user2735832

在WebStorm IDE中解决问题的好方法，但是webpack正在尝试安装这些模块： import {STATE_FICHE as initialState} from 'data-srtuctures/fiche'; webpack说： Installing data-srtuctures... 并且失败了。是否有Webpack2的解决方案？ - lazy.lizard

这个解决方案适用于src文件夹中的文件。但是对于根目录下的文件，eslint无法解析路径。如何解决？ - StangSpree

Answer 2

太晚看到这个问题了。实际上，已经有一个名为eslint-import-resolver-alias的解析器使用以下设置实现了此功能。

{
  settings: {
    'import/resolver': {
      'alias': [
        ['main/src', './main/src']
       ]
     }
  }
}

- johvin

Answer 3

我遇到了类似的问题：ESLint无法解析相对于指令"baseUrl": "src"导入的模块。

我成功地采用了与被标记为解决方案答案类似的方法来解决这个问题，不过我还需要添加扩展数组。因此，我将以下内容添加到我的.eslintrc.js文件中：

  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        paths: ['./src']
      }
    }
  },

希望这能帮助到某些人。我的解决方案来源实际上是包的npm页面。

- Pavel

Answer 4

我在使用webpack时遇到了同样的问题，我安装了eslint-import-resolver-webpack并相应地更新了.eslintrc文件：

{
    "settings": {
        "import/resolver": "webpack"
    }
}

- Zip184

---

所有其他路径的配置在哪里？这个粘贴的代码足够吗？ - vsync

路径配置是标准的Webpack别名配置。在Webpack配置文件中，位于resolve: { alias: {...} }下。这段代码只是让ESLint使用Webpack的路径配置而不是它自己的。 - Zip184

这段代码还假设你的webpack配置文件是默认的webpack.config.js。如果不同（例如，如果你有单独的开发/生产配置文件），你可以像这样指定一个webpack文件：“settings”：{      “import / resolver”：{          “webpack”：{              “config”：“webpack.dev.config.js”          }      },      ... - Zip184

Answer 5

我的工作环境 .eslintrc.js

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

和 tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "./",
    ...
  },
}

- Kirill Cherkalov

---

哇...为什么这不是默认值呢 -.- - muuvmuuv

很酷，适用于 .eslintrc.js... 谢谢 :) - Gvs Akhil

Answer 6

对于我的情况，在React中引入react-native-svg包时，我遇到了eslint的错误。我这样做是因为我正在为React和React-Native使用一个代码库。所以对我来说，以下代码在.eslintrc中可行：

"import/no-unresolved": [
  2,
  {
    ignore: [
      'react-native-svg'
    ]
  }],

希望这能帮到其他人。

- David

Answer 7

正如Zip184在上面的评论中所述，如果您有多个webpack配置文件，则必须指定配置文件的路径。

"settings": {
  "import/resolver": {
    "webpack": {
      "config": "webpack.common.js"
    }
  }
}

- Finelf