-
-
Notifications
You must be signed in to change notification settings - Fork 780
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(eslint-plugin): add svelte support #2417
Conversation
✅ Deploy Preview for unocss ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site settings. |
Can you add some test fixtures to |
Just added basic fixture for svelte. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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. |
Sorry I meant would it replace the svelte3 eslint plugin? Or does the user’s eslint config stay the same, and simply extending the |
The good news is, since yesterday Svelte guys finally decided to deprecate their nonsense |
Currently
@unocss/eslint-plugin
only supports React and Vue by visitingJSXAttribute
andVAttribute
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
andfixer.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
andVLiteral
nodes are having theirrange
contains its encapsulating quotes, butSvelteLiteral
's counterpart does not contain the encapsulatings.Having the same following attribute in the code,
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
, therange
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.