How to setup PhpStorm / WebStorm to work with Vite aliases?

Question

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?

Answer 1

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