Go to definition not working on my project (vue & sass file) [visual-studio-code]

user_13633558 0
Viewed 5474

I am disappointed on two points by developing a Nuxt project on vscode. On vscode my jsconfig.js is the default one :

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".nuxt", "dist"]
}

It's working on vue file for autocompletion to import some components for example (with ctrl+space) But impossible to go to definition next with cmd+click. I do not understand why and this is really annoying.

I can't post image (need 10 reputation), but here is my import on vue file (with no definition found for ...)

import PldFooter from '@/components/Footer';

Other point, I use sass files on assests folder. Compilation working well but I cannot access by cmd+click to the file from node_modules. Here is an example of import :

@import "~bulma/sass/base/helpers.sass";

==> No definition found for helpers.sass

Thank you for your help,

Ben.

nuxt.js vue.js visual-studio-code sass import
2 Answers

Have you opened multiple folders (projects) in a window?

I'm not sure whether your issue the same as me. I got an issue "Go to Definition not working" in Visual Studio Code when I opened multiples folders (projects) and I resolved.

I have used the plugin Vetur to support the .vue file. There are 2 ways which work well:

  1. Open only one project in a window
  2. You can open multiple projects in a window but the project you want to "Go to Definition" works well which must be the first project in the folder tree in the EXPLORER tab.

It seems the plugin Vetur picks up the first project in multiple projects to be the root folder.

My file tsconfig.json

{
  ...

  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
    }
  },
  "exclude": ["node_modules", "dist"]

  ...
}

Reference: https://github.com/vuejs/vetur/issues/423#issuecomment-405415204

I apologize if my answer which cannot help you.

user_67605000

According to the Vetur setup guide: If you are using Webpack's alias or TypeScript's path mapping to resolve components, you need to update Vetur's tsconfig.json or jsconfig.json

For example:

└── src
    ├── components
    │   ├── a.vue
    │   └── b.vue
    ├── containers
    │   └── index.vue
    ├── index.js
    └── jsconfig.json

jsconfig.json:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "components/*": [
                "src/components/*"
            ]
        }
    }
}

index.vue

import a from 'components/a.vue'
import b from 'components/b.vue'

It solved the problem in my case.

user_89787910
Related