Skip to content
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

Formatting svelte files #88

Closed
agorer opened this issue Jun 5, 2021 · 4 comments · Fixed by #89
Closed

Formatting svelte files #88

agorer opened this issue Jun 5, 2021 · 4 comments · Fixed by #89
Assignees
Labels
bug Something isn't working

Comments

@agorer
Copy link

agorer commented Jun 5, 2021

Describe the bug
When formatting a svelte files it seems like it thinks that it is a js file. Giving errors like

/Users/.../src/pages/_layout.svelte: SyntaxError: Private identifiers are not allowed outside class bodies. (9:2)
   7 | </script>
   8 |
>  9 | {#if $user.isAuthenticated}
     |  ^
  10 |   <div class="containter">
  11 |     <div>
  12 |       <slot />

Link to M-x prettier-info output
https://gist.github.com/agorer/c57f881d75d39779a1a91a71b4f8bf15

To Reproduce

  1. Install svelte plugin for Prettier (https://github.com/sveltejs/prettier-plugin-svelte).
  2. Create a svelte file like:
<script lang="ts">
  import { goto } from '@roxi/routify'
  import Footer from 'layout/Footer.svelte'
  import { user } from "auth/store"

</script>

{#if $user.isAuthenticated}
  <div class="containter">
    <div>
      <slot />
    </div>

    <Footer />
  </div>
{:else}
  {$goto('/auth/login')}
{/if}
  1. Try to format the file within emacs.

Expected behavior
The file should be formatted according to the rules in .prettierrc

Additional context

@jscheid
Copy link
Owner

jscheid commented Jun 6, 2021

This is due to this package deriving the Prettier parser from the major mode instead of letting Prettier choose the parser.

It's something I've been meaning to change, I'll see that I can push an improvement for this soon.

As a workaround, if you use svelte-mode it should use the correct parser but I can see why you would want to use typescript-mode instead.

@agorer
Copy link
Author

agorer commented Jun 6, 2021

It's something I've been meaning to change, I'll see that I can push an improvement for this soon.

Thanks, looking forward to it.

As a workaround, if you use svelte-mode it should use the correct parser but I can see why you would want to use typescript-mode instead.

I am using svelte-mode, but it changes the major mode depending on where you are in the file (ts / js mode inside the script tags, svelte in the markup and css within the style tags). In fact I have just checked it and it works if I save when the cursor is located in the markup.

@jscheid jscheid added the bug Something isn't working label Jun 6, 2021
@jscheid jscheid self-assigned this Jun 6, 2021
jscheid added a commit that referenced this issue Jun 6, 2021
@jscheid
Copy link
Owner

jscheid commented Jun 6, 2021

I am using svelte-mode

Right, that's different. I've pushed a fix, it should have landed in 20210606.1152. Can you let me know if it works better?

@agorer
Copy link
Author

agorer commented Jun 6, 2021

Yes, it is working now anywhere in the file, thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants