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?
same approach as with a webpack
i configured mytsconfig.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