EsLint airbnb-base import/no-unresolved

Question

我使用 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"]
      }
    }
  }
}

有什么问题吗？

Answer 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

Answer 2

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

npm install eslint-import-resolver-webpack

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

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

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