TSLint Error "Exceeding Maximum Line Length 120"

Question

In my Angular2 application, I import one such component:

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

This gives me the lint error "Exceeds the maximum character of the string." If I try to give a statement in '' (backtick), this throws an error.

How can I solve this pile error?

Answer 1

This is not something you can change that is not related to your code.

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

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

Answer 2

There is another way to solve this problem.

Starting with version 5.9.0, the TSLint maximum line length rule provides support for ignore patterns.

tslint.json:

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

This rule will ignore the following lines:

 <!-- language: typescript --> import { SomeLongInterfaceName } from '../../../nested/directory/structure/target'; class MyClass implements SomeLongInterfaceName, OnInit, OnDestroy, OnViewChange {} export { MyClass, SomeLongInterfaceName }; 

Loans go to DanielKucal .

For the OP question, it would be sufficient to use ^import [^,]+ from to ignore long imports.

IMHO, this is a better approach, since it is less intrusive than changing the TSLint rule for the entire project, and does not have a smell of code, as if you disabled the TSLint rules in each comment file.

Answer 3

There is another way to get rid of this error - change the tslint rules for the entire project .

In my case, I had an existing project with hundreds of lines exceeding the limit. In fact, the code was more understandable because it was basically an array of objects. But VS Code drew a red underline throughout the file, making it difficult to read.

I did the following: "max-line-length": [ false ] .

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

Here is an example of tslint.json that 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, check out this link for more options.

Answer 4

I would rename the files and delete the redundant names.

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

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

Result:

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