angular - TSLint-fel "Överskrider maximal radlängd på 120"

I min Angular2-app importerar jag en komponent på detta sätt:

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

Det ger mig lint-felet "Överskrider maximalt antal tecken per rad". Om jag försöker ge uttalandet i ``(backtick) så kastar det ett fel.

Hur kan jag lösa detta lint-fel?

Svar #1

Det är egentligen inte något du kan ändra, det är inte kopplat till din kod.

Du bör helt enkelt inaktivera regeln för denna import genom att lägga till en kommentar före:

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

Svar #2

Det finns ett annat sätt att lösa detta problem.

Sedan version 5.9.0 ger TSLint-regeln max-line-length stöd för ignorera-mönster.

tslint.json:

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

Denna regel kommer att ignorera följande rader:

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

Beröm tillfaller DanielKucal.

För OP:s fråga skulle användning av ^import [^,]+ from vara tillräckligt för att ignorera långa imports.

Enligt min åsikt är detta ett bättre tillvägagångssätt, eftersom det är mindre påträngande än att ändra TSLint-regeln för hela projektet och inte har någon kodlukt som om du inaktiverar TSLint-regler i varje fil med en kommentar.

Svar #3

Det finns ett annat sätt att bli av med detta fel - ändra tslint-reglerna för hela projektet.

I mitt fall hade jag ett befintligt projekt med hundratals rader som överskred gränsen. Faktum är att koden var tydligare på det sättet, eftersom det i princip var en array av objekt. Men VS Code ritade en röd understrykning över hela filen vilket gjorde det svårt att läsa.

Det jag gjorde var: "max-line-length": [ false ] .

Du kan också ändra längden genom att skriva "max-line-length": [ true, 240 ], vilket kommer att ge samma resultat.

Här är ett exempel på tslint.json som jag har just nu:

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

Kolla också gärna in den här länken för mer avancerade inställningar.

Svar #4

Det finns ett par sätt att hantera tslint - max-line-length varningar. 3 sätt nämns nedan.

  1. Genom att ange regel i tslint.json-filen som kommer att ignorera specifika uttalanden.
 "rules": {
   "max-line-length": [
     true, 
     {
       "limit": 120, 
       **"ignore-pattern": "^import [^,]+ from |^export | implements"**
     }
   ],
 } 
}
  1. Genom att ändra standardvärdet för max-längd på rad i tslint.json-filen.
            true,
            {
                "limit": **300**,
                "ignore-pattern": "^import |^export | implements"
            }
        ],
  1. Genom att lägga till en kommentar ovanför den riktade kodraden i den riktade filen.
    // tslint:disable-next-line:max-line-length
  // Your code goes here.

tslint.json-filen kommer att vara placerad i projektkatalogens rot.

Relaterade artiklar