Parser for prettier

[eps1lon]

To format .svx files I'm using prettier with their built-in parser for markdown which isn't ideal since it doesn't touch code such as

<script context="module">
  export async function preload() {
    const {repositories, totalStars, updatedAt} = await this.fetch('contributions.json').then(response => response.json());

    repositories.sort((a, b) => {
      return b.stars - a.stars
    });

    return {repositories, totalStars, updatedAt};
  }
</script>

-- .svx in prettier playground

when the actual javascript should be formatted as

export async function preload() {
  const { repositories, totalStars, updatedAt } = await this.fetch(
    "contributions.json"
  ).then((response) => response.json());

  repositories.sort((a, b) => {
    return b.stars - a.stars;
  });

  return { repositories, totalStars, updatedAt };
}

-- javascript in prettier playground

Using the mdx parser does not work since it causes multiple syntax errors.

I guess we should be able to pass a custom parser to prettier. https://github.com/prettier/prettier/pull/4975 could be used as inspiration.

[pngwn]

This is very much on my todo list when i've resolved a few core issues that I'm currently working on.

[jcayzac]

Prettier uses themdx parser when it sees a .mdx, with the result you highlight above. The markdown parser gives me better results. Try adding this to your .prettierrc.yaml:

overrides:
  - files:
      - '*.mdx'
      - '*.svx'
    options:
      parser: markdown

[basaran]

it would have been great to have something that combines mdx and markdown parsers. Mdx formats everything nicely, but destroys the mdsvex file :) and markdown skips formatting of all svelte markup.

In the meantime, on sublime, I setup two formatters. The formatter I use for selections does mdx formatting that I use on markup, and the formatter for the entire buffer uses markdown parser.