TSLint 錯誤“超過最大行長 120”

Question

在我的 Angular2 應用程序中，我正在導入一個這樣的組件：

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

它給了我皮棉錯誤“超過最大行字符”。 如果我嘗試在 ``(backtick) 中給出語句，則會引發錯誤。

如何解決此 lint 錯誤？

Answer 1

這不是您可以更改的東西，與您的代碼無關。

您應該通過在之前添加評論來禁用此導入的規則：

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

還有另一種方法可以解決這個問題。

從 5.9.0 版開始， TSLint 最大行長度規則提供了對忽略模式的支持。

tslint.json：

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

此規則將忽略以下行：

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

歸功於 DanielKucal 。

對於 OP 的問題，使用^import [^,]+ from足以忽略長導入。

恕我直言，這是一種更好的方法，因為它比修改整個項目的 TSLint 規則的侵入性更小，並且沒有代碼氣味，就像您在每個帶有注釋的文件中禁用 TSLint 規則一樣。

Answer 3

還有另一種方法可以擺脫這個錯誤——修改整個項目的 tslint 規則。

就我而言，我有一個現有項目，其中數百行超出了限制。 事實上，這樣代碼更清晰，因為這基本上是一個對象數組。 但是 VS Code 在整個文件上畫了一條紅色下划線，使其難以閱讀。

我所做的是： "max-line-length": [ false ] 。

您還可以通過編寫"max-line-length": [ true, 240 ]來更改長度，這將產生相同的結果。

這是我現在擁有的tslint.json示例：

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

另外，請查看此鏈接以獲取更多高級設置。

Answer 4

它們是處理tslint - max-line-length警告的幾種方法。 下面介紹3種方式。

1. 通過在tslint.json文件中提供將忽略特定語句的規則。

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

2. 通過更改tslint.json文件中的默認最大行長度字符值。

            true,
            {
                "limit": **300**,
                "ignore-pattern": "^import |^export | implements"
            }
        ],

3. 通過在目標文件的目標代碼行上方添加注釋。

// tslint:disable-next-line:max-line-length

// Your code goes here.

tslint.json文件將位於項目目錄的根范圍內。

Answer 5

我會重命名文件並刪除多余的命名。

如果人員位於深層文件夾結構中並且也在其他模塊中使用，則添加到 tsconfig 的路徑：

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

結果：

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

Answer 6

您可以使用

進口 {

PersonsSingleAccount 組件

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

Answer 7

您可以禁用它，以防您想忽略文件的 lint max 行。 只需將其添加到班級頂部即可。

/* eslint-disable max-lines */