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

vohkndzv  于 2023-01-14  发布在  Vue.js
关注(0)|答案(8)|浏览(207)

我正在使用airbnb eslint,目前我得到错误:
错误:第6行超过了path/to/file的最大行长度100(max-len)。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?

hwamh0ep

hwamh0ep1#

更新

在过去的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 }]
  }
}
zyfwsgd6

zyfwsgd62#

这将禁用整个模板标记的规则。官方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
      }
    }
  ]
};
eyh26e7m

eyh26e7m3#

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

roqulrg34#

您可以禁用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>部分禁用规则。

zi8p0yeb

zi8p0yeb5#

正确eslint配置如下:

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

pkbketx96#

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

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

这对我很有效(即使我宁愿为我的项目设置它)。
如果需要,您可以找到更多信息here

jogvjijk

jogvjijk7#

我正在使用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

几秒钟。
eslintConfig对象中的行添加到package.json

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

nnsrf1az8#

我缺少的是配置文件的位置.在我的角项目中它是. eslintrc.js
配置代码的一部分如下所示:

rules: {
    "quotes": ["error", "double"],
    "import/no-unresolved": 0,
    "max-len": ["error", {"code": 120}],
  },

相关问题