问用webpack别名显示的eslint错误

EN

这个问题可以通过使用埃斯林特-进口解析器-webpack来解决

谢谢你，Pranav解决了这个问题！

我在这篇文章中添加了一些代码，以使它对其他人更实用。

首先，在webpack配置文件中，我定义了这个别名：

alias:{
  components: path.resolve(__dirname, "src", "components")
}

它允许我以这种方式导入应用程序中的组件：

import NewsFeed from 'components/NewsFeed'

我安装了eslint-import-resolver-webpack插件，并将下面的代码放入.eslintrc.js或.eslintrc文件中：

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

就这样，在运行linter之后，我删除了Unable to resolve path to module 'components/NewsFeed'错误消息

希望这会对你们中的一些人有所帮助！

以下是对我起作用的东西：

1. 我将eslint-导入解析器-别名安装为dev依赖项： npm安装eslint-plugin-import eslint-导入解析器-别名-save-dev
2. 在Webpack配置中(在我的例子中，它是Vue config，由Vue-cli与Webpack配置合并)，我添加了一些别名： 解决：{扩展名：‘..js’，‘..vue’，‘..json’，‘..less’，别名：{ Site: path.resolve(__dirname，'src/site')，Admin: path.resolve(__dirname，'src/admin')，path.resolve(__dirname，‘src/Assets’)，资产: path.resolve(__dirname，path.resolve(__dirname，‘src/公用/信托’)，path.resolve(__dirname，‘src/公共/样式’)}}
3. 在.eslintsrc (或者.eslintsrc.js，如果您使用它)中，我为这些别名添加了插件和映射，如下所示： “扩展”：“插件:导入/推荐”、“设置”：{“导入/解析器”：{“别名”：{ "map"："Site“、"./src/site”、"Admin“、"./src/admin”、“公用”、“./src/公用”，“资产”、“./src/公用/资产”、“con图”、“./src/公用/信托”、“样式”、“./src/公用/样式”}、“扩展”：".js“、".less”、".json“、".vue”}}

我增加了扩展，以明确和一些好的措施，你可以选择不使用自己。

可选：

如果您使用jsconfig.json VS代码，并希望这些别名与路径intellisense一起工作，请在根处添加一个文件，并指定别名路径：

{
    "compilerOptions": {
        "target": "esnext",
        "allowSyntheticDefaultImports": false,
        "baseUrl": "./",
        "paths": {
            "~/*": ["src/*"],
            "Root/*": ["src/*"],
            "Site/*": ["src/site/*"],
            "Admin/*": ["src/admin/*"],
            "Common/*": ["src/common/*"],
            "Assets/*": ["src/common/assets/*"],
            "Configs/*": ["src/common/configs/*"],
            "Style/*": ["src/common/style/*"]
        }
    },
    "exclude": ["node_modules", "dist"]
}

有反应和类型记录的额外设置。检查官方网站上的文档。