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

Question

我正在使用airbnb eslint,目前我收到错误:

错误:第6行超过路径/到/ file.vue的最大行长度100(max-len):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

AFAIK,无法将eslint规则应用于模板,特别是模板中的一行.我希望被证明是错的.

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

这是结构(删除了其他设置)

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

Answer 2

您可以禁用 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 3

正确的 eslint 配置是这样的：

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

Answer 4

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

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

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

编辑:如果您想要禁用所有.vue文件的行长度规则,然后将其添加到.eslintrc.js(这也将禁用<script>和<style>标记的规则):

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

Answer 6

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

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

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