vscode+vetur：从 .js 文件转到定义不起作用答案

【问题标题】：vscode+vetur: go to definition from .js files doesn't workvscode+vetur：从 .js 文件转到定义不起作用
【发布时间】：2020-11-16 09:06:23
【问题描述】：

我已经安装了 Vetur，并且在我的项目的根目录中有一个 jsconfig.js 文件。这是一个 javascript vue-cli 3 项目。

我可以从 .vue 文件到另一个 .vue 文件进行定义。

我可以从一个 .js 文件转到另一个 .js 文件的定义。

我可以从 .vue 文件转到 .js 文件的定义。

但是，

我无法将定义从 .js 文件转到 .vue 文件。当我尝试这样做时，vscode 会打开“转到引用”小部件。

我jsconfig.file的内容：

{
  // This file is required for VSCode to understand webpack aliases
  "module": "es6",
  "moduleResolution": "node",
  "compilerOptions": {
    "resolveJsonModule": true,
    "jsx": "preserve",
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,

    "baseUrl": ".",
    // Relative to "baseUrl"
    "paths": {
      "@/*": ["./src/*"],
      "mocks/*": ["./tests/unit/specs/__mocks__/*"],
      "test-e2e/*": ["./tests/e2e/specs/*"],
      "test-unit/*": ["./tests/unit/specs/*"]
    }
  },
  "exclude": [
    ".git",
    ".app-cache",
    ".npm",
    ".npm-tmp",
    "dist",
    "dist*",
    "node_modules",
    "subfolder/dist",
    "subfolder/node_modules",
    "**/dist/*",
    "**/node_modules/*"
  ]
}

我知道 GitHub 上有很多与此相关的问题，但所有这些问题似乎都与 typescript 项目有关或仅涉及 .vue 文件。我找不到任何解决这个特定问题的方法。

我尝试安装“vue peek”扩展，但没有任何改变。

【问题讨论】：

标签： javascript vue.js webpack vscode-settings vetur

【解决方案1】：

这不是一个答案，而是有关该问题的更多信息，因为我也有它，但我不知道如何解决它。

问题似乎是*.vue 文件由 Vetur 扩展处理。 Vetur 扩展程序在 <script> 上调用 typescript，使其能够正确解析 *.vue 文件导入。

但是，*.js 文件由 typescript 直接处理，并且 typescript 不知道 *.vue 是什么，它试图通过附加各种默认扩展名来解析它，就好像它是一个没有扩展名的文件名：*.vue.ts， *.vue.tsx、*.vue.js 等。这就是它找不到它的原因。

我在代码上运行npx typescript --traceResolution，输出如下：

======== Resolving module './App.vue' from 'src/main.js'. ========
Module resolution kind is not specified, using 'NodeJs'.
Loading module as file / folder, candidate module location 'src/App.vue', target file type 'TypeScript'.
File 'src/App.vue.ts' does not exist.
File 'src/App.vue.tsx' does not exist.
File 'src/App.vue.d.ts' does not exist.
Directory 'src/App.vue' does not exist, skipping all lookups in it.
Loading module as file / folder, candidate module location 'src/App.vue', target file type 'JavaScript'.
File 'src/App.vue.js' does not exist.
File 'src/App.vue.jsx' does not exist.
Directory 'src/App.vue' does not exist, skipping all lookups in it.
======== Module name './App.vue' was not resolved. ========

【讨论】：