如何在eslintrc中手动添加要解析的路径

Question

我的项目 main 中有一个文件夹，我正在像模块一样解析它。例如 import x from 'main/src' 导入 main/src/index.js。这是通过 webpack 的解析别名配置完成的。

我遇到的一个问题是通过 eslint 消除错误。我知道 eslint 提供了一个 webpack resolve 插件，但是，我一直无法让它工作。我怀疑是因为我在使用 webpack 2 并在我的 webpack 配置文件中使用了 es6。

是否有手动方法来编写解决此问题的 eslint 设置？

我见过的唯一其他技巧是使用 import/core-modules，但我必须列出子目录树 main/src/bar、main/src/foo 中的每个文件夹。这并不理想。

Answer 1

我认为下面的 link 对您有帮助。您可以使用 config.

添加解析目录

比如你想解析src/，你可以在.eslintrc.

上这样写

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

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

Answer 2

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

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

Answer 3

我对 webpack 也有同样的问题。我安装了 eslint-import-resolver-webpack 并因此更新了 .eslintrc

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

Answer 4

我遇到了类似的问题：ESLint 无法解析在我的 tsconfig.json.

中相对于指令 "baseUrl": "src" 导入的模块

设法解决了类似于标记为解决方案答案的问题，除了我必须添加扩展数组。所以我将以下内容添加到我的 .eslintrc.js:

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

希望这对某人有所帮助。我的解决方案的来源实际上是 package's npm page.

Answer 5

就我而言，当我尝试在 React 中导入 react-native-svg 包时，我在 React 中遇到了这样的错误。我这样做是因为我对 React 和 React-Native 使用同一个代码库。所以对我来说，以下代码在 .eslintrc 中有效：

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

希望这对其他人有帮助

Answer 6

我的工作湿润 .eslintrc.js

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

和tsconfig.json

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

Answer 7

正如 Zip184 在上面的评论中所说如果你有多个 webpack 配置，你必须指定配置的路径

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

How to manually add a path to be resolved in eslintrc