How to enable support for SvelteKit's $lib alias in WebStorm (and PhpStorm, etc)?

Question

Is it possible to define a special mapping that enables PhpStorm (or other WebStorm based IDEs) to have the ability to find files located in SvelteKit's special $lib directory alias?

For example, in PhpStorm, I'm importing global styles like so:

<script context="module">
    import '$lib/global-styles.scss';
</script>

However, the IDE unfortunately displays "Cannot find declaration to go to" when attempting to navigate to that particular file:

Answer 1

Seems the fix was reasonably easy (inspired by this answer). Just add a path alias to any JS file in the root of your project called .webstorm.js (filename isn't important):

// eslint-disable
System.config({
    "paths": {
        "$lib/*": "./src/lib/*",
    }
});

Now navigation to paths under $lib/* should "just work" ✨ automatically. Unfortunately I can't find documentation for this special WebStorm-specific System.config() workaround, the best I could find was this comment on Jetbrains' issue tracker.

---

Edit (May 2, 2023): Also, for TypeScript support, use the method suggested in This Answer by Tyrone which may have broader support outside of just Jetbrains IDEs