Eslint在使用路径映射配置的jsfig.json时解决导入错误-前端问题

eslint resolve error on imports using with path mapping configured jsconfig.json(Eslint在使用路径映射配置的jsfig.json时解决导入错误)

本文介绍了Eslint在使用路径映射配置的jsfig.json时解决导入错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

以下是我的项目结构：

-src

--assets
--components
--constants
--helpers
--pages
--routes

eslintrc.json
jsconfig.json
App.js
index.js

我厌倦了：

import SomeComponent from '../../../../../components/SomeComponent';

我想做的是：

import SomeComponent from '@components/SomeComponent';

我在上面看到了这个问题，所以：

VSCode Intellisense does not work with webpack + alias

我得到了它的支持：

jsfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es6",
    "module": "commonjs",
    "paths": {
      "@components/*": ["./src/components/*"]
     }
  }
}

但现在它抱怨它未解决，尽管它编译得很好。

eslint错误：

无法解析模块‘@components/SocialMedia’.eslint(import/no-unresolved)
的路径

注意：

我不想禁用eslint。我也想让它明白这条路。

推荐答案

另一种方法，假设您已经安装了eslint-plugin-import(在您的DevDependency中)。只需将此"设置"添加到.eslintrc.json文件中。

.eslintrc.json

{
  "settings": {
    "import/resolver": {
      "node": {
        "moduleDirectory": ["node_modules", "src/"]
      }
    }
  }
}

jsfig.json

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

然后您只需调用

import SomeComponent from 'components/SomeComponent';`

这篇关于Eslint在使用路径映射配置的jsfig.json时解决导入错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！