Skip to content

Instantly share code, notes, and snippets.

@Rich-Harris
Last active May 6, 2024 10:29
Show Gist options
  • Save Rich-Harris/48a6ef7c6694097c0ef5ed516c8bed6e to your computer and use it in GitHub Desktop.
Save Rich-Harris/48a6ef7c6694097c0ef5ed516c8bed6e to your computer and use it in GitHub Desktop.
What should be the canonical file extension for Svelte components?

So far, most of us have been writing Svelte components into .html files, with a few exceptions (Parcel users, for example, have additional constraints to work with). We're currently discussing whether this should change.

Once you've read the pros and cons, please vote!

.html

Pros:

  • It signals that you can use your existing HTML (and CSS) knowledge
  • Valid HTML is valid Svelte
  • Syntax highlighting mostly works everywhere OOTB (expressions in {tags} are treated as text, though)

Cons:

  • Svelte components aren't really HTML
  • Tools like Parcel can't deal with it
  • We don't get full syntax highlighting
  • Some tools, like WebStorm, struggle with directives etc

.htmlx

Pros:

  • It signals that it's HTML-with-extras
  • Symmetry with .js and .jsx
  • It's an invitation to other frameworks to collaborate, rather than continuously reinventing template languages

Cons:

  • No syntax highlighting out of the box — imposes tooling requirements on users, could be offputting for new recruits
  • It's a land grab
  • May be hard to get Linguist to adopt Svelte syntax highlighting for it

.svelte

Pros:

  • Does what it says on the tin. Zero ambiguity
  • Linguist support — we should be able to claim svelte for fenced code blocks
  • It's unlikely to cause conflict with other frameworks etc

Cons:

  • No syntax highlighting. Like .htmlx, the first-time experience is poor
@Himujjal
Copy link

Himujjal commented Aug 1, 2023

.svlt is a good name IMO. Ee simply remove the vowels but also maintain the pronunciation to be svelte.

@rtllxndr
Copy link

rtllxndr commented Nov 7, 2023

.sv for easier typing. .s is possible but is clashing with assembly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment