如何在 vue.js 的 <template> 中禁用段落的 eslint 规则最大行长？

Question

我正在使用 airbnb eslint，目前出现错误：

错误：第 6 行在 path/to/file.vue:6:1 处超过了最大行长度 100 (max-len)：

 <template lang="pug">
  div
    .container
      .row
        .col-xl-10.mx-auto
          p Please let us know how you got here, and use the header buttons to navigate back to safe harbor.
</template>

有没有办法像上面那样禁用段落文本的 lint？

另外，如何将行长从 100 增加到 120？

原文由 Syed 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对于 eslint-plugin-vue >= 4.1.0 您可以使用指令注释来禁用 eslint。

https://github.com/vuejs/eslint-plugin-vue/commit/ad84e0ba6d81f24583e65fc70b1d9803d73d3ed9

 <template>
  <!-- eslint-disable-next-line vue/max-attributes-per-line -->
  <div a="1" b="2" c="3" d="4">
  </div>
</template>

原文由 Erty Seidohl 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

更新

在过去的 4 年里，eslint-plugin-vue 有一些更新。模板中的注释现在可用于覆盖 eslint 设置。

仅用于下一行

<!-- eslint-disable-next-line max-len -->
<my-reasonably-long-component>...</my-reasonably-long-component>

用于多线目的

<!-- eslint-disable max-len -->
<my-reasonably-long-component>
  ...
</my-reasonably-long-component>
<!-- eslint-enable max-len -->

此外，从 eslint-plugin-vue v6.1.0 vue/max-len 规则被添加，广告更多地控制长度规则

{
    "vue/max-len": ["error", {
        "code": 80,
        "template": 80,
        "tabWidth": 2,
        "comments": 80,
        "ignorePattern": "",
        "ignoreComments": false,
        "ignoreTrailingComments": false,
        "ignoreUrls": false,
        "ignoreStrings": false,
        "ignoreTemplateLiterals": false,
        "ignoreRegExpLiterals": false,
        "ignoreHTMLAttributeValues": false,
        "ignoreHTMLTextContents": false,
    }]
}

如果您有多个异常值，则调整模板的全局变量可能会更好。

---

原始答案

AFAIK，没有办法将 eslint 规则应用于模板，特别是模板中的一行。我希望被证明是错误的。

无论如何，因为我有一个包含大量文本的文件，为了解决它，我在我的 .eslintrc.js 文件中添加了这条规则 'max-len': ["error", { "code": 120 }], 。

这是结构（删除了其他设置）

 module.exports {
  rules: {
    'max-len': ["error", { "code": 120 }]
  }
}

原文由 Daniel 发布，翻译遵循 CC BY-SA 4.0 许可协议