EsLint airbnb-base import/no-unresolved

Posted 2023-02-23

【中文标题】EsLint airbnb-base import/no-unresolved

【英文标题】：

【发布时间】：2019-10-05 01:11:26

【问题描述】：

我使用 Vue-cli 创建了一个项目，我决定默认添加一个 lint 配置。 我不知道为什么，当我运行 lint 命令时，我得到以下信息：

错误：无法在 src/views/Home.vue:10:24 处解析模块“@/components/HelloWorld.vue”（导入/未解决）的路径：

这是我的主页视图：

<template>
  <div class="home">
    <HelloWorld></HelloWorld>
    Home
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default 
  name: "home",
  components: 
    HelloWorld,
  ,
;
</script>

这是我的 HelloWorld 组件

<template>
  <div>Dea Formazione - registrazione</div>
</template>

<script>
export default 
  name: "HelloWorld",
;
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"></style>

这是我的 eslint 配置：

  "env": 
    "node": true,
    "browser": true,
    "es6": true
  ,
  "extends": ["airbnb-base", "plugin:vue/essential", "@vue/prettier"],
  "globals": 
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  ,
  "parserOptions": 
    "extends": "standard"
  ,
  "rules": ,
  "settings": 
    "import/resolver": 
      "node": 
        "paths": ["src"],
        "extensions": [".js", ".jsx", ".vue"]
      
    
  

有什么问题吗？

【参考方案1】：

我在我的 Medium 文章中发布了 alias 问题的解决方案：https://medium.com/@agm1984/how-to-set-up-es-lint-for-airbnb-vue-js-and-vs-code-a5ef5ac671e8

基本上是这样的：

安装：

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

Laravel-mix（又名 Webpack 配置）

mix.webpackConfig(
    resolve: 
        extensions: ['.js', '.vue'],
        alias: 
            '@': `$__dirname/resources`,
            '~': path.join(__dirname, './resources/js'),
        ,
    ,
);

如果你使用的是“只是 Webpack 本身而不是 Laravel Mix”之类的超狂野的东西，请注意那里的 resolve 键；语法会有标准偏差。

.eslintrc.json

    "env": ,

    "rules: ,

    "settings": 
        "import/resolver": 
            "alias": 
                "map": [
                    ["@", "./resources"],
                    ["~", "./resources/js"]
                ],
                "extensions": [".js", ".vue"]
            
        
    

来源：https://github.com/benmosher/eslint-plugin-import/issues/496

【讨论】：

OP 的问题是他的 eslintrc 配置似乎显示了旧语法。它在某事物的一个较新版本中发生了变化。

【参考方案2】：

你可以通过安装下一个库来解决这个问题：

npm install eslint-import-resolver-webpack

然后在 eslintrc 文件的设置中添加下一个参数，在“节点”下面：

"webpack" : 
    "config": "path/to/setup/webpack.config.js"

它将处理您的 webpack.config.js 文件，以了解您在项目中使用的配置。

【讨论】：

我试过这个解决方案，但没有奏效。我试图检查作为配置提供的路径，但我没有那个文件夹。

我以为你正在使用 Laravel 项目。我的错！您需要用webpack.config.js 文件的路径替换我给您的“配置”值