Helping Jetbrains IDE to set correct absolute paths for TS imports

, ,

In the project I work on, we use the following ESLint rule to prevent relative parent imports:

1
2
3
4
5
6
7
8
// @typescript-eslint/parser doesn't work well with import/no-relative-parent-imports
// https://github.com/benmosher/eslint-plugin-import/issues/1610
'no-restricted-imports': [
	'error',
	{
		patterns: ['../*'],
	},
],

It works well, but I was getting annoyed by the fact that auto-imports added by PhpStorm still used relative paths. Even worse, the quick-fix action Convert path to absolute was changing the path to a wrong one. For example, instead of js/example I was getting .//assets/js/example. I did two things to fix it:

  1. Marked resources/assets as Resource Root. It’ll depend on your directory structure.
  2. Went to Preferences > Editor > Code Style > TypeScript > Imports and checked Use paths relative to tsconfig.json.

Now the auto-imports use absolute paths! And if ever need to use a quick-fix (hopefully not), then I get a new one – Change ES6 import path, which works as expected.