-
Notifications
You must be signed in to change notification settings - Fork 995
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
VS Code features not working in RW (b/c of imports) #896
Comments
In order for VSCode to understand the "src/x/y/z" import specifiers, one option is to include a jsconfig.json (or tsconfig.json) that sets the "paths" compiler option. Something like this:
However, given how much "redwood magic" is going on (with "directory named" convention, automatic imports and the importAll macro), |
Hey Tobbe, This type of DX is an area that really matters to us, so thanks for bringing this up, we're going to fix all of these. There are really three magical things at play here. I'll explain how they work and give guidance on how one can opt-out if you don't like the behaviour, but I fully expect to make the experience "VSCode compliant" in the near future. Along with the TypeScript work that I'm currently doing. Module Alias
import { db } from 'src/lib/db'
// -> ./api/src/lib/db @Tobbe I do not know why you're not seeing JSDoc and type information, this is working for me with a standard "create redwood app". Do you have a Opting outRemove the "paths" part from your I believe the amount of places where we reference the Directory named imports
import MyHeader from 'src/components/MyHeader'
// -> ./web/src/components/MyHeader/MyHeader.js This is a webpack plugin, we have an open issue to convert it to babel, which will fix a lot of the issues mentioned here. This only applies to the Opting outRename your component from Auto global importsWe use another babel plugin that detects when you're trying to use When you use one of those we automatically import them for you. We have just very recently shipped a PR that adds global TypeScript definitions for those. Opting outPretend they don't exist and import them yourself. The plugin is intelligent enough to not import it twice. ImportAll/ Import *These will go away soon. It's an implementation detail that doesn't add any value to the consumer of RWJS. |
Thanks for the detailed response 👍
❤️
That screenshot I posted was from the RW framework project. I haven't touched any of the {j,t}sconfnig.json files. But I just went and looked, and it does not seem like these aliases are specified.
This is really nice! |
@Tobbe This is also something that has been nagging me every now and then as well. It's strange, b/c sometimes it works fine, sometimes CTRL-Click just makes VSCode jump to the import statement instead of the component implementation just as you described. From my observations, using an absolute import such as Related issues: |
I hadn't seen those other issues, thanks for linking. If getting rid of directory named imports solves this then I'm all for getting rid of them. But the pushback from the rest of the team is probably going to be pretty strong. So we need to build a very solid case to get this one through. I think we need:
Do you want to help with that? |
@Tobbe I just ran through your example at the top and in the second comment. I could see the expected behaviour for all of these in a new 6.3.1 project. I'm not sure exactly when these would have been resolved. I also know there are likely other issues like this one that aren't resolved. Thoughts on closing this one? |
Confirmed. Works for me too! |
Because of the way RW does imports there are a few useful features of VS Code that aren't working.
Go to Definition
"Go to Definition" is triggered by F12 or Ctrl+Click in VS Code. The way it should work is, if I Ctrl+Click on a component it should open up the file with the source code for that component. With the way Redwood does imports that doesn't work.
Current behavior
I start with this
I then Ctrl+Click on
<MainLayout>
and the highlight jumps to the import at the top of the fileCtrl+Click on the import gives me this
This isn't very useful
Expected behavior
I start with this (notice that I changed to a relative import)
Ctrl+Click on
<MainLayout>
and I'm taken to this file insteadHover
When hovering a component VS Code should show the "signature" of that component (i.e. telling you what props it takes, what it returns, etc)
Current behavior
Expected behavior
Ctrl+Hover
This is the combination of the two features above
Current behavior
Expected behavior
The text was updated successfully, but these errors were encountered: