Rule proposal: `no-class-list-add-add`

[silverwind]

Description

Like no-array-push-push but for DOMTokenList.add.

Fail

el.classList.add('foo');
el.classList.add('bar', 'baz');

Pass

el.classList.add('foo', 'bar', 'baz');

Additional Info

Maybe also name it no-classlist-add-add because the rule wil likely match on that string and does not actually know the type.

[silverwind]

Renamed to no-classlist-add-add, I think it's clearly a better name.

[silverwind]

I think I could have a try at implementing this rule.

[dimaMachina]

classList.remove accepts also multiple arguments so that we can have one generic rule for both .add and .remove methods

Fail

el.classList.remove('foo');
el.classList.remove('bar', 'baz');

Pass

el.classList.remove('foo', 'bar', 'baz');

[silverwind]

Any name suggestions when covering remove as well? no-classlist-repeated-modify?

[fisker]

It's fine to check both in one rule called -add-add.

no-plusplus checks -- too.

We may check .unshift() in no-array-push-push too, https://github.com/sindresorhus/eslint-plugin-unicorn/issues/1019

[fisker]

We should add a dash to classlist.

[silverwind]

I'm thinking of an even broader name: prefer-combinable-action. It could have a in-rule config like:

const matches = [
  ['classList', 'add'],
  ['classList', 'remove'],
  ['push'],
];

This would be very easy to extend later on and it could maybe also replace no-array-push-push.

[fisker]

I was thinking the same easier, so I searched the JavaScript spec easier today, except Math.{min,max}() there seems no other methods accepts unlimited arguments, and Math.{min,max}() normally assigned to a variable not exactly the same as Array#{push,unshift}(). Then I give up the idea to combine them into one rule.

[silverwind]

Thanks for searching. I was almost sure that Set.add would support it as well, but alas, no.

[silverwind]

We should add a dash to classlist.

I take it this is consistent with other rule names?

[dimaMachina]

I'm thinking of an even broader name: prefer-combinable-action. It could have a in-rule config like:

const matches = [
  ['classList', 'add'],
  ['classList', 'remove'],
  ['push'],
];

This would be very easy to extend later on and it could maybe also replace no-array-push-push.

interested but for adding Array#unshift it should suggest inverted order.

const matches = [
  ['classList', 'add'],
  ['classList', 'remove'],
  ['push'],
  { path: ['unshift'], invertOrder: true }
]

Fail

foo.unshift(1);
foo.unshift(2);
    ^^^^^^^ Do not call `#unshift()` multiple times. Argument order should be inverted!
foo.unshift(3);
    ^^^^^^^ Do not call `#unshift()` multiple times. Argument order should be inverted!

Suggestion

foo.unshift(3, 2, 1);

[sindresorhus]

Accepted as no-class-list-add-add

[axetroy]

When I tried to apply this rule to my code base, I found it less readable (even though there were a few fewer method calls)