How to configure PHPStorm to work with Vite - Aliases

If you have trouble using "Declaration or Usages" hotkey to navigate to files importing from aliases while working with JS (or Vue) files, example:

<script setup>
import SomeComponent from '@/views/components/SomeComponent.vue'
...
</script>

To resolve this, create a configuration file named phpstorm.config.js in your project's root directory with the following content:

System.config({
  "paths": {
    "@/*": "./resources/js/*",
  }
});

Ensure that the paths configuration aligns with the alias definitions in your vite.config.js. For instance:

  resolve: {
      '@': fileURLToPath(new URL('./resources/js', import.meta.url)),
  ...
  }

By adding the phpstorm.config.js file with the appropriate path mappings, PhpStorm will recognize the aliases, enabling seamless navigation using the "Declaration or Usages" hotkey.