Svelte Syntax Highlighting

Sublime Text syntax highlighting for Svelte components, reactive JavaScript and TypeScript modules, and MDSVEX documents.

Install

• Via Package Control: search for Svelte.
• Manual: clone this repo into a folder named Svelte inside your Sublime Packages folder. Use Preferences → Browse Packages to find it.

Requires Sublime Text 4, build 4143 or newer. CI tests builds 4143, 4152, 4169, 4180, and the latest development build.

Supported files and features

Svelte highlighting includes runes, TypeScript template expressions, script generics, snippets, render and attachment tags, declaration tags, event attributes, comments between attributes, member components, boundaries, and markup await. Legacy blocks and directives remain supported.

MDSVEX combines Markdown with Svelte components and expressions, including expressions in link and image destinations. For projects configured to use .md files, select MDSVEX manually or use Open all with current extension as… in the syntax menu.

This package provides syntax highlighting. For diagnostics, navigation, and language-server completions, install LSP and LSP-svelte separately.

Supported Scripts

TypeScript

<script lang="typescript"></script>
<!-- or -->
<script type="text/typescript"></script>

or

<script lang="ts"></script>

type="application/typescript" is also supported. Use lang="ts" for the short language name; type="text/ts" is not recognized.

CoffeeScript

<script lang="coffeescript"></script>
<!-- or -->
<script type="text/coffeescript"></script>

LiveScript

<script lang="livescript"></script>
<!-- or -->
<script type="text/livescript"></script>

Babel

<script lang="babel"></script>
<!-- or -->
<script type="text/babel"></script>

Supported Styles

Sass

<style lang="sass"></style>
<!-- or -->
<style type="text/sass"></style>

Sass (SCSS)

<style lang="scss"></style>
<!-- or -->
<style type="text/scss"></style>

Less

<style lang="less"></style>
<!-- or -->
<style type="text/less"></style>

Stylus

<style lang="stylus"></style>
<!-- or -->
<style type="text/stylus"></style>

PostCSS

<style lang="postcss"></style>
<!-- or -->
<style type="text/postcss"></style>

JavaScript, TypeScript, and CSS use Sublime Text's bundled syntaxes. Install the corresponding syntax packages for other languages, such as Sass and Less. This package does not install or run preprocessors.

Testing

Tests in tests/ assert the scopes assigned by Sublime Text's syntax engine. To run them locally:

1. Install this checkout as Packages/Svelte and install the syntax dependencies for the embedded languages used by the tests.
2. Open a syntax_test_* file or a .sublime-syntax file from this package.
3. Choose Tools → Build System → Syntax Tests, then Tools → Build. Use Tools → Build Results → Next Result to navigate failures.

See Sublime's syntax testing documentation for assertion syntax. Native tests use the installed Sublime build and packages; Docker is not required.

CI runs the full five-build matrix on syntax or test changes, every Monday at 07:23 UTC, and through Run workflow in GitHub Actions. Historical jobs pin default packages, Less, and Sass to compatible refs; the latest job tracks their upstream branches. CI supplies empty syntaxes for CoffeeScript, LiveScript, PostCSS, SugarSS, and Stylus, so it checks embedding boundaries without validating those languages' internal highlighting. Use the workflow configuration when reproducing a particular CI environment.

Known limitations

The lookahead that distinguishes TypeScript assertions from the as in an each block supports three levels of bracket nesting. It does not skip string literals or see a later as on another line. Keep chained assertions and the loop's as on one line, or parenthesize the source assertion, for example {#each (items as Item[]) as item}.

Special Thanks

Huge thanks to the Vue.js folks for their Vue Syntax Highlight package from which a ton of solutions for this package came.

And, obviously, the biggest thanks to Rich Harris for making something as awesome as Svelte.

License

MIT