TSLint 错误“超过最大行长 120”答案

【问题标题】：TSLint Error "Exceeds maximum line length of 120"TSLint 错误“超过最大行长 120”
【发布时间】：2017-07-30 07:22:15
【问题描述】：

在我的 Angular2 应用程序中，我正在导入一个这样的组件：

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

它给了我 lint 错误“超过最大行字符”。如果我尝试在 ``(backtick) 中给出该语句，则会引发错误。

我该如何解决这个 lint 错误？

【问题讨论】：

除了错误，也许你还需要一点重构。在persons-informationfolder 中，是否必须将persons 前缀到所有单个文件夹？关于您的问题的一些提示：github.com/madskristensen/WebEssentials2013/issues/667 或 stackoverflow.com/questions/21868675/…
您可以将其重构为类似 '../persons-information/fragments/persons/single-account/bookings/index.component'

标签： angular typescript tslint

【解决方案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'

【讨论】：

我同意一个级别，但禁用 linting 检查是一种代码异味。我认为包装系统非常多余，可以简化
我非常困惑！我昨天没有收到这个错误，现在我将确切的行复制到一个新项目中，我确实收到了这个错误。 :-/ - 这可能是 typescript 2.5 的新功能吗？
hmm 或者昨天我没有在 VSCode 中正确安装 typescript 语言插件？
@Maxime 这个警告有没有永久的解决方案？比如，在 VSCode 配置或任何插件配置中进行更改？
@Jitendra 当然。如果您不喜欢该规则，只需将其删除（但它不仅适用于进口）。转到您的 tslint.json 并删除带有 line:max-line-length 的行。例如，如果您使用更漂亮的，那么这样做是完全可以的，因为您不再负责行长:)

【解决方案2】：

还有另一种方法可以解决这个问题。

自 5.9.0 版起，TSLint max-line-length rule 提供对忽略模式的支持。

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 规则一样。

【讨论】：

这是最好的解决方案。我不想禁用 all lint 检查的行长，也不想让我的实际代码因 lint 异常而膨胀。
感谢这解决了令人不安的警报：P 我将限制设置为 0，以避免任何超过最小值的警报。
"ignore-pattern" 对我不起作用。为了忽略 JSX，我尝试了以下操作，但无济于事：^<.*\/.>$
对于那些还不清楚的人（比如 10 分钟前的我），正则表达式明确用于单导入语句（因为它不包括逗号。）在我的仓库中，我使用了 "^import {([ ]*\\w+,?)+[ ]*} from" , bc 当你通过阈值时，“添加缺失的导入”自动修复程序不会切换到每行一个，而且一直修复它很乏味。
这在 eslint (.eslintrc.json) 中的工作方式类似："rules": { "max-len": ["error", { "code": 120, "ignorePattern": "^import [^,]+ from" }] }

【解决方案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 ],
    }
}

另外，请查看this link 了解更多高级设置。

【讨论】：

【解决方案4】：

它们是处理 tslint - max-line-length 警告的几种方法。下面提到了3种方式。

通过在 tslint.json 文件中提供将忽略特定语句的规则。

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

通过更改 tslint.json 文件中的默认最大行长度字符值。

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

通过在目标文件的目标代码行上方添加注释。

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

// Your code goes here.

tslint.json 文件将位于项目目录的根范围内。

【讨论】：

这是最好的答案，因为它提供了有关可用于解决手头问题的方法的详细信息，并将关于 OP 的最佳实现的意见留给 OP。此外，对于可能知道一个或多个选项但可能不知道其他选项的其他人来说，此答案更可重用。

【解决方案5】：

我会重命名文件并删除多余的命名。

如果人员位于较深的文件夹结构中并且也在其他模块中使用，则添加到 tsconfig 的路径：

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

结果：

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

【讨论】：

【解决方案6】：

你可以使用

进口{

PersonsSingleAccountComponent

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

【讨论】：