solidjs-community / eslint-plugin-solid

Solid-specific linting rules for ESLint.
MIT License
209 stars 24 forks source link

Rule for sort JSX props #66

Open ceopaludetto opened 1 year ago

ceopaludetto commented 1 year ago

Describe the need I want to sort JSX props based on several options, this can improve readability and keeps solid specific props in order, just like eslint-plugin-react does

Suggested Solution Create a rule to sort props which will consider refs, directives, asc/desc order, multiline props and callbacks

joshwilsonvu commented 1 year ago

Hi, thanks for writing up the feature request. I'm a little hesitant to add rules for formatting concerns rather than for actual problems, now that Prettier is the most common way to do formatting, but if there's significant demand then that could change.

Have you tried enabling eslint-plugin-react's version of the rule on your Solid code? Many of that plugin's rules still work on Solid code because the syntax is so similar. If you give that a try and it works, please let us know in this thread so anyone else who is interested can find it 🙂 If not, a plugin for Prettier might be a better fit.

ceopaludetto commented 1 year ago

Hi, thank you for the quick response. I agree to delegate the responsibility of style rules to prettier, however, I found an old issue that states it is not possible https://github.com/prettier/prettier/issues/323, I don't know if that still holds true today. Regarding the react rule, it works well, but solid has some minor differences in terms of event listeners naming, apparently sort gets confused a bit. Also, I am not very fond of the idea of installing a react rule in a solid project.

joshwilsonvu commented 1 year ago

Okay, I guess once this rule is ported it wouldn't be much of a maintenance burden, so I'm opening up to adding it, off by default. I'm sure people would find value in it. Perhaps a simplified, opinionated version without all the options since they greatly expand the number of tests required.

Can you provide specifics and/or examples on how eslint-plugin-react's version is getting tripped up? I'm guessing on:click and the like?