Vue js 和 VS 代码 - 绝对文件路径没有 Intellisense答案

【问题标题】：Vue js and VS code - no Intellisense for absolute file pathVue js 和 VS 代码 - 绝对文件路径没有 Intellisense
【发布时间】：2019-09-07 10:47:59
【问题描述】：

我有一个使用 vue-cli 3 创建的应用程序，并且我使用 Visual Studio 作为我的 IDE。我已经安装了 Vetur 扩展。不幸的是，当我输入类似的内容时

import Message from '@/components/Message'

VS 代码不提供任何 Intellisense 来解析这种绝对文件路径。也许 VS 代码不理解 @ 映射到使用 vue-cli 创建的项目中的“src”文件夹。有人知道如何解决这个问题吗？

如果有任何帮助，我将不胜感激。

【问题讨论】：

标签： vue.js import visual-studio-code intellisense

【解决方案1】：

我已经按照以下方式设置了jsconfig.json，它可以工作

{
  "compilerOptions": {
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

【讨论】：

我已在tsconfig.json 中添加了此代码，但仍然无法识别导入。
它工作但路径是相对路径
如果这不起作用，请尝试使用Reload Windows 刷新VS Code（即按住command + shift + P，然后搜索并选择Developer: Reload Window
如果 VS Code go to 函数不起作用（即右键单击函数名称并选择 Go To Definition OR 按住 command 和 @ 987654332@ 在函数名称上转到其定义）
如果您在"src/*" 即Non-relative paths are not allowed 线上遇到VS 代码错误，请使用compilerOptions 内的"baseUrl": "."（例如在paths 对象上方）作为您的jsconfig.json 或tsconfig.json必须在项目的根目录

【解决方案2】：

您需要一个 jsconfig.json 文件，以便 Intellisense 使用 webpack 别名启动。您可以查看链接的文章。

https://medium.com/@justintulk/solve-module-import-aliasing-for-webpack-jest-and-vscode-74007ce4adc9

【讨论】：

【解决方案3】：

我可以通过以下方式让 eslint 不抱怨它：

安装 eslint-import-resolver-webpack（开发依赖）
在我的项目的根目录中添加一个 webpack.config.js 内容：

const path = require('path'); // eslint-disable-line import/no-extraneous-dependencies

module.exports = { 解决： { 别名：{ '@': path.resolve(__dirname, 'src'), }, 扩展名：['.js', '.vue'], }, };
在 .eslintrs.js 中：

规则：{ “导入/扩展”：[ '错误'， '总是'， { js：“从不”， vue: '从不', }, ], }, 设置：{ '导入/解析器'：{ 网络包：{ 配置：'webpack.config.js'， }, }, },

我仍然希望 Intellisense 能够正常工作，但现在我将继续这样做。在这个问题上已经浪费了比我应该更多的时间。

【讨论】：