question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

max-attributes-per-line defaults to "singleline: 1", should be 3 according to docs

See original GitHub issue

Tell us about your environment

  • ESLint Version: any
  • eslint-plugin-vue Version: master
  • Node Version: any

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

I use the strongly-recommended rule that enables max-attributes-per-line. It should default to 3 attributes in the singleline case, according to the docs:

There is a configurable number of attributes that are acceptable in one-line case (default 3), as well as how many attributes are acceptable per line in multi-line case (default 1).

This should be correct:

    <div v-for="item of items" :key="item.id">
      {{ item.name }}
    </div>

There’s also a docs inconsistency, as this code is given as incorrect in the docs:

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

What did you expect to happen?

Don’t get a lint error.

What actually happened?

Got a lint error.

Also noticed by @michalsnik in https://github.com/vuejs/eslint-plugin-vue/issues/77#issuecomment-347014998

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:13 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
chenxeedcommented, Feb 19, 2018

I agree with @rzaharenkov as well.

Having 2-3 attributes is still considered common and also short so it doesn’t have to be strict to be in new line. For example of these cases:

<ul class="lists" v-for="item" v-key="item.id">

<img src="" alt="title" />

<div id="appBox" class="app-wrapper">

<button class="btn btn-submit" @click="submitForm">

Our developers would like to follow the full VueJS recommended standards too, but this rules seems too strict and our HTML template doesn’t look really well after most of these elements needs to be in multi-line.

I understand that we can just override the rules with custom max-attribute-per-lines lint rules in the .eslintrc, but again we would prefer to follow the official rules set, just like @tiltec said.

Please reconsider, thank you!

1reaction
michalsnikcommented, Dec 21, 2017

Hey @tiltec, thanks for posting this. Now this topic will have it’s proper attention 😃

What do you think about this @chrisvfritz? You probably missed my proposition in bunch of other messages in the original issue 😄 If we’re going to change anything here, it has to start with the StyleGuide, so we can align with our source of truth 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

vue/max-attributes-per-line
The number of maximum attributes per line when the opening tag is in a single line. Default is 1 . This can be...
Read more >
Add page breaks & move margins - Google Docs Editors Help
You can add breaks or adjust the margins of your document. The 3 types of breaks you can add are: Page break Section...
Read more >
Google Docs: Using Indents and Tabs - GCFGlobal
A great way to draw attention to important areas within your document is to add an indent or tab. There are several ways...
Read more >
SetImageSize - Google Workspace Marketplace
This Add-on makes it possible to precisely control the width & height of images in Google docs. It currently only works with 'In...
Read more >
single line spacing - Google Groups
Word changed the default to add more space between paragraphs, so that each paragraph will be single-spaced, but between paragraphs, you get extra...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found