CODEWITHSUNDEEP
javascriptvisual-studio-codeautocompleteintellisense
charcole
charcole

Reputation: 143

Is VSCode Intellisense unable to autocomplete absolute imports using webpack aliases?

I have a Gatsby project, and I'm trying to eliminate complicated relative imports. Setting up aliases for absolute imports worked perfectly, I am using gatsby-plugin-alias-imports & eslint-plugin-import so that these aliased paths resolve during build and within eslint without any errors.

gatsby-config.js:

...
{
    resolve: 'gatsby-plugin-alias-imports',
    options: {
        alias: {
            '@components': 'src/components',
        },
        extensions: ['.js', '.jsx', '.json'],
    },
},

and eslintrc.js:

...
settings: {
    react: {
        version: 'detect',
    },
    'import/resolver': {
        alias: {
            map: [
                ['@components', './src/components'],
            ],
            extensions: ['.js', '.jsx', '.json'],
        },
    },
},

But VScode won't autocomplete these paths while I'm trying to type a new import. I found this and set up a jsconfig, but it made no difference: https://code.visualstudio.com/docs/languages/jsconfig#_using-webpack-aliases

jsconfig.json

"compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "baseUrl": ".",
    "paths": {
        "@components/*": ["/src/components"],
    }
},

I've tried several difference variations on the paths setup in jsconfig which I've seen on other questions, but none of them make a difference. I'd like to be able to get an autocomplete popup when I start typing, for example,

import Button from '@components/common/Button'

but I get nothing. Is this just not possible?

ps. changes I've tried in jsconfig.json:

Upvotes: 0

Views: 1354

Answers (1)

charcole
charcole

Reputation: 143

Solved: You can't have a tsconfig and jsconfig in the same repo.

We accidentally had a tsconfig in the non-ts project, and this caused VSCode to ignore jsconfig entirely.

Upvotes: 0

Related Questions