VScode relative imports

Info

Creation Moment: 2025-05-20 @ 22:16

I personally had the problem where it would suggest imports and then import it as the following example:

import { DataExtractor } from 'models/DataExtractor';
 
// but the format that I needed:
import { DataExtractor } from '../models/DataExtractor';

You can fix this by going to your vscode settings and change the following settings:

// .vscode/settings.json
{
  // For TypeScript files
  "typescript.preferences.importModuleSpecifier": "relative",
 
  // And if you work in JS modules:
  "javascript.preferences.importModuleSpecifier": "relative"
}
 

I also had the problem where it didn’t add .ts or .js to the end of the imports, that can also be fixed:

// .vscode/settings.json
{
	"typescript.preferences.importModuleSpecifierEnding": "js",
	"javascript.preferences.importModuleSpecifierEnding": "js"
}

I once made a python script to solve this issue by looping over all files. Guess I should’ve just googled.

Important

This is customisable per project if you add a workspace settings.json.

The easiest way to create this is to do the following:

1. F1
2. type: settings json
3. Select Preferences: Open Workspace Settings (JSON)