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:

• baseUrl: "." -> "./"
• paths (key): "@components", "@components/", "@components/*", "*"
• paths (value): ["src/components/"], ["src/components/*"], ["src/*"]