Snippets
Snippets are pre-written code blocks you get for free to help shortcut some of the most common boilerplate.
You can use a snippet by starting to type its prefix in a file and then hitting tab to complete it. For example…
The tables below include the prefix you’d type, the file type (or part of a Svelte component) the snippet applies to and a quick description of what code you’ll get from the snippets included in the kit:
Style snippets
| Prefix | Type | Description |
|---|---|---|
scss |
.svelte |
Insert an SCSS style tag with optional imports for Reuters Graphics partials |
Svelte/JS snippets
| Prefix | Type | Description |
|---|---|---|
statics |
.svelte |
Import Svelte’s assets store for prefixing paths to static files like images |
load-module |
.svelte |
Insert a module script tag for loading data in a SvelteKit page component |
env |
.svelte |
Import $app/env SvelteKit stores that tell you what environment (dev, browser, etc.) your code is running in |
paths |
.svelte |
Import $app/paths SvelteKit stores that give you paths to prefix URLs with |
d3-chart-class |
.svelte .js |
Insert our standard Reuters Graphics D3 chart class |
d3-data-join |
.svelte .js |
Insert an example of using D3’s data join syntax |