VSCode Intellisense does not work with webpack + alias - visual-studio-code

Question

I have a project using babel alias:
resolve: {
alias: {
vue: 'vue/dist/vue.js',
'#cmp': resolve('src/components'),
'#service': resolve('src/services'),
'#scss': resolve('src/assets/styles'),
}
}
and a component with:
import someService from '#service/some'
And the Intellisense does not work.
with:
import someService from '../../../../service/some'
It does.
Any suggestions?

Answer 1

Try creating a jsconfig.json and configuring the paths compiler options
{
"compilerOptions": {
"baseUrl": ".",
"module": "commonjs",
"paths": {
"#cmp/*": ["./src/components/*"]
}
}
}
You can find more information about paths and other compiler options here

Answer 2

This worked for me, as suggested here (I wanted #/ to resolve to ./src/):
{
"compilerOptions": {
"target": "es2017",
"allowSyntheticDefaultImports": false,
"baseUrl": "./",
"paths": {
"#/*": ["src/*"],
}
},
"exclude": ["node_modules", "dist"]
}
Minimal version, but I'd leave exclude too:
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"#/*": ["src/*"]
}
},
}

Answer 3

Just to add to Matt's answer, in a TypeScript project you don't need to create a jsconfig.json file, you can simply add it to your tsconfig.json file and vscode picks it up.
{
"compilerOptions": {
...
"paths": {
"#MyAlias/*": ["./myDirectrory/*"]
}
}
}

Answer 4

For those who want to get IntelliSense working for resolving directly from src like with your webpack config.
Ie.
import Requests from 'utils/requests';
and that file lives at src/utils/requests.js
...
# jsconfig.json
{
"compilerOptions": {
"baseUrl": "./",
"module": "commonjs",
"target": "es6",
"paths": {
"*": ["src/*"]
}
}
}
# webpack.config.js
resolve: {
symlinks: false,
modules: [
path.resolve('./src'),
'node_modules',
],
},