Language Svelte

HTML (Svelte)

Provides syntax highlighting for Svelte Components, directives and other Svelte specific syntax in Atom.

If you are looking for IDE support use ide-svelte instead.

Syntax naming conventions

Syntax naming is done following conventions from Sublime and TextMate.

Features

• Html snippet / autocompletion support from atom/language-html
• Svelte snippets for: {#if}, {#each}, {#await} and <svelte:tag>.

Roadmap to v1.0.0

• All Svelte syntax captured:

  • Template blocks; if, each, await.

  • {expression} - Svelte expressions

  • <svelte:tag>

  • <script>

  • <script context="module">

  • <style>

  • <style lang="postcss|sass|less">

  • <Component/> (tag.component)

  • Element directives:

    • on - event directive
    • bind - data flow directives
    • class - css classes directive
    • use - action directive
    • transition|animate|in|out - motion directives

  • Component directives; on, bind.

  • Svelte component lifecycle

  • Svelte slot element; named slot, slot property values

  • Svelte modules; stores, motion, transition, animation

• Snippets

  • {#if}

  • {#each}

  • {#await}

  • <svelte:x>

  • Accessibility related (html snippets)

• Tree sitter Svelte... This seems to be a bit more advanced stuff and might be done in v1.1+.