Can fix Intellisense and go to definition for absolute path

[kinanson]

Info

• Platform: Win7
• Vetur version:0.9.7
• VSCode version:1.16.0

Problem

I know had go to definition for component and js file and 0.9.6 also had intellisense for component and props.But if i use absolute path that is not working.see below that is i mean.
import test from '@components/test.vue

I think that is possible.If I install Vue Peek.That can help me to definition even if i import absolute path.

I don't know what is "Find Definition for Vue components in ".If you want to imporve document thanks.

[HerringtonDarkholme]

Do you have jsconfig.json or tsconfig.json in your project?

Have you configured path mapping in it?

https://www.typescriptlang.org/docs/handbook/module-resolution.html

[HerringtonDarkholme]

Vue peek does awful guessing. https://github.com/fussinatto/vscode-vue-peek/blob/master/src/PeekFileDefinitionProvider.ts#L32

I don't like adding it.

[kinanson]

Yes.You are right.I tested is ok.Thanks a lot

[HerringtonDarkholme]

Thanks.

We also welcome PR to add configuration example / instructions to doc.

[kinanson]

Sorry.I am wrong.I was success.But i don't know why doesn't working now.My computer is windows 10.I will test windows 7 tomorrow.But I want to give you some details.
my jsconfig.json is below
{ "include": [ "src/**/*" ], "compilerOptions": { "baseUrl": ".", "paths": { "components": [ "*", "components/*" ] } } }

below is my test example of gif

[HerringtonDarkholme]

Can you change the lang to ts? It will show error if component isn't resolved. In case your mapping configuration is wrong.

[kinanson]

Can you give me some example?I use resolve of alias and i follow typescript Module Resolution description below

Even if I can't resolve at vs code but i can run on website.Maybe we have some misunderstanding?

[kinanson]

I had solve this problem.Sorry for wasted your time.Below is my final config.That is work very well for windows 10.
{ "include": [ "src/**/*" ], "compilerOptions": { "baseUrl": ".", "paths": { "@/*": [ "src/*" ] } } }

[chocopowwwa]

H @HerringtonDarkholme @kinanson ,

i still experiencing some issue in .vue file not .ts file

Here some details

Diretory:

└── src
    ├── dir1
    │   ├── a.vue
    │   └── b.ts
    ├── dir2
    │   ├── a.vue
    │   └── b.vue
    ├── index.js
    ├── index.vue
    └── jsconfig.json

jsconfig.json

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "baseUrl": ".",
        "paths": {
            "Dirone/*": [
                "./dir1/*"
            ],
            "Dirtwo/*": [
                "./dir2/*"
            ]
        }
    }
}

[kinanson]

@chocopowwwa
try below:

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "baseUrl": ".",
        "paths": {
            "Dirone/*": [
                "src/dir1/*"
            ],
            "Dirtwo/*": [
                "src/dir2/*"
            ]
        }
    }
}

[chocopowwwa]

thanks for your reply @kinanson

nope, that one doesn't work either

------ UPDATE ------
hmm looks like the problem is on Js Intellisense, not vetur, go to definition from .vue works perfectly fine, thanks

[dimensi]

Hi, i have some problem.

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

  import childApi from 'src/api/child';
  import { mapperApi } from '../../utils/api';
  import PageContainer from 'src/elements/PageContainer';

PageContainer vue-peek found, mapperApi found, childApi not found.
In .js childApi found.

[HerringtonDarkholme]

@edDimensi

Vetur doesn't support eliding .vue extension. (and probably will not support)

[cr0cK]

Why Vetur could not handle .vue file out of the box? It seems to be a main feature for an extension that aims to support Vue.

@edDimensi you can workaround by adding a definition for Vue files: https://alexjoverm.github.io/2017/06/28/Integrate-TypeScript-in-your-Vue-project/#Troubleshooting

But "going to definition" shortcut still won't work because it is now going to Vue internals!

[HerringtonDarkholme]

I don't like it. I don't think one should omit the extension. VSCode can use path completion so it even doesn't matter whether it requires four more key strokes. It also confuse users between plain script file and vue file. Also, you won't import a json/css file without extension. The same logic applies to vue, too.

On the other hand, resolving file type without extension requires much more code and syscall on both editor plugin and webpack loader. ts-loader requires file extension to appendSuffixTo certain file.

Unless one can list some objective advantages of omitting extension, I don't think vetur will support it.

[cr0cK]

@HerringtonDarkholme I'm agree with you :) I prefer to let vue extensions too.

I was talking about the need to add a definition to handle .vue files to avoid to have import errors in VS Code. If Vetur could handle this out of the box and could be able to link Vue files in script tags (like vue-peek does), it'd be great.

[HerringtonDarkholme]

Sadly vetur cannot change the behavior of TypeScript side. The only workaround is to add a declaration in type definition file.

[HerringtonDarkholme]

@cr0cK you can try this TypeScript langauge service plugin.

https://github.com/HerringtonDarkholme/vue-ts-plugin

You still need to configure TypeScipt, however.

[KokoDoko]

@HerringtonDarkholme I have this same problem, but cannot fix it with any of the solutions in the FAQs or here. As soon as I include the typings.d.ts file, Vetur won't recognise paths to modules in .vue files anymore, and changes in vue files are not picked up anymore by intellisense. Removing the .d.ts file fixes everything, but then I cannot have an index.ts file that kickstarts app.vue.

The culprit

declare module "*.vue" {
    import Vue from 'vue'
    export default Vue
}

[HerringtonDarkholme]

@KokoDoko have you tried the vue ts plugin?

[evenfrost]

Faced the very same issue as @alexsasharegan, workaround as for now is to create tsconfig.json in the root of your workspace and make it extend your base tsconfig.json. So, your root tsconfig.json should include one configuration line:

{
  "extends": "./path/to/your/real/tsconfig.json"
}

After it, all the issues with missing aliased modules like #762 or #545 are gone, and TS type-checking and intellisense are working well in .vue files.

Should work well for multi-root projects as well following the same logic.

[neodon]

To expand on @evenfrost's post (thank you; it saved me a lot of time), the root folder in a multi-root workspace corresponds to the first folder in the workspace folder list in VSCode.

So you would need to create the tsconfig.json file there that points to the tsconfig.json file in your web project in your workspace.

Another solution for a multi-root workspace is to rearrange it so your web project folder comes first in the list. Vetur then seems to pick up the tsconfig.json file in that folder correctly. This is what I ended up doing after chasing this issue around for a few hours. 😄

[danielschmitz]

Thanks @evenfrost, save my day

[francoishill]

Set VS Code user setting path-intellisense.extensionOnImpor to true.

[blocka]

for those using vscode's multi root workspace feature:

make sure the first workspace root is your vue project, otherwise vetur won't pick up on your tsconfig

[jawa-the-hutt]

@HerringtonDarkholme

I might have a use case that addressing the original issue might be worth looking into. It's related to a Vue CLI plugin for Nativescript-Vue that will allow code sharing between Web and Native platforms in a single project. It does use Webpack Resolve Extensions to do the heavy lifting from the build side of things.

I can open a new issue and reference this one if that would be better or I can continue in this issue with more details of the situation if you'd like.

[artfabrique]

I use regular js (not ts) and I have this jsconfig.json and tsconfig.json in the root

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

When I type imports nothing comes out while path input

[Cyclodex]

Hey @artfabrique , what I see is the baseUrl seems strange, why is this ./src/ ? Or why do you add src/ again to the @/* ?
This will probably look for something like ./src/src/*
I have this working for me:

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

Maybe this helps! Cheers

[artfabrique]

Hey @artfabrique , what I see is the baseUrl seems strange, why is this ./src/ ? Or why do you add src/ again to the @/* ?
This will probably look for something like ./src/src/*
I have this working for me:

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

Maybe this helps! Cheers

I'm on Windows10 and are you too?

[Cyclodex]

Nope, on mac.
Maybe you need backslash instead of slash? Not sure how windows is handling this...

[ns412]

I'm having the same issue. I have a multi project workspace: with a client/ directory where my Vue project lives.

I've put this in the client folder, and then also tried adding the "extends" jsconfig file at the root directory, like @evenfrost recommended.

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

Intellisense works perfectly without the '@/', so if I do something like import Service from ../blah/service', that works, but @/blah/service` does not.

Any suggestions? Would love Intellisense to work, and I feel like I'm so close!

[VaultDeveloper]

Also have this problem.

Some time ago, VScode detects are error with experimentalDecorators and gave me a fast correction. This correction creates a jsconfig.json. I don't know why but since the creation of this file, VSCode ignore tsconfig.json. I juste remove the jsconfig.json and reload window and everything works fine.

[speyou]

For anyone interested, I just spent 2h on making my specific use case work with this issue of going to definition (+ autocompletion of methods and properties).

My monorepo project:

.
├─ node_modules
├─ packages                
│   ├─ @configs
│   │     └─ tsconfig.base.json
│   ├─ core (JS)
│   ├─ app1 (VueJS)
│   ├─ app2 (VueJS)
│   └─ ...
└─ tsconfig.json

As you can see I have several VueJS apps (independant from each others but everyone is dependant of core) and I wanted to ctrl+click into my imports in order to peek inside.

My solutions is as follow:

./tsconfig.json

{
  "extends": "./packages/@configs/tsconfig.base.json"
}

./packages/@configs/tsconfig.base.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true, 
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["*", "src/*", "../app1/src/*", "../app2/src/*"], // this is the secret ingredient, add all of your projects here
      "@core/*": ["../core/src/*"]
    }
  }
}

Everything is not perfect tho, sometimes it works, sometime it doesn't. I didn't make sense of that yet (seems like it needs an export to work, so functional components without scripts won't make it) but I finally have 80% of my files I can open through ctrl+click so it's a win.

Hope it will help someone. :)

[JoePassanante]

@speyou Thanks the
"allowSyntheticDefaultImports": true
Worked for me in .jsconfig.json file

For anyone in the future looking for something simple:

    // jsconfig.js
    {
        "compilerOptions": {
          "allowSyntheticDefaultImports": true,
          "baseUrl": ".",
          "paths": {
            "@/*": ["./src/*"],
          }
        },
        "include": ["src"]
      }

[segidev]

Faced the very same issue as @alexsasharegan, workaround as for now is to create tsconfig.json in the root of your workspace and make it extend your base tsconfig.json. So, your root tsconfig.json should include one configuration line:

{
  "extends": "./path/to/your/real/tsconfig.json"
}

After it, all the issues with missing aliased modules like #762 or #545 are gone, and TS type-checking and intellisense are working well in .vue files.

Should work well for multi-root projects as well following the same logic.

Genius!

[exarus]

css

WebStorm omits the file extensions by default (new project with Vue CLI). I can't find an IDE option to enforce extensions for .vue files and omit it for .js files. There is option to require to always add an extension
So to have code completion for all developers in my project I have to add .js extensions everywhere? Is that Vetur way of solving the problem for projects that use different editors?
I've tried to switch from WebStorm to VSCode (4 times by now) and these are the kind of issues that always bring me back to WebStorm.

[kjo1]

Faced the very same issue as @alexsasharegan, workaround as for now is to create tsconfig.json in the root of your workspace and make it extend your base tsconfig.json. So, your root tsconfig.json should include one configuration line:

{
  "extends": "./path/to/your/real/tsconfig.json"
}

After it, all the issues with missing aliased modules like #762 or #545 are gone, and TS type-checking and IntelliSense are working well in .vue files.

Should work well for multi-root projects as well following the same logic.

Thank you, you saved my time.

Deserve thumbs up!

[awefeng]

I don't like it. I don't think one should omit the extension. VSCode can use path completion so it even doesn't matter whether it requires four more key strokes. It also confuse users between plain script file and vue file. Also, you won't import a json/css file without extension. The same logic applies to vue, too.

On the other hand, resolving file type without extension requires much more code and syscall on both editor plugin and webpack loader. ts-loader requires file extension to appendSuffixTo certain file.

Unless one can list some objective advantages of omitting extension, I don't think vetur will support it.

Vetur: Vue tooling for VS Code, but don't support this

[yoyo930021]

I don't like it. I don't think one should omit the extension. VSCode can use path completion so it even doesn't matter whether it requires four more key strokes. It also confuse users between plain script file and vue file. Also, you won't import a json/css file without extension. The same logic applies to vue, too.
On the other hand, resolving file type without extension requires much more code and syscall on both editor plugin and webpack loader. ts-loader requires file extension to appendSuffixTo certain file.
Unless one can list some objective advantages of omitting extension, I don't think vetur will support it.

Vetur: Vue tooling for VS Code, but don't support this

We don't want to support this.
vitejs/vite#178 (comment)

This feature will add more code, increase our maintenance pressure, and not sure if it will work well yet.

[yoyo930021]

This issue is a mixture of many questions, so I will lock this issue.
If you have any question, or feature request, please open a new issue.