vuejs/vetur

Multi root support

octref opened this issue · 24 comments

octref commented

Issuehunt badges

Explore support for VSCode's new Multi-root workspace feature.
Notably, rootPath now can be a list.

https://github.com/Microsoft/vscode/wiki/Extension-Authoring:-Adopting-Multi-Root-Workspace-APIs

This is somewhat different from #385, depending on the way the user uses VSCode.
For the following app,

/app
  /client
  /server
  /doc
  • One might open /app in one Window. Vetur support for /client is #385.
  • One might open /app/client, /app/server as two top-level folders. That's this issue.
  • One might open two Vue apps as two top-level folders. That's this issue.
IssueHunt Summary

Backers (Total: $250.00)

Become a backer now!

Or submit a pull request to get the deposits!

Tips

alexsasharegan commented

If you need any testing, I have a use case explained here: #423 (comment). I'll be happy to test any progress on this feature.

evenfrost commented

One workaround could be found here: #423 (comment).

brandonson commented

I had issues where this and vscode-jest both wanted to be the first (root) folder. Fixed things to some extent - quick and dirty fix adding multi-root support for Vetur lives here: https://github.com/brandonson/vetur

Clone to your extensions dir and follow setup from Vetur's CONTRIBUTING.md. After the compile step you should be good to go.

It is, as mentioned, a quick dirty fix that iterates through the workspace folders looking for a package.json with vue as a dependency. It won't work for newly added folders (you'll need to restart vscode) and it won't handle the case of two vue workspaces. I'll probably try to clean it up and maybe get to a PR eventually, but time constraints mean that's not at the top of my list right this moment - that, and I don't know how this should interact with the centralization from #800.

Edit to add: See the basic-multiroot branch. Master contains the early hack, basic-multiroot is much better.

  • 👍6
RobertWHurst commented

Any action on this? It's been more than a year and this is still broken.

  • 👍22
rtbo commented

I have a monorepo project with one of the packages being a vue client project with vuetify dependency.
I'm using yarn workspaces.
The structure is like so:

<root>
├── node_modules
│   ├── vue
│   ├── vue-apollo
│   ├── vue-router
│   ├── vuetify
│   ├── vuex
│   ├── [...]
├── package.json
├── packages
│   ├── my-vue-app
│   │   ├── babel.config.js
│   │   ├── node_modules
│   │   │   └── [ nearly empty folder thanks to yarn workspaces ]
│   │   ├── package.json
│   │   ├── public
│   │   ├── src
│   │   ├── [...]
│   ├── [other packages]
└── [...]

If I run VSCode from <root>/packages/my-vue-app, I don't have template intellisense finding vuetify tags/attributes.
I believe this has to do with vuetify being under <root>/node_modules instead of my-vue-app/node_modules.
However If I add a few dependencies under <root>/package.json (which normally has none) and run VSCode from <root>, then template intellisense finally works!
<root>/package.json:

    "dependencies": {
        "vue": "^2.6.10",
        "vue-apollo": "^3.0.2",
        "vue-router": "^3.1.3",
        "vuetify": "^2.1.10",
        "vuex": "^3.0.1"
    },

This doesn't seem to have side effects for me at the moment.
An easy fix would be to extend the dependency search in parent folders if a dependency is not found under ${workspaceRoot}/node_modules. Unless the dependencies are not installed yet, all dependencies should eventually be found that way.

  • 👍2
davidbludlow commented

This problem definitely needs a real fix.

I found a workaround that worked specifically in my case: I had a vscode workspace file like all-projects.code-workspace

{
	"folders": [
		{
			"path": "activities-backend"
		},
		{
			"path": "activities-frontend"
		},
		{
			"path": "graspable-math"
		}
	]
}

The "activities-frontend" folder had my Vue project in it, but Vetur was trying to use the tsconfig.json in my "activities-backend" folder. I fixed it by rearranging my workspace file like

{
	"folders": [
		{
			"path": "activities-frontend"
		},
		{
			"path": "activities-backend"
		},
		{
			"path": "graspable-math"
		}
	]
}

. That got rid of the inappropriate Vetur errors that looked kinda like File '~/git/activities-frontend/src/foo.ts' is not under 'rootDir' '~/git/activities-backend/src'. 'rootDir' is expected to contain all source files.

I haven't tested this with a workspace that has more than one Vue project in it, but I suspect this workaround would fail for that.

  • 👍6
  • 😄1
davidbludlow commented

A related Vetur issue https://issuehunt.io/r/vuejs/vetur/issues/815 has a bounty of $264 so far.

  • 👍6
issuehunt-oss commented

@mesqueeb has funded $10.00 to this issue.

mesqueeb commented

Hi guys. I just funded $10 to this issue.

My use case:

  • I have a Lerna project with a bunch of Vue related projects (some just single components) inside ./packages.
  • I like to open the entire Lerna project in 1 window in VSCode & be able to have Vetur working correctly.

My current issue:

  • Vetur doesn't read the tsconfig.json of each project properly.

image

I hope this funding can promote others to also fund this issue and I hope to see full support for Lerna Monorepo's soon!! <3

  • 👍5
issuehunt-oss commented

@garyo has funded $10.00 to this issue.

  • 👍3
garyo commented

Same here ($10). I'm using Emacs with eglot in a Yarn workspaces monorepo where the Vue front-end project is in one of the workspaces.

  • 👍1
bangjelkoski commented

This problem definitely needs a real fix.

I found a workaround that worked specifically in my case: I had a vscode workspace file like all-projects.code-workspace

{
	"folders": [
		{
			"path": "activities-backend"
		},
		{
			"path": "activities-frontend"
		},
		{
			"path": "graspable-math"
		}
	]
}

The "activities-frontend" folder had my Vue project in it, but Vetur was trying to use the tsconfig.json in my "activities-backend" folder. I fixed it by rearranging my workspace file like

{
	"folders": [
		{
			"path": "activities-frontend"
		},
		{
			"path": "activities-backend"
		},
		{
			"path": "graspable-math"
		}
	]
}

. That got rid of the inappropriate Vetur errors that looked kinda like File '~/git/activities-frontend/src/foo.ts' is not under 'rootDir' '~/git/activities-backend/src'. 'rootDir' is expected to contain all source files.

I haven't tested this with a workspace the has more than one Vue project in it, but I suspect this workaround would fail for that.

I can confirm that this solution works. Moving your vue or nuxt project on the top of the list fixes the issue.

  • 👍1
issuehunt-oss commented

An anonymous user has funded $5.00 to this issue.

  • 👍4
heavenkiller2018 commented

oh, my god! who can fix the bug?

  • 👎6
Minigugus commented

#1734 seems to work with lerna projects and multi-root workspaces. Can someone give it a try?

  • 👍3
  • ❤️1
mesqueeb commented

@Minigugus that would be a dream come true 😍 I hope someone can test and merge soon <3

  • 👍3
johnsoncodehk commented

In case someone need, here is a transition tool that can be used before Vetur support multi root:
https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar

  • 👍3
  • 🚀1
  • 👀2
vigenere23 commented

In case someone need, here is a transition tool that can be used before Vetur support multi root:
https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar

Thanks for that! Works great, but it throws some linting errors that Vetur doesn't throw :/

  • 🎉1
kytosai commented

@octref

This problem has been going on for a long time, and there are many projects that require multi root

I have seen some PRs addressing the multi-root issue, I hope you can consider leaving it as an option to enable or disable to temporarily resolve the extension's multi rool issue until you have a good solution !

Thanks you !

  • 👍2
issuehunt-oss commented

An anonymous user has funded $20.00 to this issue.

  • 👍4
issuehunt-oss commented

@tobspr has funded $100.00 to this issue.

  • 👍3
  • ❤️7
  • 🚀8
yoyo930021 commented

Hi everyone,

If you interested this issue,

you can go to #2377 and #2378.
View and post your ideas.

  • 👍1
  • ❤️1
issuehunt-oss commented

An anonymous user has funded $100.00 to this issue.

  • 👍5
  • ❤️8
  • 🚀2
issuehunt-oss commented

An anonymous user has funded $5.00 to this issue.