Mixing max-attributes-per-line and a minimum number

[jwillp]

I would like to do a mix of vue/max-attributes-per-line and a minimum, where I would prefer to have the attributes on one line instead of being multiline, but only up to a certain maximum number.
So somewhat of a mixture between min and max.

I haven't found a way to achieve this. Is there any way to do that?

Or at least, if it is not possible to force attributes to be on one line.

Tell us about your environment

• ESLint version:
  6.8.0
• eslint-plugin-vue version:
  6.2.2
• Node version:
  v12.16.1 + yarn: 1.21.1

Please show your full configuration:

module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        'plugin:vue/essential',
        'plugin:vue/recommended',
        '@vue/standard',
        '@vue/typescript',
        '@vue/typescript/recommended'
    ],
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        indent: ['error', 4],

        '@typescript-eslint/no-explicit-any': 'off',
        '@typescript-eslint/ban-ts-ignore': 'off',

        'vue/script-indent': ['warn', 4, { baseIndent: 0 }],
        'vue/html-indent': ['warn', 4, { baseIndent: 0, alignVertically: true }],
        'vue/max-attributes-per-line': ['error', {
            singleline: 4,
            multiline: {
                max: 4,
                allowFirstLine: true
            }
        }]
    },
    parserOptions: {
        parser: '@typescript-eslint/parser',
        ecmaVersion: 2020
    }
}

What did you do?

<div class="general-info">
    <figure
        class="avatar avatar-primary"
        data-initials="HW"
    />
</div>

What did you expect to happen?

<div class="general-info">
    <figure  class="avatar avatar-primary" data-initials="HW"  />
</div>

What actually happened?
Nothing, it stays unchanged

[mapleby]

Me too.This is a headache for me, and I don't want them to use multiple lines of attributes or multiple attributes because it makes the code hard to understand.

[ota-meshi]

Thank you for posting this.

Vue team recommends one attribute per line.

https://vuejs.org/v2/style-guide/#Multi-attribute-elements-strongly-recommended

So vue/max-attributes-per-line rule for eslint-plugin-vue, does not add the option to change to multiple attributes per line.

[dstock48]

@ota-meshi How about the scenario where you have a single-attribute multi-line opening tag?

<component-name
  class="class-name"
>
  some text
</component-name>

could this, or a separate rule enforce that this should not be allowed and instead change it to a single-line opening tag?

<component-name class="class-name">
  some text
</component-name>

The Vue Style Guide states that:

Elements with multiple attributes should span multiple lines, with one attribute per line.

But it doesn't specifically mention anything about elements with just a single attribute.

[jacksongross]

I would really like an option for a rule exactly like @dstock48 has above, where when there is one option, to make it inline with the opening tag, but if there are multiple then allow multi line. Is this possible to do currently or to add to the existing rules?

[vedmant]

Also searching for this kind of rule, but looks there is no way to force single line for like < 4 attributes and multiple for more.