CODEWITHSUNDEEP
javascriptvue.jswebpackvisual-studio-codevetur
Sergeon
Sergeon

Reputation: 6788

vscode+vetur: go to definition from .js files doesn't work

I have Vetur installed and a jsconfig.js file in the root of my project. It is a javascript vue-cli 3 project.

I do can go to definition from a .vue file to another .vue file.

I do can go to definition from a .js file to another .js file.

I do can go to definition from a .vue file to a .js file.

But,

I cannot go to definition from a .js file to a .vue file. When I try to do so, vscode opens the 'go to references' widget.

Contents of my 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/*"
  ]
}

I know there are a lot of issues related to this on GitHub, but all of them seem to be related to typescript projects or only referring to .vue files. I could not find any solution to this specific problem.

I tried to install the 'vue peek' extension, but nothing changed.

Upvotes: 2

Views: 1591

Answers (1)

Ameen
Ameen

Reputation: 1857

This is not an answer, but more information about the problem since I also have it and I don't know how to solve it.

The problem seems to be that *.vue files are handled by Vetur extension. Vetur extension is invoking typescript on the <script> in a way that allows it to correctly resolve *.vue file imports.

However, *.js files are handled by typescript directly and typescript have no idea what *.vue is and it is trying to resolve it as if it were a filename without an extension by appending various default extensions: *.vue.ts, *.vue.tsx, *.vue.js, etc. That's why it is not finding it.

I ran npx typescript --traceResolution on the code and in the output is the following:

======== 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. ========

Upvotes: 1

Related Questions