How to configure PHPStorm to work with Vite - Aliases
Tuan Duong

Tuan Duong @tuandm

About: I'm a PHP coder who wants to make PHP great again!

Location:
Tokyo
Joined:
Feb 14, 2019

How to configure PHPStorm to work with Vite - Aliases

Publish Date: Nov 4 '24
1 0

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>
Enter fullscreen mode Exit fullscreen mode

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/*",
  }
});
Enter fullscreen mode Exit fullscreen mode

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)),
  ...
  }
Enter fullscreen mode Exit fullscreen mode

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.

Comments 0 total

    Add comment