-
Notifications
You must be signed in to change notification settings - Fork 27.9k
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
Peek/Go To Definition & Click to Open do not work with Webpack alias #16320
Comments
EDIT: I only seem to be able to get path autocompletion, not "peek" or "Go to definition" with the feature described below. I've recently switched computers (from a PC to a Mac), and could have sworn it worked on the PC. Will investigate and update once I know more. It may be of interest to note that the latest release of WebStorm brings this feature. I mention this not to suggest making the switch, but rather to further underline that this could be a very useful feature :) I'd like to clarify what @damonbauer states above: the feature can be achieved manually with the Path Intellisense extension, by defining {
"path-intellisense.mappings": {
"/": "${workspaceRoot}",
"lib": "${workspaceRoot}/lib",
"global": "/Users/dummy/globalLibs"
},
} |
+1 Very useful to me. |
@wanecek Were you able to get Peek Definition and CMD+Click working with the |
+1 would be super awesome to have this. We just moved all the import paths in our project to use webpack aliases and I miss the command clicking. I can only get the autocomplete to work with path-intellisense.mappings. |
You can accomplish this using the "paths" option. Full writeup here. TL;DR add
to your jsconfig.json or tsconfig.json in your project's root. |
Link to official docs https://code.visualstudio.com/docs/languages/jsconfig |
can't get this to work : "path-intellisense.mappings": { OR / AND { |
Hey @wesleymostien, I ended up solving it by putting a {
// This file is required for VSCode to understand webpack aliases
"compilerOptions": {
// This must be specified if "paths" is set
"baseUrl": ".",
// Relative to "baseUrl"
"paths": {
"@/*": ["./src/*"],
}
}
} which works fine for me. I think you might be missing the asterix ( |
@wanecek doesn't seem to matter now I have this :
so, I can import absolute mapping with 'components/....' . That part works! But the problem is, Intellisense doesn't show me *.vue files, can this be fixed? |
Not sure I understand this... Did you get the Intellisense features (e.g. the type-hint tooltips on hover) working or not? If not, you might want to give this a try as well. "paths": {
"components/*": ["./components/*"]
} For the "path-intellisense.mappings": {
"@": "${workspaceRoot}/src"
}, |
I get autocomplete suggestions indeed, but that dropdown list doesn't
include vue files. Only ts, js... files
Did anyone got this working?
|
Yeah, I've got this working, not sure what's making it work though. However, I think this issue is getting out of topic. Send me an email instead (see my GH profile) and I'll try to help you :) |
tried all solutions provided here, no one is correctly working :( ctrl+click still no reaction |
I've found solution I have jsconfig.json in my project root with these settings {
"compilerOptions": {
"baseUrl": "./",
"paths": {
"~/*": ["./src/*"],
"@/*": ["./src/components/*"]
}
} |
in general it doesn't matter if there's If you have that file hierarchy |
Do not forget to make sure that in your visual studio code settings
|
Somehow I still can't get this to work. I've got a jsconfig.json My webpak resolve config
My jsconfig.json
|
@nickngqs , don't know how it works but try this on jsconfig: I was having trouble and somehow the extra wildcard helped me. Maybe someone could add something about it. |
My .jsconfig looks like: {
"module": "es6",
"compilerOptions": {
"module": "es6",
"target": "es5",
"allowSyntheticDefaultImports": true,
"baseUrl": "./source/",
"paths": {
"*": ["./assets/js/*"],
"vendor/*": ["./vendors/js/*"]
}
},
"exclude": [
"node_modules"
],
"compileOnSave": false
} And works like a charm |
I'm having the same problem, but I do not get any suggestions at all, as soon as I'm in the alias directory... For Example if I am using: I have followed this guide, but no success. My jsconfig.json: {
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"allowSyntheticDefaultImports": true,
"baseUrl": ".",
"paths": {
"first": ["./src/first"],
"second": ["./src/second"],
"third": ["./src/style/css/home"],
}
},
"exclude": [
".gitlab",
".storybook",
".vscode",
"node_modules",
"public"
]
} Any ideas? |
If your project structure looks like
and you import your file like this
then your jsconfig.json should look like
|
Hello all, “moduleResolution”: “node”, Seems to be necessary if you have your exports from your alias in an index.js file. Ta! |
Both did not work for me. Here is a more detailed setup, can anyone point me to the right direction? |
See #30290(Go to definition for .jsx does not work). I was trying all the snippets from this thread with no luck until I found that it worked on .js files, but not .jsx, where I did all the testing. |
I built a minimal broken test project (zip, 3kB) for my use case. Can anyone give a look at it? Ping @mjbvz Extract the zip and see README.md: like other people, path autocompletion works, but not "peek" or "Go to definition".
Am I still doing something wrong in my |
Is there no solution for this as of this time? I'm going crazy working in a new Vue project and i dont think i can handle it. |
For those that may still be having trouble with this issue, the location of the jsconfig file is important! I was trying to put it in the root of the repo and no combination of path/baseUrl would allow the Peek/Go To Definition to work. It was after I moved it into src that I could get it to work (The realization came from reading this issue microsoft/vscode-docs#119). |
this helped me a lot (jsconfig.json) |
Setting |
@suyi91 try remove
|
Me too, but it didn't solve my problems. |
I'm still into trouble with this 😢 The webpack build process and intellisense completion feature goes well, btw. My configs: module.exports = {
...
resolve: {
alias: {
"~": path.resolve(__dirname, 'src'),
Styles: path.resolve(__dirname, 'src', 'assets', 'styles'),
Images: path.resolve(__dirname, 'src', 'assets', 'images'),
}
},
...
}; jsconfig.json {
"exclude": ["node_modules", "dist"],
"compilerOptions": {
"module": "es6",
"allowSyntheticDefaultImports": false,
"baseUrl": "./",
"paths": {
"~/*": ["src/*"],
"Styles/*": ["src/assets/styles/*"],
"Images/*": ["src/assets/images/*"]
}
}
} |
After dealing with this for a little bit:
resolve both Ctrl+Click, Peek, GoToDef and path completion for me. Specifically adding an undocumented What doesn't work is the |
you saved my day man! they key was the undocumented It's working for me using React components and .JSX files:
Here is my config file: {
"compilerOptions": {
"jsx": "preserve",
"baseUrl": ".",
"paths": {
"*": [
"*",
"src/*"
]
}
},
"exclude": ["node_modules"]
} |
Finally got this working with React jsx, with go to definition and all. You need jsconfig.json, looking like this (note you need the "jsx": "react" property, and to specify the trailing 'index.jsx' in the aliases, if using the implicit class-as-folder-name paradigm):
Then imports like this all work:
Hope it helps! |
Hey, @claudio-moya / @rw3iss! I really appreciate your help! {
"exclude": ["node_modules", "dist"],
"compilerOptions": {
"jsx": "react",
"baseUrl": "./src",
"paths": {
"~/*": ["./*"]
}
}
} Here is a working example view from a simple CRA that I tested right now! |
I was defining all properties OUTSIDE of compilerOptions and therefore it wasn't working. The dumbest thing I've wasted time on. |
Peek to definition works fine just only with js-ts-tsx-jsx files. I configured path-intellisense.mappings in .vscode/settings.json and it affects on path_autocomplete but peek-definition doesn't work at the same time. What is solution can be for this??? |
@Yegorich555 I don't think TS can or should complete images, fonts, etc. All of them have a behaviour defined only in webpack loaders' sense (or other bundler). They don't make sense as ES or TS modules at all. So TS can't and shouldn't hook into bundlers's compilation process |
@troglotit I see your point and it makes sense. But I would like to see organic and cohesive system for frontend-development. Vue is a good extension for developing *.vue on VSCode but it's related to vue and unfortunately webpack doesn't provide anything similar for native js and ts... |
we should have an extension that can automatically tap into webpack config bridge vscode gap |
Yes. It makes sense. |
Vue uses Vetur which itself is an LSP server. Maybe more sound architectural solution would be "Webpack LSP server" which uses tsserver as a library for js/ts, and with additional servers for other kinds of artifacts. |
Thanks for this @rw3iss, super helpful. Also had trouble with baseUrl as
|
Cool, nice way to avoid all the aliases! Thanks for sharing. |
Did Command Click work for you? |
Totally forgot about (*) asterisk thing, thanks |
Thanks! It is working with CRA as expected! Sad to see this issue to be still open for so many years. I hope it will be fixed someday soon. |
After a lot of attempts, this worked in my case: {
"compilerOptions": {
"baseUrl": ".",
"allowJs": true,
"resolveJsonModule": true,
"jsx": "preserve",
"module": "commonjs",
"target": "es5",
"sourceMap": true,
"paths": {
"$root/*": ["./*"],
"@/*": ["src/*"]
}
},
"include": [
"**/*",
"**/*.json"
],
"exclude": [
"node_modules"
]
} |
I still can not get CTRL + CLICK working for absolute paths. I have tried every setting in jsconfig, webpacking resolve, path intellisene plugin for VSCode... nothing changes. |
Why are you using absolute paths? Relative to machine root? Seems odd...
Anyway to put a baseUrl value in tsconfig of the root path, then make all
the imports relative to this base?
…On Fri, Jul 10, 2020, 10:28 AM Wesley Mostien ***@***.***> wrote:
I still can not get CTRL + CLICK working for absolute paths.
I have tried every setting in jsconfig, webpacking resolve, path
intellisene plugin for VSCode... nothing changes.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#16320 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAC23GEYKVEZ7L5RBVZB3PDR24QPPANCNFSM4CYFGBLA>
.
|
I've been wrestling with not being able to "click open Component files" for a month since implementing webpack aliases, and found the solution from this thread.
|
For anyone still struggling, I created a gist of my config that FINALLY works, without any errors etc after a few hours of googling. It's likely I have redundancies in there.. but it's Friday evening and I am just glad it works 😅 |
Using normal, path based imports, Peek/Go To Definition and CMD+Click to open file from import work wonderfully. When using a Webpack alias, Peek/Go To no longer work. It kind of "fails silently" in that nothing appears (not even an error message).
Steps to Reproduce:
Desired Behavior:
I've created a reduced repo that demonstrates the behavior: https://github.com/damonbauer/webpack-alias-demo/
I'm setting an alias in the webpack config to map the word
app
to the path of/src
. Then in a file, I'm importing another with ES6 imports.Edit: I'm also using the PathIntellisense extension with custom mappings so I can get path autocompletion when using an alias in an import. Perhaps there could be something helpful in that repo?
The text was updated successfully, but these errors were encountered: