How to make `max-attributes-per-line` work only when over maximum line length

[lyyourc]

Tell us about your environment

• ESLint Version: 4.16.0
• eslint-plugin-vue Version: 4.2.0
• Node Version: 9.2.0

Please show your full configuration:

.eslintrc.js

module.exports = {
  extends: [
    'standard',
    'plugin:vue/recommended',
    'prettier',
  ],
  plugins: ['prettier'],
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module',
  },
  env: {
    browser: true,
    jest: true,
  },
  rules: {
    'prettier/prettier': 'error',

    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? ['error'] : ['warn'],

    'no-param-reassign': ['error', { props: false }],

    'vue/html-closing-bracket-newline': [
      'error',
      {
        singleline: 'never',
        multiline: 'always',
      },
    ],

    'vue/html-closing-bracket-spacing': [
      'error',
      {
        startTag: 'never',
        endTag: 'never',
        selfClosingTag: 'always',
      },
    ],
  },
}

What did you do? Please include the actual source code causing the issue.

<MyComponent lorem="1" ipsum="2" />

<MyComponent lorem="1" ipsum="2" @click="longlonglonglonglonglongFunctionName" @change="longlonglonglonglonglongFunctionName2" />

What did you expect to happen?
What i want is max-attributes-per-line rule should be available only when over maximum line length option, like printWidth defined in prettier.

For example, I set printWidth: 80 in prettier:

<MyComponent lorem="1"  ipsum="2" />

<MyComponent 
  lorem="1"
  ipsum="2"
  @click="longlonglonglonglonglongFunctionName" 
  @change="longlonglonglonglonglongFunctionName2"
/>

What actually happened? Please include the actual, raw output from ESLint.

As the default value of multilple option in max-attributes-per-line rule is 1, so the output will be:

<MyComponent
  lorem="1"
  ipsum="2"
/>

<MyComponent 
  lorem="1"
  ipsum="2"
  @click="longlonglonglonglonglongFunctionName" 
  @change="longlonglonglonglonglongFunctionName2"
/>

[mysticatea]

Thank you for the issue.

You can not configure vue/max-attributes-per-line rule with maximum line width.
The rule doesn't have any option for maximum line width currently.

ESLint rules are independent each other, so it's difficult.

[lyyourc]

Thanks replying so quickly.

We all hopevue/max-attributes-per-line can provide a printWidth option to support this feature,
just like --jsx-bracket-same-line option in prettier.

[mysticatea]

Since the value of attributes is statements or expressions, so it's difficult to work together with other whitespace rules in ESLint.

Closing as no plan to add the option for now.

[octref]

I think this issue is better solved by a formatter. Vetur now supports prettyhtml and this is achievable:

[posva]

Will it make sense to add a new rule for this?

[harolrodriguez]

use prettier