带有Webpack别名的eslint错误显示

Question

在我的webpack配置中。我定义了别名

alias: {
            components: 'src/components/',
            config: 'src/config/'
}

当我从该路径导入模块时，发生eslint错误。

import ShadowWrapper from 'components/ShadowWrapper'

错误的“组件”应在项目的依赖项中列出。运行“ npm i -S组件”以将其添加为导入/无外部依赖关系

Answer 1

这个问题可以通过使用eslint-import-resolver-webpack 解决

Answer 2

这是对我有用的：

1. 我安装了eslint-import-resolver-alias作为开发依赖：

   npm install eslint-plugin-import eslint-import-resolver-alias --save-dev

2. 在Webpack 配置中（在我的例子中，它是 Vue 配置，它通过 Vue-cli 与 Webpack 配置合并），我添加了一些别名：

    resolve: {
        extensions: ['.js', '.vue', '.json', '.less'],
        alias: {
            Site: path.resolve(__dirname, 'src/site'),
            Admin: path.resolve(__dirname, 'src/admin'),
            Common: path.resolve(__dirname, 'src/common'),
            Assets: path.resolve(__dirname, 'src/common/assets'),
            Configs: path.resolve(__dirname, 'src/common/configs'),
            Style: path.resolve(__dirname, 'src/common/style')
        }
    }
   

3. 在.eslintsrc（或 .eslintsrc.js，如果你使用它）中，我为这些别名添加了插件和映射，如下所示：

   "extends": ["plugin:import/recommended"],
   "settings": {
        "import/resolver": {
            "alias": {
                "map": [
                    ["Site", "./src/site"],
                    ["Admin", "./src/admin"],
                    ["Common", "./src/common"],
                    ["Assets", "./src/common/assets"],
                    ["Configs", "./src/common/configs"],
                    ["Style", "./src/common/style"]
                ]
            },
            "extensions": [".js", ".less", ".json", ".vue"]
        }
   }
   

为了清晰起见，我添加了一些扩展和一些好的措施，您可以选择不使用它们。

可选的：

如果您使用VS Code并希望这些别名与路径智能感知一起使用，请在根目录添加一个文件jsconfig.json，并指定您的别名路径：

{
    "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"]
}

React 和 Typescript 有额外的设置。检查官方网站上的文档。

Answer 3

谢谢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'错误消息，
希望对您中的某些人有所帮助！