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