TSLint Error "Exceeds maximum line length of 120"

In my Angular2 App I'm importing one component like this:

import { PersonsSingleAccountComponent} from 
   '../persons-information/fragments/persons-single-account/persons-single-account-bookings/persons-single-account-bookings.component'

It is giving me the lint error "Exceeds maximum line character". If I try to give the statement in ``(backtick) it is throwing an error.

How can I solve this lint error?

It's not really something you can change, not related to your code.

You should simply disable the rule for this import by adding a comment before :

// tslint:disable-next-line:max-line-length
import { PersonsSingleAccountComponent} from '../persons-information/fragments/persons-single-account/persons-single-account-bookings/persons-single-account-bookings.component'

There is another way of solving this problem.

Since version 5.9.0 TSLint max-line-length rule provides support for ignore patterns.

tslint.json:

{
  "rules": {
    "max-line-length": [
      true, 
      {
        "limit": 120, 
        "ignore-pattern": "^import [^,]+ from |^export | implements"
      }
    ],
  } 
}

This rule will ignore the following lines:

import { SomeLongInterfaceName } from '../../../nested/directory/structure/target';
class MyClass implements SomeLongInterfaceName, OnInit, OnDestroy, OnViewChange {}
export { MyClass, SomeLongInterfaceName };

Credits go to DanielKucal.

For the question of the OP, using ^import [^,]+ from would be enought to ignore long imports.

IMHO this is an better approach, since it is less intrusive than modifing the TSLint rule for the whole project and has no code smell as if you disable TSLint rules in each file with a comment.

There's another way to get rid of this error - modify tslint rules for the whole project.

In my case I had an existing project with hundreds of lines exceeding the limit. In fact, the code was more clear that way, because this was basically an array of objects. But VS Code drew a red underline over the whole file making it hard to read.

What I did was: "max-line-length": [ false ] .

You can also change the length by writing "max-line-length": [ true, 240 ], which will produce the same result.

Here's an example of tslint.json I have right now:

{
    "extends": "../tslint.json",
    "rules": {
        "directive-selector": [
            true,
            "attribute",
            "app",
            "camelCase"
        ],
        "component-selector": [
            true,
            "element",
            "app",
            "kebab-case"
        ],
        "max-line-length": [ false ],
    }
}

Also, please, checkout this link for more advanced settings.

Their are couple of ways to deal with tslint - max-line-length warnings. 3 ways are mentioned below.

1. By provide rule in tslint.json file that will ignore specific statements.

 "rules": {
   "max-line-length": [
     true, 
     {
       "limit": 120, 
       **"ignore-pattern": "^import [^,]+ from |^export | implements"**
     }
   ],
 } 
}

2. By Changing default max-line-length character value in tslint.json file.

            true,
            {
                "limit": **300**,
                "ignore-pattern": "^import |^export | implements"
            }
        ],

3. By adding comment above targeted code line in targeted file.

// tslint:disable-next-line:max-line-length

// Your code goes here.

tslint.json file will be located in root scope of project directory.

I would rename the files and remove the redundant naming.

And adding a path to the tsconfig if the persons are in a deep folder structure and used in other modules too:

{
    "compilerOptions": {
        "baseUrl": "./src",
        "paths": {
            "@persons/*": [
                "app/shared/foo/bar/persons/*"
            ]
        }
    }
}

Result:

import { PersonsSingleAccountComponent} from 
   '@persons/information/fragments/account/bookings/single-account-bookings.component'

you can use

import {

PersonsSingleAccountComponent

} from '../persons-information/fragments/persons-single-account/persons-single-account-bookings/persons-single-account-bookings.component'`