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

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)

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!?

Holy shit it works!

>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)

Argh :(

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

Wrote a lovely little node script and everything!

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)

Does it support junctions?

EDIT: Ah, guess not :( 

It doesn't:(

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.

Logged as https://youtrack.jetbrains.com/issue/WEB-38843, please follow it for updates

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?

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/*" } });

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:

• https://github.com/davestewart/alias-hq/

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')
  }
}