How should I use no-relative-imports

[AndreasCag]

Hello!
I am amazed how productive became my work with vscode, typescript and this config.
Thank you for your great work with it.

I'm new with typescript and tslint, so I'm a bit confused how to use rule 'no-relative-imports'.

Suppose I have small frontend project with Webpack + Vue + ts-loader.
Main core written with typescript, other files with javascript.

In folder 'core' I have two files:

ElData.ts

...

export class AnimationElement {
  ...
}

...

SportData.ts

import * as ElData from './ElData';

...

The thing is, 'no-relative-imports' throws error:
[tslint] Imported module is being loaded from a relative path. Please use an absolute path: import * as ElData from './ElData'; (no-relative-imports)

Hmm, disable rule is not my way to resolve a problem!

1. First thing I try is just remove './' from my import like this:

SportData.ts

import * as ElData from 'ElData';

...

[tslint] Module 'ElData' is not listed as dependency in package.json (no-implicit-dependencies)

Well, lets try another way

2. Improve tsconfig.json

{
  ...
  "compilerOptions": {
    ...
    "baseUrl": "./src"
  }
}

And then

SportData.ts

import * as ElData from 'core/ElData';

...

[tslint] Module 'core' is not listed as dependency in package.json (no-implicit-dependencies)
[tslint] Submodule import paths from this package are disallowed; import from the root instead (no-submodule-imports)

Arrgh

3. Last hope

My webpack config a bit supercharged with aliases

{
  ....
  resolve: {
    alias: {
      '@': resolve('src'),
    }
  },
  ...
}

SportData.ts

import * as ElData from '@/core/ElData';

...

[tslint] Module '@/core' is not listed as dependency in package.json (no-implicit-dependencies)
[tslint] Submodule import paths from this package are disallowed; import from the root instead (no-submodule-imports)
[ts] Cannot find module '@/core/ElData'.

Jesus, all I achieved is just increase of errors.

How should I cook my imports?

[MatSFT]

I have the same question. I cannot figure out how to get no-relative-imports to work with the no-submodule-includes and the no-implicit-dependencies issues.

Just seems like too much hassle so I disabled the no-relative-imports rule.

[JoshuaKGoldberg]

Hi there - welcome to TS/TSLint/VSCode/etc.! Glad you're enjoying the new area 😊 it's great to have you!

I personally don't use this rule in my projects. The idea as I understand it is to encourage setting a baseUrl in your tsconfig.json, but that seems uncomfortable to me. Should we deprecate this rule @HamletDRC ? Do you have more context around it?

[MatSFT]

I've tried using the baseUrl method to get rid of the no relative paths issues, however when I do that I start violating two other rules: no-submodule-includes and no-implicit-dependencies.

no-submodule-includes is hit because I include components from subfolders in my solution.
no-implicit-dependencies is hit because the rule thinks that if I am not doing a relative include, then the code must be coming from a NPM package and wants me to include the package in my package.json file.

Can we drop the no-relative-imports rule from the microsoft tslint rule set? It might make sense for tiny projects or for npm packages but definitely does not work for website projects using tools such as webpack.

[JoshuaKGoldberg]

violating two other rules

Amusing. Yes, I'm in support of this. Let's leave this issue open for a few weeks, we can mark it as deprecated, then remove in a future major version.

[LukeSheard]

@JoshuaKGoldberg Please don't remove this, I really like this rule. We don't use the no-submodule-includes and just wrapped the no-implicit-dependencies rule to ignore the files in the baseUrl path and it works really well!

Maybe we can just publish this as a standalone rule?

[JoshuaKGoldberg]

Interesting! @LukeSheard - could you please give a little more info on why you chose that way?

[LukeSheard]

@JoshuaKGoldberg While I probably can't give amazingly detailed specifics.. Essentially we run a very large monorepo + single package.json at the root and so we run with the idea that our "top level" is a set of packages itself, meaning that imports look like

import { myThing } from "my/other/thing/over/here";

Since we other languages side by side with TypeScript we find that it gives nice consistency and also means if you move a file you can easily update imports by just searching for the module path.

[JoshuaKGoldberg]

That's a really interesting approach, thanks for posting it! Have you tried good-fences?

Also, would you mind also posting your tslint.json config here (or just the relevant rules around paths, importing, and/or modules)?

Instead of deprecating this rule, since this is a very legitimate use case, let's say we remove it from the recommended ruleset and mention the monorepo use case in its documentation?