Есть ли у eslint правило для сортировки атрибутов элемента в React?

Question

[tostershmoster]

Например, есть

<button
  onClick={handleClick}
  type="button"
  className="close-button"
>

Нужно отсортировать onClick, type и button в правильном порядке

Нужно именно для элементов div, button, input. Чтобы class был всегда вверху, а обработчик события внизу и другие атрибуты в правильном порядке везде однообразно. Для Vue есть что-то подобное, нужно сделать такое же для React

Comments

[szQocks]

а какой порядок должен быть, мне вот чисто интересно ? сначала должен идти className потом type а потом onClick ?)

[WbICHA]

https://github.com/jsx-eslint/eslint-plugin-react/...

[szQocks]

WbICHA, ума не приложу зачем только это придумали

[tostershmoster]

WbICHA, Нужно именно для элементов div, button, input, а не для компонентов. Чтобы class был всегда вверху, а обработчик события внизу и другие атрибуты в правильном порядке везде однообразно. Для Vue есть что-то подобное, нужно сделать такое же для React

[WbICHA]

tostershmoster,

Нужно именно для элементов div, button, input, а не для компонентов.

И давно у нас div, button, input не компоненты?

[WbICHA]

szQocks, чтобы везде иметь один и тот же порядок.) Хотя лично я использую только настройку reservedFirst, дабы кей и реф были всегда вначале для читабельности.

[szQocks]

WbICHA, ну про то что вначале класс, кей, реф нужно писать все вроде и так это знают, а вот всё остальное пишу так что бы было хорошо читабельное, но линтер для этого - тьфу

[szQocks]

tostershmoster, понял, принял.

а если пройти по ссылке то там можно настроить пропсы так что бы они были по алфавиту, это ппц же, как будто несколько десятков пропсов в компоненты передаются везде вхаха) орнул

[WbICHA]

szQocks, как показывает практика, если то, что написано в стайл гайде, не проверяется анализаторами, то это непроверяется вообще.) Да, не все кейсы можно в еслинт засунуть (вообще, конечно, если не все, то почти все, но не для всех есть готовое решение, а для своего решения времени нет), но чем меньше таких кейсов, тем больше вероятность, что это не пройдёт код ревью. Тот же класснейм вначале легко пропустить, если много изменений. А даже если и найдёшь, что будешь делать, если автор пра откажется менять порядок? А вот еслинту пофиг, хочешь - не хочешь, а в пайплайне пра упаду и фиг тебе, а не мерж.)

[szQocks]

WbICHA, в линте есть действительно куча полезных правил, правило про порядок пропсов, ну мне не когда не понять, и если быть реалистом то из-за порядка, краша не будет)

[WbICHA]

szQocks, ну дык тот же преттиер нужен совсем не для того, чтобы спасти программу от краша.)

[tostershmoster]

WbICHA,

И давно у нас div, button, input не компоненты?

Вам слово компоненты мешает понять что нужен не алфавитный порядок?

[WbICHA]

tostershmoster, и что мешает отключить алфавитный порядок?

[tostershmoster]

WbICHA, без алфавитного порядка половина пропсов не будет сортироваться, с алфавитным className не будет вверху если есть пропсы которые начинаются на а/b/c

[WbICHA]

tostershmoster,

без алфавитного порядка половина пропсов не будет сортироваться

Так ты уж определись, тебе надо, чтобы они сортировались, или нет.

с алфавитным className не будет вверху если есть пропсы которые начинаются на а/b/c

И в чём проблема настроить рул? Или ты думаешь reservedFirst просто так массив принимает?
А вообще в чём проблема залезть в код рула и посмотреть как он устроен? И если ненравится, скопировать себе и переписать?

[tostershmoster]

Так ты уж определись, тебе надо, чтобы они сортировались, или нет.

В вопросе это было сразу указано

Чтобы class был всегда вверху, а обработчик события внизу и другие атрибуты в правильном порядке везде однообразно.

И в чём проблема настроить рул? Или ты думаешь reservedFirst просто так массив принимает?

Он принимает только кастомные пропсы, на className будет

A customized reserved first list must only contain a subset of React reserved props. Remove: className eslintreact/jsx-sort-props

А вообще в чём проблема залезть в код рула и посмотреть как он устроен? И если ненравится, скопировать себе и переписать?

Мне зачем тут неделю ответа ждать если бы у меня была возможность просто взять и переписать? Может если кто-то задаёт вопрос, наверно, в этом есть какой-то смысл? Тем более что в нём не было ничего о том как переписать исходники eslint