Intellisense for projects
Are there any recommendations for setting up intellisense in VS Code to allow for autocompletion and similar features?
I assume it's due to the separation of the dev code vs the output code, but it would be nice to have autocompletion and auto-importing. For example, I just added a component library to the dependencies and it looks like I have to manually import every component I want to use (I know, first-world dev problems 🙃).
6 Replies
Hey, so you are referring to atuocompletion and similar in JS/TS code, right, not in .wasp file?
If so, you actually should have that working quite well! Yup, separation of the dev code vs outputed code does make things a bit complex in the background (and we are working on an improvement for that, should be coming out in a month or so), but even with that you should get a JS/TS LSP that works well in VS Code.
Let's maybe look into specifics -> that component library you added -> yeah, that should work normally, as in some other JS/TS project. When you say you have to manually import every component you have to use -> you mean that once you start using it in your file, you don't get a code action offered that will guess and add the import for you, but you have to write that import yourself? Can you confirm it works for you if not using Wasp project but instead using vanilla TS project?
Sorry, just now getting a chance to dig back into this.
Yes, I'm referring to autocompletion in the ts/tsx files. For example, if I add
useState in one of my components, I get the red squigglies (expected). But, when I try to get Intellisense to fix the problem, it has no knowledge of the react module.
And... it looks like it doesn't work for a new project. Which is weird, because I have existing projects this works fine for, and I don't remember having to do anything specific to get it working.
It works if I spin up a new create-react-app. So is there a configuration file I'm missing? I thought the tsconfig.json files were enough.Thanks @cgduzan for explaining this better!
Ok, so what you are saying is that in Wasp you don't get code actions (those are called "code actions") offered for importing a module when there is an unknown name/identifier.
Interesting, let me discuss this with the team a bit. Might be due to the dichotomy you described, specifically the fact that we don't have a node_module or package.json at the top level of the project -> if that is the cause, than that will get fixed soon with the new major version of Wasp, due to the restructuring we are doing.
Cool! Thanks for the update @martinsos !
Hi @cgduzan!
Good question. The short version is:
Auto imports are kind of working, but not fully. After you add a single symbol from a library (e.g., Link from
react-router, VS Code will know how to autocomplete other imports from the same library. This applies for all libraries across all files.
It'a an annoyance, for sure. We're planning to fix it by restructuring how Wasp projects look, which is a change we'll ship in a couple of weeks.
Can you confirm that this is how it works for you too (i.e., works after you import the first thing yourself). If not, then we have a bigger problem than we thought 😅Yeah, looks like that's what I'm seeing 👍