line warning: binding “gutter“ should be on a new line

最新推荐文章于 2024-05-24 17:42:14 发布

原创最新推荐文章于 2024-05-24 17:42:14 发布 · 9.9k 阅读

5 ·

CC 4.0 BY-SA版权

问题解决同时被 3 个专栏收录

14 篇文章

订阅专栏

vue

7 篇文章

订阅专栏

前端

4 篇文章

订阅专栏

本文详细解释了如何解决Vue项目中由.eslintrc.js文件配置错误导致的问题，主要关注于调整vue/max-attributes-per-line设置。通过修改此配置，可以控制每个标签行中属性的数量，确保代码风格符合项目规范。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此问题是由于.eslintrc.js文件中的vue/max-attributes-per-line配置错误产生的

解决办法

根据错误提示更改相关配置即可，更改完成之后重新构建项目

**。

举例：

{
  "vue/max-attributes-per-line": ["error", {
    "singleline": 1,
    "multiline": {
      "max": 1,
      "allowFirstLine": false
    }
  }]
}

singleline（number）…当开始标记在一行中时，每行的最大属性数。默认值为1。
multiline.max（number）…当开始标记位于多行中时，每行的最大属性数。默认值为1。如果您不配置属性{
multiline: 1 }，{ multiline: { max: 1 }}则可以代替allowFirstLine。
multiline.allowFirstLine（boolean）…如果为true，则允许属性与该标记名称位于同一行。默认值为false。

“singleline”: 3

<template>
  <!-- ✓ GOOD -->
  <MyComponent lorem="1" ipsum="2" dolor="3" />

  <!-- ✗ BAD -->
  <MyComponent lorem="1" ipsum="2" dolor="3" sit="4" />
</template>

“multiline”: 2

<template>
  <!-- ✓ GOOD -->
  <MyComponent
    lorem="1" ipsum="2"
    dolor="3"
  />

  <!-- ✗ BAD -->
  <MyComponent
    lorem="1" ipsum="2" dolor="3"
    sit="4"
  />
</template>

“multiline”: 1, “allowFirstLine”: true

<template>
  <!-- ✓ GOOD -->
  <MyComponent lorem="1"
               ipsum="2"
               dolor="3"
  />
</template>