Vite isn't supported by the PhpStorm / WebStorm yet, so given following Vite configuration:
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, '/src'),
},
},
});
it doesn't recognize the following import correctly:
import { getAllItems } from '@/api'
How can this be setup to work correctly?
Create a JavaScript file in a root of your project (name doesn't really matter, I'll go with phpstorm.config.js
) and mirror your aliases configuration like shown below:
System.config({
"paths": {
"@/*": "./src/*",
}
});
Php/Webstorm will pick it up automagically. It's probably a good idea to add it to the .gitignore
.
Another option is to create a jsconfig.json
following the pattern below:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
Read more on this solution in the docs of VSCode