eslint-plugin-sort-class-members icon indicating copy to clipboard operation
eslint-plugin-sort-class-members copied to clipboard

Mixing arrow function properties with methods

Open the-owl opened this issue 6 years ago • 12 comments

I haven't found a way to treat methods and arrow function properties as a single group. Is this currently possible? I'd like to treat arrow function properties as methods and sort them alphabetically together, like this:

class A {
  a = () => {}

  b () {}

  c = () => {}

  d () {}
}

the-owl avatar Feb 09 '19 16:02 the-owl

I think you're right. There isn't currently a way to define a group whose matches are unordered. I imagine this could be useful for React components, where methods are often converted to arrow function properties to avoid binding issues.

This is almost it, except it requires methods to come before properties

groups: {
	methodOrFuncProperty: [
		{ type: 'method' },
		{ type: 'property', propertyType: 'ArrowFunctionExpression' },
	],
},

There is a sort option on a matcher, but maybe we could move it up to the group level?

groups: {
	methodOrFuncProperty: {
		rules: [
			{ type: 'method' },
			{ type: 'property', propertyType: 'ArrowFunctionExpression' },
		],
		sort: 'none',
	},
},

bryanrsmith avatar Feb 10 '19 22:02 bryanrsmith

There is a sort option on a matcher, but maybe we could move it up to the group level?

groups: {
	methodOrFuncProperty: {
		rules: [
			{ type: 'method' },
			{ type: 'property', propertyType: 'ArrowFunctionExpression' },
		],
		sort: 'none',
	},
},

Yes, this will solve the problem! I can try to implement this feature and send a PR.

the-owl avatar Mar 08 '19 20:03 the-owl

Thanks

nsisodiya avatar Oct 19 '20 13:10 nsisodiya

@bryanrsmith - I am confused, above config will work or proposed? Please let us know what is the right config if we want to mix (arrow functions and methods) and then sort both together.

nsisodiya avatar Oct 19 '20 13:10 nsisodiya

No, it's is not currently supported. I was proposing that the sort option be supported at the group level to enable this functionality. PRs welcome!

bryanrsmith avatar Oct 19 '20 15:10 bryanrsmith

@bryanrsmith - may you guide me, I can try for a PR.

nsisodiya avatar Oct 19 '20 18:10 nsisodiya

You can already wrap the arrow functions with methods, which allows to keep the methods and the arrow props in the same place. I am not sure why this works but it does for me.

"order": [
            "[static-properties]",
            "[static-methods]",
            "[properties]",
            "constructor",
            "[methods]",
            {
              "type": "property",
              "propertyType": "ArrowFunctionExpression"
            },
            "[methods]"
 ],

kazlauskis avatar Nov 26 '20 19:11 kazlauskis

Any update on this? I'm also interested. Maybe instead of rules, we can reuse the groups, so we don't need to define them again, as far as we prevent loops it will be fine.

piranna avatar May 08 '23 07:05 piranna

No updates. I haven't personally used this plugin in a long time, as classes are not a language feature I use much any more. I'm happy to review PRs, but I'm not very motivated to put any effort into new features myself. Sounds like a plan has been proposed earlier in the thread, so feel free to take a stab at it.

bryanrsmith avatar May 10 '23 00:05 bryanrsmith

classes are not a language feature I use much any more

Just curious, what pattern are you using now? Functional programming? Split of data and procedures?

piranna avatar May 10 '23 01:05 piranna

Yep. I do a lot of React work, and my class use dropped off pretty hard when React introduced hooks in 2019.

bryanrsmith avatar May 10 '23 05:05 bryanrsmith

Ok, make sense. Personally I think hooks were an error, I still prefer classes, but if they are useful to you, that's fine :-)

piranna avatar May 10 '23 06:05 piranna