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

0
13 comments

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

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

Holy shit it works!

0

>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

Argh :(

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

Wrote a lovely little node script and everything!

0

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

Does it support junctions?

EDIT: Ah, guess not :( 

1
Avatar
Permanently deleted user

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

Is there a way to use a webpack config file in a project that doesn't actually use webpack, just to trick PHPStorm into resolving module aliases correctly?

0

Sz Holyszewski yes, you can create a file like

module.exports = {
entry: {
app: ['./main.js']
}
resolve: {
alias: {
'@': path.resolve(__dirname, './app')
}
}

and specify a path to it in Settings | Languages & Frameworks | JavaScript | Webpack

Or, try a workaround from https://youtrack.jetbrains.com/issue/WEB-22717#focus=streamItem-27-1558931-0-0:

  • create a file config.js (you can use a different name if you like) in your project root dir

  • define your aliases there using the following syntax:

System.config({ "paths": { "@/*": "./app/*" } });

 

 

0

FWIW, I created an open source library Alias HQ to your project's js/tsconfig.ts as the single source of truth for aliases; compatible with Webpack, Jest, Vue, React, WebStorm, and other libs and IDEs (full list of integrations here):

Check out the repo and docs here:

 

Once installed, your Webstorm webpack config file can look like this:

// webpack.config.js
import hq from 'alias-hq'

module.exports = {
  resolve: {
    alias: hq.get('webpack')
  }
}

 

0

Please sign in to leave a comment.