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

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

\n\n

基本上是这样的：

\n\n

安装：

\n\n

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

\n\n

Laravel-mix（又名 Webpack 配置）

\n\n

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

\n\n

如果您使用像 \xe2\x80\x9c 这样的超狂野的东西，请注意那里的解析键，只是 Webpack 本身而不是 Laravel Mix\xe2\x80\x9d ；语法上会有标准偏差。

\n\n

.eslintrc.json

\n\n

{\n    "env": {},\n\n    "rules: {},\n\n    "settings": {\n        "import/resolver": {\n            "alias": {\n                "map": [\n                    ["@", "./resources"],\n                    ["~", "./resources/js"]\n                ],\n                "extensions": [".js", ".vue"]\n            }\n        }\n    }\n}\n

\n\n

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

\n