React with JetBrains WebStorm auto import with absolute path instead of relative

Question

I'm doing various projects in React.js with using awesome WebStorm by JetBrains.

Every time I type an existing component name WebStorm imports it automatically for me, which is awesome, but it is doing so by its relative path based on the file I'm doing the importation on.

Looks like so:

import vintageAxios from "../../../../services/api/index";

But I'm expecting it to be like:

import vintageAxios from "services/api/index";

I already setup my .env.local file with the NODE_PATH=src/ variable, I've used create-react-app to setup the project.

EDIT: I'm not having problems with the importations. What I want to know is if there is a way to configure WebStorm so it automatically does the importations with absolute instead of relative paths.

Answer 1

Found it (WebStorm 2017.2), after marking your source directory (ex. /src) as the source root (right click it to find that), you can then check this box:

Answer 2

For anyone using Typescript. Check the option Use paths relative to tsconfig.json in Editor > Code Style > Typescript