Eslint-plugin-vue: How to make `max-attributes-per-line` work only when over maximum line length

Created on 5 Feb 2018 · 6Comments · Source: vuejs/eslint-plugin-vue

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

```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"
/>

question

Source

lyyourc

👍5

All 6 comments

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.

mysticatea on 5 Feb 2018

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.

lyyourc on 5 Feb 2018

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.

mysticatea on 9 Feb 2018

😕2

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