使用 webpack 别名显示的 eslint 错误

Question

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

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

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

import ShadowWrapper from 'components/ShadowWrapper'

错误'components' 应该在项目的依赖项中列出。运行 'npm i -S components' 添加它 import/no-extraneous-dependencies

Answer 1

可以使用 eslint-import-resolver-webpack

解决此问题

Answer 2

感谢 Pranav 解决了这个问题！
我在此添加了一些代码 post 以使其对其他人更实用。
首先，在 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' 错误消息
希望对你们中的一些人有所帮助！

Answer 3

以下是对我有用的方法：

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

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

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

 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')
     }
 }

在 .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 添加文件root，并指定您的别名路径：

{
    "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 有额外的设置。在官方网站上查看documentation。

Answer 4

另一种方式，不在 webpack.config.js 和 .eslintrc 之间映射别名。

您可以使用 eslint-import-resolver-webpack 并像这样设置您的 .eslintrc 文件：

{
  "extends": [
    "@hrplatform"
  ],
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"],
        "moduleDirectory": [
          "node_modules",
          "src"
        ]
      }
    }
  }
}

使用 webpack 别名显示的 eslint 错误

eslint error showing with webpack alias

javascript

eslint

webpack