Vue JS和VS代码-绝对文件路径无Intellisense

Question

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

import Message from '@/components/Message'

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

我将非常感谢您的帮助。

Answer 1

您需要一个jsconfig.json文件，才能使Intellisense与Webpack别名配合使用。您可以检查链接的文章。

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

Answer 2

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

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

Answer 3

我可以通过以下方式让大人不抱怨：

1. 安装eslint-import-resolver-webpack（开发依赖项）

2. 在我项目的根目录中添加一个webpack.config.js，内容如下：

   const path = require（'path'）; // eslint-disable-line import / no-extraneous-dependencies

   module.exports = { 解决：{ 别名：{ '@'：path.resolve（__ dirname，'src'）， }， 扩展名：['.js'，'.vue']， }， };

.eslintrs.js中的

3. ：

   规则：{ “导入/扩展名”：[ '错误'， '总是'， { js：“从不”， 提示：“从不”， }， ]， }， 设置：{ “导入/解析器”：{ webpack：{ 配置：“ webpack.config.js”， }， }， }

我仍然想让Intellisense工作，但是现在我将继续这样做。在这个问题上，我已经浪费了很多时间。