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

【问题标题】：How to manually add a path to be resolved in eslintrc如何在eslintrc中手动添加要解析的路径
【发布时间】：2017-06-05 19:26:36
【问题描述】：

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

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

是否可以手动编写解决设置来解决我的 eslint 的此问题？

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

【问题讨论】：

【解决方案1】：

我认为下面的链接对您有所帮助。您可以使用config添加解析目录。

例如，如果你想解析src/，你可以在.eslintrc上写如下。

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

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

【讨论】：

ESLint 配置无效：- 意外的顶级属性“设置”。
在 WebStorm IDE 中解决的很好的解决方案，但是 webpack 正在尝试安装这些模块：import {STATE_FICHE as initialState} from 'data-srtuctures/fiche'; webpack 说：Installing data-srtuctures... 并且失败了。 Webpack2 有解决方案吗？
此解决方案适用于 src 中的文件。但是 eslint 无法解析根目录下的文件路径。怎么解决？

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

我在使用 webpack 时遇到了同样的问题。我安装了 eslint-import-resolver-webpack 并因此更新了 .eslintrc

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

【讨论】：

路径的其余配置在哪里？这个粘贴的代码就够了？
路径配置是标准的 webpack 别名配置。在 resolve: { alias: {...} } 下的 webpack 配置文件中。这段代码只是指出 eslint 使用 webpack 的路径配置而不是它自己的。
这段代码还假设你的 webpack 配置在默认的 webpack.config.js 文件中。如果它不同（比如如果你有一个单独的 dev/prod 配置），你可以像这样指定一个 webpack 文件： "settings": { "import/resolver": { "webpack": { "config": "webpack.dev .config.js" } }, ...

【解决方案5】：

我的工作润湿 .eslintrc.js

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

和tsconfig.json

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

【讨论】：

【解决方案6】：

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

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

希望这对其他人有帮助

【讨论】：

【解决方案7】：

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

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

【讨论】：