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

Posted 2023-02-23

【中文标题】如何为从 .vue 中的别名导入的模块方法获取智能感知

【英文标题】：how to get intellisense for methods of modules which are imported from an alias in .vue

【发布时间】：2019-03-26 02:52:15

【问题描述】：

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

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

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

在 .js 中有效

不适用于 .vue

【参考方案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-settings：

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

【讨论】：

我和你的一样尝试过，它在 .vue 中有效，但我发现你的解决方案在 .js 中无效。这是我的姿势不对吗？

哎呀，我发现你的解决方案确实解决了我的问题，但是需要 jsconfig.json 否则它不起作用

啊，没错！我的错！我试图删除 jsconfig.json 并检查了我的 vue 文件，它仍然有效，但我什至从不费心查看我的 js 文件。对不起！所以只是不要删除 jsconfig，它适用于两者！

非常感谢。我还有一个问题，如何立即刷新 eslint 的配置。刚刚，过了这么久才生效。

对我来说是立竿见影的！而且我认为只要你的 eslintrc 中没有错误（当然你需要保存）。但是我使用 vscode 的重新加载窗口来处理不会自动刷新的东西（F1，输入“REL”.. 你会找到它）我为它绑定了一个键。主要是因为我想确定事情是否已经传播。