16

Vite isn't supported by the PhpStorm / WebStorm yet, so given following Vite configuration:

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '/src'),
    },
  },
});

it doesn't recognize the following import correctly:

import { getAllItems } from '@/api'

How can this be setup to work correctly?

LazyOne
  • 158,824
  • 45
  • 388
  • 391
entio
  • 3,816
  • 1
  • 24
  • 39

1 Answers1

30

Create a JavaScript file in a root of your project (name doesn't really matter, I'll go with phpstorm.config.js) and mirror your aliases configuration like shown below:

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

Php/Webstorm will pick it up automagically. It's probably a good idea to add it to the .gitignore.

Another option is to create a jsconfig.json following the pattern below:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Read more on this solution in the docs of VSCode

entio
  • 3,816
  • 1
  • 24
  • 39
  • 1
    another option is using `jsconfig.json` for specifying path aliases, see https://code.visualstudio.com/docs/languages/jsconfig#_using-webpack-aliases – lena Mar 31 '21 at 10:23
  • 1
    @lena yeah haha, I'd say using visual studio is another option indeed :P – entio Mar 31 '21 at 14:47
  • 5
    I'm not suggesting using VSCode:) WebStorm/PHpStorm do support resolving aliases defined in `jsconfig.json`, so it's just another way to define your aliases. We can't afford supporting all possible ways to define path mappings coming from different bundlers, frameworks and plugins, so in the future we'd likely provide some unified way to deal with them in the IDE. And using `jsconfig.json` is one of the options we are evaluating now – lena Mar 31 '21 at 16:21
  • Oh, sorry then :sweat-smile: I was a bit shocked that a jetBrains engineer advocates using VScode. I'm updating my answer right away! – entio Mar 31 '21 at 19:31
  • Decent workaround. A bit of a pain to then need to define your aliases in 2 files, solely for the IDE however. – logicOnAbstractions Jul 06 '22 at 21:55
  • 2
    What about just giving us a way, in IDE settings to define custom aliases? – John Carrell Sep 23 '22 at 14:05
  • If I try System.config({ "paths": { "/autocode-js/*": "./web/app/autocode/*" } }); -- then import {...} from "/autocode-js/php-enums.mjs" is still not recognized. Any ideas? – Meglio Apr 28 '23 at 03:27