How can I make VSCode auto complete paths (parses) if I use '@ => ./src/component' in Vite project

Question

In a Vite project my config file is as follow

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],

  build: {
    outDir: 'public',
  },

  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src/components'),
      '~': path.resolve(__dirname, './src'),
    },
  },

  envDir: './',
  envPrefix: 'STO_',
});

VSCode doesn't parse paths starting with @ or ~ so if a file doesn't exists I don't even see the error, and I have bad auto-completion experience.

In PhpStorm I think there is a file called phpstorm.config.js where we can tell the editor how to parse such characters.

System.config({
  paths: {
    '@/*': './src/components/*',
    '~/*': './src/*',
  },
});

How can I fix this in VSCode? Is there a similar approach?

Answer 1

same approach as with a webpack

i configured my tsconfig.json (or alternatively jsconfig.json ) to re-map the import statements:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"],
      "@/*": ["./src/components/*"]
    }
  }
}

same answer as https://stackoverflow.com/a/39414291/13278193