如何获得从 .vue 中的别名导入的模块方法的智能感知

Question

在.vue和.js中，开发时可以享受到vscode的智能感知。 但是我发现当我使用别名时它不再起作用了。 所以我在博客上搜索了一段时间，找到了一个解决方案，就是配置一个'jsconfig.json'如下。

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

它在 .js 文件中有效，但在 .vue 文件中无效。 有谁知道怎么解决吗？

在 .js 中有效

不适用于 .vue

Answer 1

对于 vue-cli，别名是在 webpack-config 中定义的（因为@vue/cli 在后台使用 webpack）。因此，而不是 jsconfig.json （删除它！只是做它！），我会：

1: 安装 eslint 的 webpack 解析器:

npm i eslint-import-resolver-webpack

2：从您的 .eslintrc.js

引用插件

"settings": {
  "import/resolver": "webpack"
},

完成！

这是我的完整 .eslintrc.js 只是为了彻底：

module.exports = {
  "settings": {
    "import/resolver": "webpack"
  },
  parserOptions: {
    parser: "babel-eslint"
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/recommended"
  ],
  "env": {
    "browser": true,
    "node": true
  },
  rules: {}
}

如果仍然存在任何问题，我会检查 vscode settings.json 中的 eslint 设置：

"eslint.enable": true,
"eslint.provideLintTask": true,
"eslint.workingDirectories": ["src"],
"eslint.validate": ["javascript","javascriptreact","vue"],