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…


This content originally appeared on DEV Community and was authored by Tuan Duong

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>

The solution is quite simple, just create a configuration file in the root folder of project, named "phpstorm.config.js" and put this settings:

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

The "paths" must be similar to the ones we used in vite.config.js, ex:

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

After creating that "phpstorm.config.js" file, PHPStorm will automatically understand the aliases and do the navigation normarly.


This content originally appeared on DEV Community and was authored by Tuan Duong


Print Share Comment Cite Upload Translate Updates
APA

Tuan Duong | Sciencx (2024-11-04T04:04:00+00:00) How to configure PHPStorm to work with Vite – Aliases. Retrieved from https://www.scien.cx/2024/11/04/how-to-configure-phpstorm-to-work-with-vite-aliases/

MLA
" » How to configure PHPStorm to work with Vite – Aliases." Tuan Duong | Sciencx - Monday November 4, 2024, https://www.scien.cx/2024/11/04/how-to-configure-phpstorm-to-work-with-vite-aliases/
HARVARD
Tuan Duong | Sciencx Monday November 4, 2024 » How to configure PHPStorm to work with Vite – Aliases., viewed ,<https://www.scien.cx/2024/11/04/how-to-configure-phpstorm-to-work-with-vite-aliases/>
VANCOUVER
Tuan Duong | Sciencx - » How to configure PHPStorm to work with Vite – Aliases. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/11/04/how-to-configure-phpstorm-to-work-with-vite-aliases/
CHICAGO
" » How to configure PHPStorm to work with Vite – Aliases." Tuan Duong | Sciencx - Accessed . https://www.scien.cx/2024/11/04/how-to-configure-phpstorm-to-work-with-vite-aliases/
IEEE
" » How to configure PHPStorm to work with Vite – Aliases." Tuan Duong | Sciencx [Online]. Available: https://www.scien.cx/2024/11/04/how-to-configure-phpstorm-to-work-with-vite-aliases/. [Accessed: ]
rf:citation
» How to configure PHPStorm to work with Vite – Aliases | Tuan Duong | Sciencx | https://www.scien.cx/2024/11/04/how-to-configure-phpstorm-to-work-with-vite-aliases/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.