vetur: Default FAQ js(ts)config for webpack aliases doesn't work.

Hey guys, it loos like I have found a (maybe not perfect ) workaround , inspired by the former suggestions

Lets make it clear, we now face two problems:

1. Path intelligence when import modules --> it is about the path intelligence plugin provided by Microsoft.
2. Method and attributes intelligence when use modules; --> it is truly about the vetur tool that we discussed.

And u need pay attention of the difference between a pure front-end project and a complete full-stack project (e.g. koa2+vue)

If you need a workaround for a pure front-end project, I mean like only one source code folder in a project , u can resolve the two problems above perfectly:

1. edit .vscode/settings.json,add path-intellisense.mappingslike :

{
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  }
}

1. edit jsconfig.json or tsconfig.json like this

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

1. check ur code , it should work perfectly in both path intelligence and method intelligence, no matter in .js or in .vue

However, if u are facing a more complicate project like me, u should consider putting the .vscode/settings.json and jsconfig.json/tsconfig.json under the root path, not the child folder. My project structure is like:

MY_PROJECT
├── backend
│   ├── node_modules
│   ├── src
│   └── package.json
├── frontend
│   ├── node_modules
│   ├── src
│   └── webpack.config.js
└── readme.md

1. Still, u should edit .vscode/settings.json to tell path intelligence :

{
 "path-intellisense.mappings": {
    "@": "${workspaceRoot}/frontend/src"
  }
}

NOTE: the mappings is not the same one as before, because the workspaceRoot is just the root of my project,not the root of the frontend one

1. U should add ./jsconfig.json or ./tsconfig.json like :

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

1. Now check the code , it should work perfectly in both path intelligence and method intelligence, for .js or .vue.

And I want to point out that u do remember to restart the window every time u change the .vscode/settings.json orjsconfig.json, cause the change may not be applied on time by vscode.

I wish my experience would help any of u

Not sure if you all have figured this one out, but I ran into this same issue and downloaded the vetur source code to see how it was retrieving the jsconfig.json file to ingest its settings. After looking at the code I discovered that it seems the jsconfig.json file has to be in your root workspace. It’s important to note that the reference to workspace is super important here, because its the vscode workspace, not necessarily your project’s location.

Turns out, in my particular setup, I had a separate workspace folder in which I was “adding project folders to”, so therefore it was actually looking for the jsconfig.json within that workspace folder, even though I had the jsconfig.json file in the projects themselves. So the 2 solutions I tried are either:

1. put a jsconfig.json in the root of the workspace folder that you’re using to load up other project folders. Configure the baseUrl and paths accordingly. This method is kind of wonky though because if you have several projects, things may get kind of weird trying to setup this config to behave correctly with all the projects.

2. (What I’m doing now) don’t use a separate workspace and just open your project folder directly as the workspace. So basically just go to: File > Open… > your project folder root, and just make sure that jsconfig.js is in that same folder. And of course you’ll still need to make sure you have baseUrl and paths configured accordingly.

VSCode itself doesn’t seem to have this issue as you all indicated with the .js files, because VScode actually searches for jsconfig.json no matter how deep it is in your project folders, and also knows to search through project folder paths added to a separate workspace you may have created. Maybe this is a potential improvement that can be made to Vetur so that it searches for the jsconfig.json file in the same way VSCode does.

Closing since this is fixed in 0.21.0

@octref Would be interesting if you could take a look at this. Can provide more info since the original post.

It would appear jsconfig.json only gets applied to JS files specifically. For example, this is my main.js file, and as you can see it works fine;

EXCEPT if I go to a folder that contains a .vue file, then it completely breaks as you can see below;

However, if you are inside an actual .vue file, then this whole thing just doesn’t work at all.

If you use relative paths though, then it works fine;

Hopefully this can be fixed as it’s a little annoying have to constantly reference my file-explorer whenever I’m trying to find a specific component, and it can be even more annoying if you have a huge project where you have to open a bunch of folders to find that component.

I encounter this problem too, I also follow the instruction of FAQ

Having a jsconfig.json in root folder:

{
  "compilerOptions": {
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "sourceMap": true
  },
  "include": [
    "./src/**/*"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

then I use this alias import in a App.vue file, but it didn’t show any autocompletes info:

It seems that Vetur didn’t recognize components imported using webpack’s alias, even though I did exactly what FAQ sugggested.

However, it works for normal js import in .js file:

But VSCode itself doesn’t handle the .vue extension:

Any solutions ?

still not work

I have reinstalled vscode and installed just this extension to see if it was finally working. Sadly, it wasn’t. To be fair, it does… if you open just a single folder and it happens to be the root of the project. Far from optimal if you ask me. So the bug seems to be “No intellisense for alias imports, in vue files, if workspace contains several projects (workspaceRoot != projectRoot)” The solution of @AndyBoat will never be a thing for me. My workspaces typically contain several backend and frontend projects, and I won’t spend my time modifying which one matches the alias in a vscode settings file… I hope I’m not alone. This issue needs be reopened.

Same problem, using vs code, having followed both the FAQ, and examples from other users. I get no intellisense for the path after @/ but especially no intellisence on what I imported.

For example:

import foo from '@/foo'
foo.<no intellisense here>

Still does not work in .vue files. It works well in .js files.

VSCode version: 1.38.1 Vetur version: 0.22.3

@octref I think this issue should be reopened. Do you need help reproducing the problem?

I use .js and .vue extensions but have the same issue. No suggestion in paths and can’t go to file by clicking with ctrl. 😭 I using the newest Vetur on Ubuntu.

Update: I check and fix one more jsconfig.json and actually, suggestion and linking are working only in .js files. Vue extensions don’t work but when I add .vue extension to path linking start working. 🤔

I have still same issue.

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["./resources/*"],
            "icons/*": ["./node_modules/vue-material-design-icons/*"]
        }
    },
    "exclude": ["./server/dist", "./node_modules", "node", "node_modules"]
}

be sure to exclude any large folders as they’ll slow down the intellisense

I have the same issue as michael-ottink above. I open VSCode with a my-workspace.code-workspace file. The workspace file points to a folder that contains a tsconfig.json. When I open a .ts file they recognize the @/ alias correctly. In .vue files though, I get “Cannot find modue or it’s corresponding type declarations” errors from Vetur.

This project don’t support workspace now. Please open project root and keep package.json and tsconfig in root. Please follow #2377

Still doesn’t work for me. I have the latest VS Code and Vetur 0.22.2. I have even tried the settins.json fix.

I have my vscode opened at the root (folder with .vscode directory), tsconfig in the root which defines a path alias.

I don’t get path completion in .vue files, and they don’t recognize paths with a @. Consequently, it treats all imports as any.

Also… VS Code says this setting doesn’t exist edit: TIL that Path Intellisense is another extension

Yep can confirm this doesn’t work. It has everything to do with the workspace. When I open the folder without the workspace the import works. Anyone find a fix for this?

Moving jsconfig.json to my root directory and adding the “path-intellisense.mappings” setting to settings.json (even though VS Code tells me it’s an unrecognized setting) fixed the issue for me. Thanks all for the help!

With all due respect, it’s usually the maintainers’ job to link related issues to one that is closed if they are choosing to track items in a different way

You should follow other issues, not asking to reopen this dead issue:

• Pick up tsconfig from non-top-level folder #815
• Multi root support #424

Not working on .vue files 😦

@octref You are able to close this now I believe. Your latest release has fixed this and it appears to be working perfectly!