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

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

提问by Syed

I am using airbnb eslint and currently I am getting error:

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

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

错误：第 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>

Is there a way to disable lint for paragraph text like above?
Also, how to increase the line length from 100 to 120?

有没有办法禁用上述段落文本的 lint？
另外，如何将行长从 100 增加到 120？

采纳答案by Erty Seidohl

For eslint-plugin-vue>= 4.1.0you can use directive comments to disable eslint.

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

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

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>

回答by Daniel

AFAIK, there is no way to apply eslint rules to the template, and specifically to one line in a template. I hope to be proven wrong though.

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

anyway, because I have a file with lots of text, to get around it, I've added this rule 'max-len': ["error", { "code": 120 }],in my .eslintrc.jsfile.

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

here is the structure (with other settings removed)

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

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

回答by gedijedi

This will disable the rule for the entire template tag. Official ES Lint docs on disabling rules

这将禁用整个模板标签的规则。关于禁用规则的官方 ES Lint 文档

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

EDIT: If you want to instead disable line length rule for all .vue files, then add this to .eslintrc.js(this will also disable the rule for <script>and <style>tags):

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

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

回答by Begueradj

You can add this to your ESLint rules:

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

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

This worked for me (even if I rather set it on for my projects).
You can find more information hereif you want.

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