Custom import paths jsconfig.json

Avatar
Michel Kuguio
Created

So when using something that rewrites import paths -- specifically: babel-plugin-root-import -- we lose intellisense.

This is very useful for large projects, because it avoids deeply nested path resolutions, e.g.

import 'thing-to-test' from '../../../../../src/feature/subfeature/helper/thing

These are a big nuisance because apart from being ugly & it's hard to locate the file in the first place, anytime you move a code block, you have to refactor them. The aforementioned module lets you define an alias like "~=/src" and then just:

import 'thing-to-test' from '~/feature/subfeature/helper/thing

in vscode is ok when i use jsconfig but in webstorm not work. =S

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"]
    },
    "target": "ES6",
    "jsx": "preserve",
    "allowSyntheticDefaultImports": true
  }
}

Votes

1

Share

2 comments
Avatar
Elena Pogorelova
Created

jsconfig.json is not currently supported, please follow https://youtrack.jetbrains.com/issue/WEB-30581 and https://youtrack.jetbrains.com/issue/WEB-36390

 

You can 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) in your project root, define the path mappings there, like:

System.config({
    "paths": {
        "~/*": "./src/*"
    }
});
2
Avatar
Loic Hamou
Created

Thank you so much Elena Pogorelova 

0

Please sign in to leave a comment.