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 中的 eslint-settings settings.json：

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