Question

我已经使用Vue-cli创建了一个项目，我决定默认添加一个皮棉配置。我不确定为什么在运行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

我在我的中型文章https://medium.com/@agm1984/how-to-set-up-es-lint-for-airbnb-vue-js-and-vs-code-a5ef5ac671e8

中发布了针对alias问题的解决方案

基本上是这样：

安装：

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文件，以便了解您在项目中使用的配置。

基于AirBnb的EsLint导入/未解决

2 个答案: