VScode autoimport should always be absolute paths except file is in the same directory

Question

Goal VScode autoimports my imports as absolute path except the file is in same directory.

Example Assuming we have ComponentA and ComponentB in the same directory, but a service in another directory. Then I want this result (angular code):

import { ComponentB } from "./ComponentB"
import { MyService } from "src/app/services/MyService"

@Component({/*...*/})
export class ComponentA {}

From what I've seen this isn't possible with the default VScode settings options:

"relative" to the file location.
"non-relative" based on the baseUrl configured in your jsconfig.json / tsconfig.json.
"auto" to infer the shortest path type.

Is there an option I overlook? Is there a VScode addon to tackle this case?

Henri

Answer 1

This is a reference: Base URL - baseUrl.

Please make sure before change this, after change path there will be a lot of errors.

Add line to tsconfig.json as below.

{
   ...
  "compilerOptions": {
    "baseUrl": "./",   <-- Add baseUrl
   ....
  },
  "angularCompilerOptions": {
    ...
  }
}

Directory structure is;

└───src
    └───app
        ├───all-service
        └───pages
            ├───comp-a
            └───comp-b

Before;

import { Component } from '@angular/core';
import { SmapleService } from '../../all-service/smaple.service';
import { MyServiceService } from '../../my-service.service';
import { CompBComponent } from '../comp-b/comp-b.component';

@Component({...})
export class CompAComponent {
   compBComponent: CompBComponent = new CompBComponent();
   service: MyServiceService = new MyServiceService();
   service2: SmapleService = new SmapleService();
}

After;

import { Component } from '@angular/core';
import { CompBComponent } from '../comp-b/comp-b.component';
import { SmapleService } from 'src/app/all-service/smaple.service';
import { MyServiceService } from 'src/app/my-service.service';

@Component({...})
export class CompAComponent {
   compBComponent: CompBComponent = new CompBComponent();
   service: MyServiceService = new MyServiceService();
   service2: SmapleService = new SmapleService();
}

Updated: Create Barrel for service at folder.

└───src
    └───app
        ├───all-service
        |      └───index.ts
        └───pages
            ├───comp-a
            └───comp-b

// index.ts
export * from './smaple.service';

Finally

import { Component } from '@angular/core';
import { SmapleService } from 'src/app/all-service';            // <--Barrel
import { MyServiceService } from 'src/app/my-service.service';  // <--without Barrel
import { CompBComponent } from '../comp-b/comp-b.component';

@Component({
  selector: 'app-comp-a',
  standalone: true,
  imports: [],
  templateUrl: './comp-a.component.html',
  styleUrl: './comp-a.component.scss'
})
export class CompAComponent {

   compBComponent: CompBComponent = new CompBComponent();
   service: MyServiceService = new MyServiceService();
   service2: SmapleService = new SmapleService();
}

And I recommend extension : TypeScript Barrel Generator. Also Barrel is useful to module that contains many components.

Rescissory

First of all: thanks for your efforts! I'm sorry to tell you, that baseUrl isn't solving my problem. As you can see in "After" you still have relative paths. Rather I want just absolute paths - with the only exception of files in the same directory. – Henri

Oh, I see. I update my answer. – Rescissory

It won't help sorry. I don't want any "../" in my imports. – Henri