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

Question

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

error: Line 6 exceeds the maximum line length of 100 (max-len) at path/to/file.vue:6:1:

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

Answer 1

更新

eslint-plugin-vue 在过去 4 年里有一些更新。模板中的注释现在可用于覆盖 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 }]
  }
}

Answer 2

对于 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>

Answer 3

这将禁用整个模板标记的规则。 Official ES Lint docs on disabling rules

<template>
  <!-- eslint-disable max-len -->
  ...

编辑：如果您想禁用所有 .vue 文件的行长度规则，则将其添加到 .eslintrc.js（这也将禁用 <script> 和 <style> 的规则标签):

module.exports = {
  ...
  overrides: [
    {
      files: ["*.vue"],
      rules: {
        ...
        'max-len': 'off' // disables line length check
      }
    }
  ]
};

Answer 4

您可以将其添加到您的 ESLint 规则中：

rules: {
  "vue/max-attributes-per-line": "off"
}

这对我有用（即使我宁愿为我的项目设置它）。
如果需要，您可以找到更多信息 here。

Answer 5

您可以禁用 max-len 并使用 vue/max-len 和 "template": 9000 之类的东西。一个例子：

"overrides": [
    {
      "files": [
        "*.vue"
      ],
      "rules": {
        "max-len": "off",
        "vue/max-len": [
          "error",
          {
            "code": 120,
            "template": 9000,
            "ignoreTemplateLiterals": true,
            "ignoreUrls": true,
            "ignoreStrings": true
          }
        ]
      }
    }
  ]

这样您就可以仅针对组件的 <template></template> 部分禁用规则。

Answer 6

正确的 eslint 配置是这样的：

rules: {
  'prettier/prettier': ['error', { printWidth: 120 }],
},

Answer 7

我正在使用 Vue3，结构已更改，.eslintrc.js 正在合并到 package.json 中，因此前面提到的方法对我不起作用。

第一。

这就是我的工作方式注释了 .editorconfig

中的行

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
# max_line_length = 100

秒。

在 package.json

中添加 eslintConfig 对象中的行

"rules": {
  "max-len": ["error", 120]
},

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

How to disable eslint rule max line length for paragraph in <template> of vue.js?

javascript

eslint

vue.js

airbnb-js-styleguide

vuejs2

更新

仅下一行

用于多行目的

原答案