79

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?

jowey
  • 7,581
  • 6
  • 27
  • 46
Sunny
  • 1,167
  • 5
  • 15
  • 27
  • 3
    Beside the error, maybe you also need a little refactoring. In `persons-information`folder, is it essential to prefix `persons` to all single folder ? some hint concerning your issue : https://github.com/madskristensen/WebEssentials2013/issues/667 or http://stackoverflow.com/questions/21868675/jquery-d-ts-compilation-failed-tslint-exceeds-maximum-line-length – mickdev Mar 09 '17 at 10:48
  • you could refactor it to something like this '../persons-information/fragments/persons/single-account/bookings/index.component' – Rohit Krishnan Apr 16 '20 at 03:44

7 Answers7

107

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'
maxime1992
  • 22,502
  • 10
  • 80
  • 121
  • 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 Mar 09 '17 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? – Simon_Weaver Jan 01 '18 at 20:52
  • hmm or maybe yesterday I didn't have the typescript language plugin installed properly in VSCode? – Simon_Weaver Jan 01 '18 at 20:55
  • @Maxime Is there any permanent solution for this warning? like, change something in VSCode configuration or any plugin config? – Jitendra Solanki Apr 03 '18 at 05: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 Apr 03 '18 at 08:41
  • You can add a patern to exclude imports & implements actually .. `"max-line-length": [true, {"limit": 100, "ignore-pattern": "^import [^,]+ from |^export | implements"}],` – Yohan Dahmani May 06 '19 at 11:09
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.

jowey
  • 7,581
  • 6
  • 27
  • 46
  • 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 Apr 16 '19 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. – Carlos Galeano Jun 13 '19 at 15:33
  • "ignore-pattern" didn't work for me. I tried the following in order to ignore JSX, to no avail: `^<.*\/.>$` – Liran H Apr 05 '20 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. – John Neuhaus Mar 17 '21 at 21:11
  • This works similarly in eslint (.eslintrc.json): `"rules": { "max-len": ["error", { "code": 120, "ignorePattern": "^import [^,]+ from" }] }` – tarrball Feb 09 '22 at 02: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.

sr9yar
  • 4,850
  • 5
  • 53
  • 59
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.

Karan Tewari
  • 498
  • 8
  • 20
sharad jain
  • 1,471
  • 13
  • 9
  • 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 Feb 07 '22 at 13:39
2

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'
Seryoga
  • 793
  • 6
  • 15
1

you can use

import {

PersonsSingleAccountComponent

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

fatima fahmi
  • 121
  • 1
  • 4
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 */

Supreet Singh
  • 882
  • 12
  • 9