vue/max-attribute-per-line Error

[rashadrivera]

Checklist

• I have tried restarting my IDE and the issue persists.
• I have read the FAQ and my problem is not listed.

Tell us about your environment

• ESLint version: 6.7.2
• vue version: 2.6.11
• eslint-plugin-vue version: 6.2.2
• Node version: 14.17.6
• Operating System: Windows 10 20H2 (19042.1237)

Please show your full configuration:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    //'@vue/airbnb',
    '@vue/typescript/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    'vue/max-attributes-per-line': ['error', { singleline: { max: 1, allowFirstLine: true }, multiline: { max: 1, allowFirstLine: true }}],

    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
};

What did you do?

<template>
  <div id="app">
    <img alt="Vue logo"
         src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

What did you expect to happen?
I expect that I won't get a compilation error.

What actually happened?
ERROR Failed to compile with 1 error 9:31:30 PM

Syntax Error: Error: .eslintrc.js:
        Configuration for rule "vue/max-attributes-per-line" is invalid:
        Value {"max":1,"allowFirstLine":true} should be number.
        Value {"max":1,"allowFirstLine":true} should NOT have additional properties.
        Value {"max":1,"allowFirstLine":true} should match some schema in anyOf.
    at Array.forEach (<anonymous>)

Repository to reproduce this issue
https://github.com/rashadrivera/lint-issue_max-attributes-per-line

[ota-meshi]

You are using the old eslint-plugin-vue. Please use the latest version.

[ferrykranenburgcw]

I am using version 8.0.3 and still have this issue. What am I doing wrong?

[ferrykranenburgcw]

This is my configuration:

{
  "root": true,
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 2021
  },
  "rules": {
    // Override our default settings just for this directory
    "eqeqeq": 0,
    "strict": 0,
    "linebreak-style": 0,
    // Attributes on new lines
    "vue/max-attributes-per-line": [
      "error",
      {
        "singleline": {
          "max": 3,
          "allowFirstLine": true
        },
        "multiline": {
          "max": 3,
          "allowFirstLine": true
        }
      }
    ],
    // let us use @ts-ignore
    "@typescript-eslint/ban-ts-ignore": 0,
    // This is problematic in refactoring withing Intellij
    "vue/attribute-hyphenation": 0,
    // We use v-html
    "vue/no-v-html": 0,
    // Disable self-closing tags
    "vue/html-self-closing": 0,
    // We do not care about the order strictly
    "vue/component-tags-order": 0
  },
  "extends": [
    "plugin:vue/recommended",
    "prettier/prettier"
  ]
}

[ferrykranenburgcw]

Sorry, it is a breaking change: https://github.com/vuejs/eslint-plugin-vue/releases/tag/v8.0.0. Documentation should be updated: https://eslint.vuejs.org/rules/max-attributes-per-line.html#vue-max-attributes-per-line

[ota-meshi]

Thank you for letting me know. I will update the docs.

[code1x1]

nextcloud-libraries/eslint-config#253

[code1x1]

I am using version 8.2.0. running into the same error message

[FloEdelmann]

@code1x1 see my comment there: nextcloud-libraries/eslint-config#253 (comment)

There's nothing to be done in eslint-plugin-vue.

[designermonkey]

Any explanation as to why allowFirstLine was removed?

[ota-meshi]

vue/first-attribute-linebreak rule has been added to enforce the location of the first attribute, so that option is no longer needed.

https://eslint.vuejs.org/rules/first-attribute-linebreak.html