Ignore frontmatter in .svx files

[janosh]

Description

I'd like to use the syntax highlighting and code completion features this extensions provides for Svelte files in MDsveX files as well. This can be done by adding

"files.associations": {
  "*.svx": "svelte"
},

to VS Code's settings.json. Works great in limited cases. The main obstacle is frontmatter.

---
title: My lovely article
author: Dr. Fabuloso the Fabulous
---

# {title} by {author}

Some amazing content.

The metadata section is collapsed by auto-format on save to

--- title: My lovely article author: Dr. Fabuloso the Fabulous --- # {title} by {author}

Some amazing content.

Proposed solution

Maybe there could be a setting ignoreFrontmatter which ignores everything inside

---
...
---

and pretends the Svelte file starts after that?

Alternatives

No response

Additional Information, eg. Screenshots

No response

[dummdidumm]

This is tricky. By marking svx as Svelte files (which they aren't really, it's somewhat of an enhancement of it), the plugin also runs Prettier on them. You could switch the preferred formatting extesion for Svelte files to prettier (which then requires you to have prettier-plugin-svelte installed in your package.json). Maybe that helps as Prettier might be able to say "oh this is not a Svelte file I don't format that". If that doesn't help you could exclude all svx files from getting formatted through the a .prettierignore file.

[janosh]

Good idea. I have prettier-plugin-svelte installed anyway and as you suspected, prettier will not format the file at all.

"[svelte]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
  // "editor.defaultFormatter": "svelte.svelte-vscode"
},

I'll work with this for a while and see how well it does.

[janosh]

Even with prettier-plugin-svelte installed, setting it as editor.defaultFormatter breaks formatting Svelte (not SVX) files on save for some reason. If I comment out both lines, it works again.

"[svelte]": {
  // "editor.defaultFormatter": "esbenp.prettier-vscode"
  // "editor.defaultFormatter": "svelte.svelte-vscode"
},

package.json:

"devDependencies": {
  "@sveltejs/adapter-static": "1.0.1",
  "@sveltejs/kit": "1.0.7",
  "@sveltejs/package": "^1.0.2",
  "@typescript-eslint/eslint-plugin": "^5.48.0",
  "@typescript-eslint/parser": "^5.48.0",
  "@vitest/coverage-c8": "^0.27.0",
  "devalue": "^4.2.0",
  "eslint": "^8.31.0",
  "eslint-plugin-svelte3": "^4.0.0",
  "jsdom": "^21.0.0",
  "mdsvex": "^0.10.6",
  "mdsvexamples": "^0.3.3",
  "prettier": "^2.8.2",
  "prettier-plugin-svelte": "^2.9.0",
  "svelte": "^3.55.0",
  "svelte-check": "^3.0.1",
  "svelte-preprocess": "^5.0.0",
  "svelte2tsx": "^0.6.0",
  "typescript": "^4.9.4",
  "vite": "^4.0.4",
  "vitest": "^0.27.0"
},