max-attributes-per-line error message is not specific enough

[tesla3327]

Tell us about your environment

• ESLint Version: 5.7.0
• eslint-plugin-vue Version: 5.0.0-beta.3
• Node Version: 9.2.0

Please show your full configuration:

module.exports = {
  root: true,

  parserOptions: {
    parser: "babel-eslint",
    sourceType: "module",
  },

  env: {
    browser: true,
    node: true,
  },

  plugins: ["vue"],

  extends: [
    "airbnb-base",
    "plugin:vue/recommended",
  ],

  rules: {
    "consistent-return": 0,
    "max-len": 0,
    "func-names": 0,
    "global-require": 0,
    "no-underscore-dangle": 0,
    "no-param-reassign": 0,
    "no-plusplus": [
      2,
      {
        allowForLoopAfterthoughts: true,
      },
    ],
    "no-unused-vars": 1,
    "no-mixed-operators": [
      2,
      {
        allowSamePrecedence: true,
      },
    ],
    "import/no-webpack-loader-syntax": 0,
    "import/first": [2, "disable-absolute-first"],
    "import/extensions": [
      "error",
      "always",
      {
        js: "never",
        vue: "never",
      },
    ],
    "import/no-extraneous-dependencies": [
      "error",
      { devDependencies: true, optionalDependencies: false, peerDependencies: false },
    ],

    // Bug when used with webpack aliases
    // - https://github.com/benmosher/eslint-plugin-import/issues/764
    "import/extensions": 0,
    "import/no-unresolved": 0,

    // == All Vue-specific rules ==
    // Essential


    // Recommended
    "vue/component-name-in-template-casing": [
      "error",
      "kebab-case",
    ]
  },

  settings: {
    "import/resolver": {
      webpack: {
        config: "config/webpack/webpack.config.base.js",
      },
    },
  },
}

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

 <button :disabled="disabled" :aria-disabled="loading" class="vy-button" :aria-label="ariaLabel"
  @click="handleClick"
  :autofocus="autofocus"
  :type="nativeType"
  :class="[
    type ? 'vy-button--' + type : '',
    size ? 'vy-button--' + size : '',
    {
      'is-disabled': disabled,
      'is-loading': loading,
      'is-plain': plain,
    }
  ]"
>

What did you expect to happen?
The rule vue/max-attributes-per-line would tell me which attribute is at fault when I am using the v-bind shorthand.

eg. 2:11 error Attribute "disabled" should be on a new line

What actually happened? Please include the actual, raw output from ESLint.
The output just shows me that it is a v-bind that is violating the linting rule:
2:11 error Attribute "bind" should be on a new line.

I have several attributes here violating this rule, so my eslint output looks like this:

    2:11  error  Attribute "bind" should be on a new line              vue/max-attributes-per-line
    2:32  error  Attribute "bind" should be on a new line              vue/max-attributes-per-line
    2:57  error  Attribute "class" should be on a new line             vue/max-attributes-per-line
    2:75  error  Attribute "bind" should be on a new line              vue/max-attributes-per-line

It makes it more difficult to grok without specifying the actual property name.

[michalsnik]

Thanks for posting this issue @tesla3327 ! I'm working on it :) Same problem with events and directives.