New Add vue/new-line-between-multiline-property rule

[IWANABETHATGUY]

No description provided.

[IWANABETHATGUY]

complete #391

[ota-meshi]

Thank you for this PR.

I don't want to add this rule now because I'm not convinced that this rule conflicts with other eslint and eslint-plugin rules.

[privatenumber]

Very interested in this rule.

@ota-meshi What are the other rules this might conflict with?

If the merge-conflicts can be resolved, I have access to multiple large, internal Vue codebases I can test on.

[ota-meshi]

At the very least, we should make sure that all the rules of ESLint core and their options don't conflict.
https://eslint.org/docs/rules/

Also, the style of object properties is not Vue.js-specific, so I think we need to check some of the other popular eslint-plugins as well.
https://github.com/dustinspecker/awesome-eslint

If find a conflicting rule, we should either fix this rule so that it doesn't conflict, or document a workaround.

[privatenumber]

Thanks @ota-meshi

@IWANABETHATGUY do you have time to resolve the merge-conflicts?

[IWANABETHATGUY]

Thanks @ota-meshi

@IWANABETHATGUY do you have time to resolve the merge-conflicts?
done

[privatenumber]

Was finally able to make the time to apply this onto two very large codebases, and the results are pretty much flawless.
It auto-fixed 1,048 out of 1,071 files in the larger codebase and I just manually reviewed all the changes.

There was an error with no-async-in-computed-properties, but I see that's fixed here: #1227

The only thing that I caught that seems unexpected is that it was applied to the contents of an unrelated static-method on the Vue component. It's not a big deal but it added new lines between an object that was inside the function.

From:

<script>
export default {
	...,
	errorCapture(err) {
		logError(err, {
			propA: {
				...
			},
			propB: {
				...
			},
		});
	},
	...
};
</script>

To:

<script>
export default {
	...,
	errorCapture(err) {
		logError(err, {
			propA: {
				...
			},

			propB: {
				...
			},
		});
	},
	...
};
</script>

---

On a separate note, I'm got to checkout a bunch of the new ESlint Vue rules and I'm very impressed with all the new features! Great work :)

[IWANABETHATGUY]

Was finally able to make the time to apply this onto two very large codebases, and the results are pretty much flawless.
It auto-fixed 1,048 out of 1,071 files in the larger codebase and I just manually reviewed all the changes.

There was an error with no-async-in-computed-properties, but I see that's fixed here: #1227

The only thing that I caught that seems unexpected is that it was applied to the contents of an unrelated static-method on the Vue component. It's not a big deal but it added new lines between an object that was inside the function.

From:

<script>
export default {
	...,
	errorCapture(err) {
		logError(err, {
			propA: {
				...
			},
			propB: {
				...
			},
		});
	},
	...
};
</script>

To:

<script>
export default {
	...,
	errorCapture(err) {
		logError(err, {
			propA: {
				...
			},

			propB: {
				...
			},
		});
	},
	...
};
</script>

On a separate note, I'm got to checkout a bunch of the new ESlint Vue rules and I'm very impressed with all the new features! Great work :)

could you give me some test case, so that i could fix it.

[privatenumber]

@IWANABETHATGUY

Added it here IWANABETHATGUY#1

Specific error-case here

[IWANABETHATGUY]

@privatenumber , i add the callExpression test case, and you miss that , there should be a new line between props and staticMethodFn.

[privatenumber]

There is a new line ?

Thanks for the fix! I'll check it out soon.

Can you also pull in master please? There are some fixes in there that addresses a crash when I run eslint with your branch.

[IWANABETHATGUY]

There is a new line ?

Thanks for the fix! I'll check it out soon.

Can you also pull in master please? There are some fixes in there that addresses a crash when I run eslint with your branch.

i merge the latest master branch and pass all test.

[IWANABETHATGUY]

@ota-meshi Is it time to merge this feature ?

[ota-meshi]

First of all, thank you for your help.
But did you make sure that there were no conflicts with all the rules of ESLint?
The fact that we was able to check it on large codebases is very helpful information, but I don't know if we could make sure there are no conflicts because I don't know which rules are enable in your repository.

[privatenumber]

@ota-meshi

I extend 'plugin:vue/recommended' with the following overrides:

{
		'vue/html-indent': ['error', 'tab', {
			alignAttributesVertically: false,
		}],
		'vue/html-self-closing': ['error', {
			html: {
				normal: 'never',
				void: 'always',
				component: 'always'
			},
			svg: 'always',
			math: 'always'
		}],
		'vue/max-attributes-per-line': ['error', {
			singleline: 0,
		}],
		'vue/html-closing-bracket-newline': ['error', {
			singleline: 'never',
			multiline: 'always',
		}],
		'vue/prop-name-casing': ['off'],
		'vue/no-v-html': ['off'],
}

[ota-meshi]

@privatenumber Thank you for sharing it.
Does that mean you are not using any rules other than vue/*?
If you're not using any rules other than vue/*, probably not sure that we won't conflict with ESLint builtin rules.

[privatenumber]

I use airbnb-config-base with it.

[ota-meshi]

I wanted to know about that! Thank you.

[ota-meshi]

I checked the rules in airbnb-config-base and found many rules are enabled. Also, I'm using eslint-config-standard and it works pretty well there too. So in most cases, I don't think there will be conflicts. Thank you for helping me with the check.

[IWANABETHATGUY]

@ota-meshi could you please review again?

[ota-meshi]

Sorry for the late check.
Looks good to me! Thank you!