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:

Antecede

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

Antecede

For me, it doesn't work – Slaby

@Slaby Can you provide more details about what IDE you're using, what you tried and what is happening? – Antecede

Did not work for me either (using Webstorm) – Gery

Worked on PHPStorm with .phpstorm.js file – Apterous

Answer 2

I had this issue but resolved it (since I am using Typescript) by adding a paths entry in my ./tsconfig.json at the root of my project.

{
  // ...
  "compilerOptions": {
      "paths": {
          "$lib/*": ["src/lib/*"],
      }
   }
}

Cathicathie

That's great, thanks Tyrone. That works for me in PhpStorm as well. I'll drop this into my answer and credit you! – Antecede

p.s. Thanks for editing, my intent was to call attention to your answer. 😊 Updating it to actually link to your answer as well. – Antecede

Answer 3

Try to add baseUrl in tsconfig.json of your project:

{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
    ...
    "baseUrl": "./src"
}

Bohemian