Typescript: How to auto import with absolute paths if baseUrl is set in tsconfig.json

In my tsconfig.json I have set a base url:


"baseUrl": "src/app",

 

I want the IDE to auto import modules as absolute paths starting from this base URL. But Intellij IDEA always uses relative paths, even though I specified the baseUrl.

 

Is there a way to change this behaviour?

3
10 comments

In Settings | Editor | Code Style | TypeScript | Imports, try enabling Use paths relative to tsconfig.json. When this checkbox is selected, WebStorm calculates import paths relative to "baseUrl" specified in tsconfig; if this option is omitted, it's considered to be equal to a directory where tsconfig.json is located

15
Avatar
Permanently deleted user

Thank you, that solved the problem.

0

this is no longer respecting the baseUrl for me with my recent update to PHPStorm

PhpStorm 2018.3.3
Build #PS-183.5153.36, built on January 9, 2019
JRE: 1.8.0_152-release-1343-b26 amd64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Windows 10 10.0

0

works fine for me. Sample project that shows up the issue woiuld be appreciated

0

I'll work on getting something together. What all will you need regarding a sample project? Is it just a breakdown of structure or do you want an entire zipped folder that includes the .idea folder or something else entirely?

0

I need a minimal sample you can recreate the issue with. As I have no idea what is causing your issue, I can't tell for sure what files to include in it...

0

Is there a way to get this to work with a mixed project? Currently, WebStorm attempts to import from the full path from within a ".jsx" file (ignoring the baseUrl specified in the tsconfig file), but imports correctly from within a ".tsx" file. I've tried adding a jsconfig file with just the baseUrl, but that is ignored when the "tsconfig" file is present (works if I then delete the "tsconfig" but that obviously then breaks the actual application).

0

if I have

"allowJs": true,
"baseUrl": "./src"

in tsconfig.json and Use paths relative to the project, resource or sources roots and Use paths relative to tsconfig.json are enabled in JavaScript and Typescript code style settings respectively, auto-import uses the specified baseUrl when importing both .ts and .js files in Typescript files

0

Hey, thanks for the help. Those are the exact same settings that I have, and imports from within Typescript files work as expected whether I am importing .js or .ts files like you say. The issue I have is when I try to import a .ts file from within a Javascript file, or even other .js files, JavaScript files do not resolve paths from the tsconfig file and ignore the base baseUrl setting, they work if I specify a jsconfig file (but only if I delete my tsconfig file which I obviously don't want to do)

0

We have a feature request for supporting tsconfig.json baseUrl in javascript files, https://youtrack.jetbrains.com/issue/WEB-52647. Please vote for it to be notified on any progress with it

0

Please sign in to leave a comment.