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

Posted 2023-03-27

【中文标题】如何在eslintrc中手动添加要解析的路径

【英文标题】：How to manually add a path to be resolved in 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添加解析目录。

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 知道。

【讨论】：

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": "./",
    ...
  ,

【讨论】：

哇...为什么不是默认值-.-

酷为 .eslintrc.js 工作...谢谢 :)

【参考方案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"