Javascript eslint使用配置了路径映射的jsconfig.json解决导入错误

以下是我的项目结构：

-src

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

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

我厌倦了：

从“../../../../../../components/SomeComponent”导入SomeComponent

我想做：

从“@components/SomeComponent”导入SomeComponent

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


我用它来工作：

jsconfig.json

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

"settings": {
    "import/resolver" : {
      "alias" : {
        "map" : [
          ["@components","./src/components/"]
        ],
        "extensions": [".js"]
      }
    }
  }

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


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

但是eslint现在抱怨它没有解决，尽管它编译得很好

eslint错误：

无法解析模块“@components/SocialMedia.eslint”的路径（导入/无未解析）

注意：

我不想禁用eslint。我也想让它理解这种路径。
我已经安装了：

npm安装-D eslint导入解析器别名

我在eslint配置文件中添加了：

eslintrc.json

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

"settings": {
    "import/resolver" : {
      "alias" : {
        "map" : [
          ["@components","./src/components/"]
        ],
        "extensions": [".js"]
      }
    }
  }

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


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

现在它工作了，eslint不再显示错误

编辑：

我正在使用webpack，我还需要做：

webpack.config.js

resolve: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components/')
    }
  }

另一种方法是，假设您已经安装了
eslint插件导入
（在您的devdependences中）。只需在
.eslintrc.json
文件中添加此“设置”

.eslintrc.json

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

"settings": {
    "import/resolver" : {
      "alias" : {
        "map" : [
          ["@components","./src/components/"]
        ],
        "extensions": [".js"]
      }
    }
  }

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


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

jsconfig.json

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

"settings": {
    "import/resolver" : {
      "alias" : {
        "map" : [
          ["@components","./src/components/"]
        ],
        "extensions": [".js"]
      }
    }
  }

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


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

然后你可以打电话给

import SomeComponent from 'components/SomeComponent';`

此解决方案适用于src中的文件。但是，eslint无法解析根目录下文件的路径。这是怎么解决的呢？似乎eslint和jsconfig应该配合得很好，所以您不需要这样做，但也许我没有完全理解jsconfig的目的。你的回答对我有用，谢谢！此解决方案适用于src中的文件。但是，eslint无法解析根目录下文件的路径。如何解决这个问题？