feat: add svelte/component-tags-order rule

[baseballyama]

close: #493

[changeset-bot]

🦋 Changeset detected

Latest commit: 5ac917d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
eslint-plugin-svelte	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[baseballyama]

How can I disable prettier for specific file?

[ota-meshi]

I often use <!-- prettier-ignore -->, but it is OK to use a .prettierignore file.

eslint-plugin-svelte/tests/fixtures/rules/indent/invalid/4-indent/test01-input.svelte

Line 1 in e386e34

<!-- prettier-ignore -->

[ota-meshi]

Hmm. I don't think it's a good idea to use a format specifically for this rule.
For example, using the CSS selector format most users already know the format. (However, users may be a little surprised because the colon must be escaped. e.g. svelte\:options)
Is the format currently used by the rule inspired by something?

[baseballyama]

I copied most parts from https://eslint.vuejs.org/rules/component-tags-order.html
And while implementing the rule, I felt that we need to support and condition, but I couldn't find the way to use and condition in the ESLint selector.
https://eslint.org/docs/latest/extend/selectors

And I think that the ESLint selector is complicated for most users because they need to understand Svelte ESLint AST.

That's why I go to use a special format.
(But yeah, I didn't support escaping things...)

[ota-meshi]

And while implementing the rule, I felt that we need to support and condition, but I couldn't find the way to use and condition in the ESLint selector.

Are you saying we can't use and in CSS selectors?
I think that the and condition in the CSS selector just connects without using spaces. e.g. script[context=module][lang=ts]
And in modern CSS selectors the or condition uses :is(). e.g. :is(script, style)

https://eslint.org/docs/latest/extend/selectors

I agree that esquery is difficult for users to understand.

[ota-meshi]

By the way, eslint-plugin-vue implements a function that converts CSS selectors to matchers in order to use CSS selectors in defining vue/component-tags-order rule option.

https://github.com/vuejs/eslint-plugin-vue/blob/81ce0cecb87eae60830b9b973790d4f2386062c1/lib/utils/selector.js#L22

[marekdedic]

Hi,
to add context, please see #493 (comment)