feat(eslint-plugin): add svelte support

[devunt]

Currently @unocss/eslint-plugin only supports React and Vue by visiting JSXAttribute and VAttribute nodes.

This patch adds support for Svelte by visiting SvelteAttribute which comes from svelte-eslint-parser community package.

Why not sveltejs/eslint-plugin-svelte3?

While they are the official (and recommended) eslint plugin for Svelte, they uses some hack-ish preprocess/postprocess mechanisms to traverse the code and does not provide any ASTs. Thus it is impossible to use their implementation.

What is with AST_NODES_WITH_QUOTES and fixer.replaceTextRange?

This comes from the difference between React/Vue and Svelte's AST structure. As there are no concrete standard in the eslint AST specification, each framework's AST and how their properties are calculated is slightly different.

TL;DR: Literal and VLiteral nodes are having their range contains its encapsulating quotes, but SvelteLiteral's counterpart does not contain the encapsulatings.

Having the same following attribute in the code,

class='w-32'

• Literal (from React): { "type": "Literal", "value": "w-32", "raw": "'w-32'", "range": [6, 11] }
• VLiteral (from Vue): { "type": "VLiteral", "value": "w-32", "range": [6, 11] }
• SvelteLiteral (from Svelte): { "type": "SvelteLiteral", "value": "w-32", "range": [7, 10] }

While they have the same value for value, the range they provide are different.
To keep the code simple, I've made the list of literal nodes which its range contains the encapsulating quotes themselves.
By checking the list, we can decide should the fixer replaces the whole range of the node or just the content of the node of interest.

By using this approach, not only being able to support various ASTs, we can also keep the original quotes from the code no matter it was " or '. The original implementation was to simply replace with " regardless of the original context.

[netlify]

✅ Deploy Preview for unocss ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	443e2dc
🔍 Latest deploy log	https://app.netlify.com/sites/unocss/deploys/64261ed0a270b500089d49c6
😎 Deploy Preview	https://deploy-preview-2417--unocss.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[antfu]

Can you add some test fixtures to packages/eslint-plugin/fixtures/src as well? Thanks

[devunt]

Just added basic fixture for svelte.

[JaKXz]

Awesome - so would this replace the svelte plugin for .svelte files? Should that be clarified in the docs? :)

[devunt]

Awesome - so would this replace the svelte plugin for .svelte files? Should that be clarified in the docs? :)

I'm not quite sure what it does mean by "replace the svelte plugin". As this is only for ESLint and does not interfere with unocss's existing svelte integration.

[JaKXz]

Sorry I meant would it replace the svelte3 eslint plugin?

Or does the user’s eslint config stay the same, and simply extending the @unocss config will be fine?

[devunt]

eslint-plugin-svelte must be used instead of eslint-plugin-svelte3 in order to use this eslint rule.

The good news is, since yesterday Svelte guys finally decided to deprecate their nonsense eslint-plugin-svelte3 and made eslint-plugin-svelte as their official eslint plugin. Changes to the npm are already made and updating documentations are in the way. I didn't expected that was coming when I was writing this PR, but it will definitely make this rule's interoperability much better.