TSLint Error "Exceeds maximum line length of 120"

Question

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?

Hawkins

Beside the error, maybe you also need a little refactoring. In persons-informationfolder, is it essential to prefix persons to all single folder ? some hint concerning your issue : github.com/madskristensen/WebEssentials2013/issues/667 or #21869175 – Subjective

you could refactor it to something like this '../persons-information/fragments/persons/single-account/bookings/index.component' – Phototelegraph

Answer 1

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'

Carnage

i agree to a level but disabling linting checks is a code smell. I'd argue that the packaging system is quite redundant and it could be simplified – Concerto

I'm so insanely confused! I didn't get this error yesterday and now i'm copying the exact line over to a new project and I DO get this error. :-/ - is this new for typescript 2.5 maybe? – Representative

hmm or maybe yesterday I didn't have the typescript language plugin installed properly in VSCode? – Representative

@Maxime Is there any permanent solution for this warning? like, change something in VSCode configuration or any plugin config? – Broccoli

@Jitendra sure. If you don't like the rule just remove it (but it won't be only for the imports). Go to your tslint.json and remove the line with the line:max-line-length. If you're using prettier for example it's totally fine to do that because you're not in charge of the line length anymore :) – Carnage

You can add a patern to exclude imports & implements actually .. "max-line-length": [true, {"limit": 100, "ignore-pattern": "^import [^,]+ from |^export | implements"}], – Hankering

@Concerto A smell is a clue, not a rule. In this case it makes complete sense to do this. – Diazo

Answer 2

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.

Helve

This is the best solution. I didn't want to disable all lint checks for line length, nor did I want to bloat my actual code with lint exceptions. – Caracara

Thanks this solve the disturbing alert :P I set the limit to 0 this avoid any alert over the exceed of the minimum. – Jewelljewelle

"ignore-pattern" didn't work for me. I tried the following in order to ignore JSX, to no avail: ^<.*\/.>$ – Teage

For anyone for whom it's not immediately clear (like me 10 minutes ago,) that regex is explicitly for single-import statements (because it excludes commas.) In my repo, I used "^import {([ ]*\\w+,?)+[ ]*} from" instead, bc the "add missing imports" auto-fixer won't switch to one-per-line when you pass the threshold, and that's just tedious to fix all the time. – Assassinate

This works similarly in eslint (.eslintrc.json): "rules": { "max-len": ["error", { "code": 120, "ignorePattern": "^import [^,]+ from" }] } – Lineal

Answer 3

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.

Francklin

Answer 4

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.

Allomerism

This is the best answer as it provides the details about what approaches are available to solve the issue at hand and leaves the opinion about what the best implementation for OP up to the OP. Additionally, this answer is more reuseable for others that may know one or more options but might not be aware of the others. – Onestep

Answer 5

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'

Saltcellar

Answer 6

you can use

import {

PersonsSingleAccountComponent

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

Bastardize

Answer 7

you can disable, it in case you want to ignore lint max lines for a file. Just add it to the top of your class.

/* eslint-disable max-lines */

Organdy