eslint 限制vue html 属性在一行

你可以在项目的 `.eslintrc.js` 文件中添加以下规则，来限制 Vue 模板中的 HTML 属性在一行内：

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

这样配置后，ESLint 会强制要求将多个 HTML 属性分别放在不同的行或者在同一行，但是不能混用。具体来说：

- 如果某个标签只有一个属性，则该属性必须和标签在同一行。
- 如果某个标签有多个属性，则所有属性必须分别放在不同的行。
- 如果某个标签有多个属性，但是其中至少一个属性已经换行了，则其他属性也可以换行。
- 如果某个标签有多个属性，但是其中一个属性很长，需要换行，则这个属性可以单独占据一行。

注意，在使用这个规则时，你需要安装 `eslint-plugin-vue` 插件。如果你还没有安装，可以在命令行中执行：

npm install eslint-plugin-vue --save-dev

然后在 `.eslintrc.js` 中添加以下配置：

module.exports = {
  plugins: [
    'vue'
  ],
  // ...
}

相关问题

vue/max-attributes-per-line 怎么设置html属性在同一行

`vue/max-attributes-per-line`是eslint-plugin-vue插件中的一个规则，用于限制HTML元素中每行最多允许的属性数量。默认情况下，它的值是1，即每个属性都应该单独放在一行上。

如果你想将多个属性放在同一行上，可以将该规则的值设置为一个大于1的数字，例如：

{
  "rules": {
    "vue/max-attributes-per-line": ["error", {
      "singleline": 4 // 属性数量不超过4个的元素允许在同一行上
    }]
  }
}

这样就可以让不超过4个属性的元素，在同一行上显示它们的属性。注意，这个设置只会影响单行元素，多行元素（例如`<template>`标签中的内容）仍然会按照默认的方式格式化。