Tengo un proyecto de Gatsby y estoy tratando de eliminar importaciones relativas complicadas. La configuración de alias para importaciones absolutas funcionó perfectamente. Estoy usando gatsby-plugin-alias-imports y eslint-plugin-import para que estas rutas con alias se resuelvan durante la compilación y dentro de eslint sin ningún error.

gatsby-config.js:

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

y eslintrc.js:

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

Pero VScode no completará automáticamente estas rutas mientras intento escribir una nueva importación. Encontré esto y configuré un jsconfig, pero no hizo ninguna diferencia: https://code.visualstudio.com/docs/languages/jsconfig#_using-webpack-aliases

jsconfig.json

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

Probé varias variaciones diferentes en la configuración de rutas en jsconfig que he visto en otras preguntas, pero ninguna de ellas marca la diferencia. Me gustaría poder obtener una ventana emergente de autocompletar cuando comience a escribir, por ejemplo,

 import Button from '@components/common/Button'

pero no consigo nada. ¿Esto simplemente no es posible?

PD. cambios que he probado en jsconfig.json:

• baseUrl: "." -> "./"
• rutas (clave): "@components" , "@components/" , "@components/*" , "*"
• rutas (valor): ["src/components/"] , ["src/components/*"] , ["src/*"]