80

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?

2

7 Answers 7

108

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'
7
  • 6
    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
    – alebianco
    Commented Mar 9, 2017 at 10:49
  • 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? Commented Jan 1, 2018 at 20:52
  • hmm or maybe yesterday I didn't have the typescript language plugin installed properly in VSCode? Commented Jan 1, 2018 at 20:55
  • @Maxime Is there any permanent solution for this warning? like, change something in VSCode configuration or any plugin config? Commented Apr 3, 2018 at 5:12
  • 5
    @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 :)
    – maxime1992
    Commented Apr 3, 2018 at 8:41
64

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.

5
  • 8
    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.
    – Koja
    Commented Apr 16, 2019 at 13:18
  • Thanks this solve the disturbing alert :P I set the limit to 0 this avoid any alert over the exceed of the minimum. Commented Jun 13, 2019 at 15:33
  • "ignore-pattern" didn't work for me. I tried the following in order to ignore JSX, to no avail: ^<.*\/.>$
    – Liran H
    Commented Apr 5, 2020 at 13:29
  • 1
    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. Commented Mar 17, 2021 at 21:11
  • This works similarly in eslint (.eslintrc.json): "rules": { "max-len": ["error", { "code": 120, "ignorePattern": "^import [^,]+ from" }] }
    – tarrball
    Commented Feb 9, 2022 at 2:56
25

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.

0
10

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"**
     }
   ],
 } 
}
  1. By Changing default max-line-length character value in tslint.json file.
            true,
            {
                "limit": **300**,
                "ignore-pattern": "^import |^export | implements"
            }
        ],
  1. 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.

1
  • 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.
    – DVS
    Commented Feb 7, 2022 at 13:39
1

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'
1

you can use

import {

PersonsSingleAccountComponent

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

0

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 */

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.