Is there a canonical way to set up prefixed @ / ~ aliases?

Situation

In projects, we're using a variety of different ways to set up aliases:

  • webpack (simple and complex)
  • typescript (.tsconfig)
  • sometimes Nuxt (which has its own config for aliases)

Depending on the project / framework we use a combination of:

  • no prefix
  • @ prefix
  • ~ prefix

We also mark some folders as resource roots.

We use ES6 and also TypeScript

We use standalone files and also Vue SFCs

Sometimes we use JavaScript <script> tags, other times <script lang="ts"> tags. 

Problem

We're finding that sometimes Webstorm is brilliant at figuring out where the alias is, and other times, it has no idea.

We figure from other posts, that Vue SFC / lang="ts" support is not quite there yet.

Question

Can someone explain once and for all how Webstorm figures out aliases?

It would be great to have a list that we can refer to so we know it does a, b, c to work this out.

And if there are gaps, could some workarounds be suggested?

Thanks,

Dave

PS. See my Tweet :P

https://twitter.com/dave_stewart/status/1046802204580106241

10 comments
Comment actions Permalink

In Javascript, the only way to set up aliases that is supported officially is using webpack. Webpack aliases work in both .js files and .vue files with <script lang="javascript">

In Typescript, only path mappings in tsconfig.json are supported, and this only works in .ts files - Vue.js single file components with <script lang="ts"> are not yet supported

 

Marking folder as Resource root works in all files, but this is not about aliases - you can't rename a folder this way, just can shorten the path from the project root (`components` instead of `src/app/components`, for example)

0
Comment actions Permalink

Hi Elena,

Thanks as always!

Firstly, any idea when TypeScript support will be added? This is one of the last links in the chain for us. VSCode supports this, but we will not be moving to VSCode!

Secondly, we think we may have a solution.

The solution relies on using WebStorm's `Mark as Resource` feature, and we figure there are two options:

  1. remove all symbols from our aliases, which would allow WebStorm's to match folders correctly
  2. create a new root level folder called `aliases`,  and inside, create a prefixed symlinks to each of the actual folders:
alias/
@components/
@pages/
@store/
@utils/
...
src/
app/
components/
pages/
store/
...
core
utils/
...

 

Any thoughts!?

0
Comment actions Permalink

Holy shit it works!

0
Comment actions Permalink

>any idea when TypeScript support will be added?

Please follow https://youtrack.jetbrains.com/issue/WEB-29799 to be notified on any progress with this feature; it would likely require implementing special TypeScript language service extension to handle .vue files (like it's done in VSCode as a part of https://github.com/octref/vetur project), https://youtrack.jetbrains.com/issue/WEB-33130 

>Any thoughts!?

First solution looks better for me, as using symlinks may cause unwanted side effects (WebStorm doesn't play well with them in general)

0
Comment actions Permalink

Argh :(

Yes, now finding out that source folder updates are not reflected in symlinks :(

Wrote a lovely little node script and everything!

0
Comment actions Permalink

fsnotifier tool we use to synchronize the IDE virtual file system with external changes doesn't support symlinks (https://youtrack.jetbrains.com/issue/IDEA-65174)

0
Comment actions Permalink

Does it support junctions?

EDIT: Ah, guess not :( 

1
Comment actions Permalink

Is there any update on this?

I'm still getting an error on import statements using aliases.

I'm using nuxt and typescript with Phpstorm 2019.1.2.

0

Please sign in to leave a comment.