VSCode Intellisense does not work with webpack + alias

user_3479308 0
Viewed 13310

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?

vscode-settings visual-studio-code
3 Answers

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

user_3061490

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/*"]
    }
  },
}
user_68051430

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/*"]
        }
    }
}
user_50731890
Related