How to deal with Tslint error exceeds 100 characters when using imports in Typescript

2
votes

I am importing a file:

import { BodyTableHeaderExampleModule } from '../../components/example-table/example-table-header/example-table-header-xxxx/example-table-header-xxxxx.module';

However, tslint is complaining that the line exceeds 100 characters. When I try to minimize line length, by doing the following: 

import { BodyTableHeaderExampleModule } from '../../components/example-table/example-table-header/' +
'example-table-header-xxxx/example-table-header-xxxxx.module';

I receive the following tslint errors:

ERROR: 11:92  semicolon             Missing semicolon
ERROR: 11:93  no-unused-expression  unused expression, expected an assignment or function call

Any suggestions on a way to remedy the Exceeds maximum line length of 100 when using long Typescript file imports, would be more than appreciated. Thank you.

2
typescripttslint

2 Answers

6
votes

There is an option to ignore patterns from the max-line-rule.

https://palantir.github.io/tslint/rules/max-line-length/

Example:

"max-line-length": [
  true,
  {
    "limit": 120,
    "ignore-pattern": "^import "
  }
],
4
votes

There are few options here

  1. You could rather rewrite the import into

    import { 
  BodyTableHeaderExampleModule 
} from '../../components/example-table/example-table-header/example-table-header-xxxx/example-table-header-xxxxx.module';

    But yes, this would still be over a 100 characters

  2. You could simply disable that tslint rule for that one line

  3. We actually disabled that rule all together and instead started using prettier to reformat our code. Now some lines might be too long, but most of them are formatted correctly and the hassle you described is gone
  4. Importing such a deep module in node (you seem to be using Angular, but you're still using node style of importing modules) is actually bad practice. And you might want to re-export that BodyTableHeaderExampleModule somewhere within that path.

Except 1. which won't still work for you, the other 3 solutions are all valid. For a long term solution, I'd myself probably solve it as described in 4. - and re-export the module somewhere in ../../components/example-table/example-table-header or similar. But choose what's best for your project and your need.