-
-
Notifications
You must be signed in to change notification settings - Fork 681
Add rule max-attributes-per-line
(resolves #47)
#60
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 2 commits
a7d9313
7ef1ca5
6a62bdd
1d34713
c78b20d
56f5f70
ca31f09
ed73ad8
df1207b
39d0743
796611e
982d9f2
2f0492d
5539686
dcb3ee3
dc64c62
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,123 @@ | ||
# Define the number of attributes allows per line (max-attributes-per-line) | ||
|
||
Limits the maximum number of attributes/properties per line to improve readability. | ||
|
||
|
||
## Rule Details | ||
|
||
This rule aims to enforce a number of attributes per line in templates. It checks all the elements in a template and verifies that the number of attributes per line does not exceed the defined maximum. | ||
An attribute is considered to be in a new line when there is a line break between two attributes. | ||
|
||
There is predefined number of attributes that are acceptable in one-line case, as well as how many attributes are acceptable per line in multi-line case. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Let's update a little bit more:
And then we can remove the next sentence. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Fixed ✅ |
||
|
||
The default is one attribute per line for multiline and three attributes per line in singleline. | ||
|
||
Examples of **incorrect** code for this rule: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
||
```js | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
<component lorem="1" ipsum="2" dolor="3" sit="4"> | ||
</component> | ||
|
||
<component | ||
lorem="1" ipsum="2" | ||
dolor="3" | ||
sit="4" | ||
> | ||
</component> | ||
``` | ||
|
||
Examples of **correct** code for this rule: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
||
```js | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
<component lorem="1" ipsum="2" dolor="3"> | ||
</component> | ||
|
||
<component | ||
lorem="1" | ||
ipsum="2" | ||
dolor="3" | ||
sit="4" | ||
> | ||
</component> | ||
|
||
``` | ||
|
||
### Options | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
||
``` | ||
{ | ||
"vue/max-attributes-per-line": ["error", { | ||
"firstline": 1, | ||
"singleline": 2, | ||
"multiline": 1 | ||
}] | ||
} | ||
``` | ||
|
||
### `firstline` | ||
For muliline declarations, defines if it accepts an attribute in the first line. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
We can discuss default settings later :) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Fixed ✅ |
||
|
||
The following patterns is considered a warning: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Let's be consistent :)
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Fixed ✅ |
||
```js | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
// ["error", { "firstline": 1, "singleline": 2, "multiline": 1}] | ||
<component | ||
foo="John" bar="Smith" | ||
foobar={5555555}> | ||
</component>; | ||
``` | ||
|
||
The following pattern is not considered a warning: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Fixed them all ✅ |
||
```js | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
// ["error", { "firstline": 0, "singleline": 3, "multiline": 1}] | ||
<component | ||
foo="John" | ||
bar="Smith" | ||
foobar={5555555} | ||
> | ||
</component>; | ||
``` | ||
|
||
|
||
### `singleline` | ||
Number of maximum attributes per line when the opening tag is in a single line. | ||
|
||
The following patterns is considered a warning: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. As above:
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ✅ |
||
```js | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
// ["error", { "firstline": 1, "singleline": 2, "multiline": 1}] | ||
<component foo="John" bar="Smith" foobar={5555555}></component>; | ||
``` | ||
|
||
The following pattern is not considered a warning: | ||
```js | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
// ["error", { "firstline": 1, "singleline": 3, "multiline": 1}] | ||
<component foo="John" bar="Smith" foobar={5555555}></component>; | ||
``` | ||
|
||
|
||
### `multiline` | ||
Number of maximum attributes per line when a tag is in multiple lines. | ||
|
||
|
||
The following patterns is considered a warning: | ||
```js | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
// ["error", { "firstline": 1, "singleline": 2, "multiline": 1}] | ||
<component foo="John" bar="Smith" | ||
foobar={5555555}> | ||
</component>; | ||
``` | ||
|
||
The following pattern is not considered a warning: | ||
```js | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
// ["error", { "firstline": 0, "singleline": 3, "multiline": 1}] | ||
<component | ||
foo="John" | ||
bar="Smith" | ||
foobar={5555555} | ||
> | ||
</component>; | ||
``` | ||
|
||
## When Not To Use It | ||
|
||
If you do not want to check the number of attributes declared per line you can disable this rule. | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
/** | ||
* @fileoverview Define the number of attributes allows per line | ||
* @author Filipa Lacerda | ||
*/ | ||
"use strict"; | ||
|
||
//------------------------------------------------------------------------------ | ||
// Rule Definition | ||
//------------------------------------------------------------------------------ | ||
|
||
module.exports = { | ||
meta: { | ||
docs: { | ||
description: "Define the number of attributes allows per line", | ||
category: "Fill me in", | ||
recommended: false | ||
}, | ||
fixable: null, // or "code" or "whitespace" | ||
schema: [ | ||
// fill in your schema | ||
] | ||
}, | ||
|
||
create: function(context) { | ||
|
||
// variables should be defined here | ||
|
||
//---------------------------------------------------------------------- | ||
// Helpers | ||
//---------------------------------------------------------------------- | ||
|
||
// any helper functions should go here or else delete this section | ||
|
||
//---------------------------------------------------------------------- | ||
// Public | ||
//---------------------------------------------------------------------- | ||
|
||
return { | ||
|
||
// give me methods | ||
|
||
}; | ||
} | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
/** | ||
* @fileoverview Define the number of attributes allows per line | ||
* @author Filipa Lacerda | ||
*/ | ||
"use strict"; | ||
|
||
//------------------------------------------------------------------------------ | ||
// Requirements | ||
//------------------------------------------------------------------------------ | ||
|
||
var rule = require("../../../lib/rules/max-attributes-per-line"), | ||
|
||
RuleTester = require("eslint").RuleTester; | ||
|
||
|
||
//------------------------------------------------------------------------------ | ||
// Tests | ||
//------------------------------------------------------------------------------ | ||
|
||
var ruleTester = new RuleTester(); | ||
ruleTester.run("max-attributes-per-line", rule, { | ||
|
||
valid: [ | ||
|
||
// give me some code that won't trigger a warning | ||
], | ||
|
||
invalid: [ | ||
{ | ||
code: "", | ||
errors: [{ | ||
message: "Fill me in.", | ||
type: "Me too" | ||
}] | ||
} | ||
] | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.