How to make Visual Studio Code use path mappings for automatic imports?

Question

I want to have absolute paths in my project to avoid ugly paths and to have constant imports wherever a file is in the project tree.

I have added this in the tsconfig.json

"paths": {
  "@myapp/*": ["*", "app/*"]
}

I can now have working imports like import {... } from '@myapp/...' but the automatic imports from Visual Studio Code are still relative.

I tried this in the settings.json (as written in https://blog.angulartraining.com/path-mapping-with-typescript-cac16d12c416 )

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

But it didn't help. How to make Visual Studio Code's automatic imports use the paths mapping. Also, is there a tool that would help me refactor all of my code?

Answer 1

1. Navigate to File>Preferences>Settings>User Settings on VSCode

2. Set "typescript.preferences.importModuleSpecifier": "non-relative"

Answer 2

If you have both - mapped paths & relative - after PR #40637 you can use

"typescript.preferences.importModuleSpecifier": "shortest"