vue.js - 如何获取从 .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 (delete it! just do it!) ，而是:

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"],