appendix F. VS Code

VS Code (https://code.visualstudio.com/) is a popular, open source code editor from Microsoft that is highly customizable. It supports many programming languages and provides syntax highlighting, error detection, and code formatting. It also has great Git integration, which makes it easy to check out a branch, see at a glance the current branch name, see a list of files that have been modified, see side-by-side diffs, commit changes, and push them. If you are not currently using VS Code for your Svelte and Sapper projects, you really should give it a try!

There are currently three popular Svelte-related VS Code extensions:

We will look at how to configure and use each of these. In addition, check out the ESLint and Prettier extensions.

Note For information on installing, configuring, and using VS Code extensions, see the VS Code documentation for “Extension Marketplace” (https://code.visualstudio.com/docs/editor/extension-gallery).

F.1 VS Code settings

Before using VS Code to work on Svelte and Sapper applications, there are a few things that should be configured.

For starters, install the ESlint and Prettier extensions. This enables these tools to automatically run inside VS Code after each code change or after every file save.

Also, modify some VS Code settings. To do this, open the Command Palette and enter “settings” (see figure F.1).

Figure F.1 VS Code Command Palette

Note For information on using the Command Palette in VS Code, see the VS Code documentation (https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette).

Then select Preferences: Open Settings (JSON) and add the following:

"editor.defaultFormatter": "esbenp.prettier-vscode",     ❶
"editor.formatOnSave": true,

❶ This assumes that the Prettier - Code formatter extension has been installed.

Next, consider installing some of the Svelte-specific extensions described in the following sections.

F.2 The Svelte for VS Code extension

The Svelte for VS Code extension is available at http://mng.bz/zrJA. Install it to enable syntax highlighting, code formatting, and intellisense (code completion pop-ups) when editing .svelte files. It also supports the use of Emmet (https://emmet.io/) abbreviations for HTML and CSS.

A major feature of Svelte for VS Code is that it uses the Svelte Language Server at http://mng.bz/0ZYv. This communicates with development tools such as VS Code to provide diagnostic messages, auto-completions (for HTML, CSS, JavaScript, and TypeScript), hover information, code formatting (using Prettier), and more.

Svelte for VS Code also supports using alternative syntaxes in .svelte files such as TypeScript. A preprocessor must be configured for each alternative syntax. See chapter 20 for details on installing and configuring these.

F.3 The Svelte 3 Snippets extension

The Svelte 3 Snippets VS Code extension is available at http://mng.bz/mBQ4. Install it to enable the use of many snippets whose names begin with s- when editing files with an extension of .svelte, .js, or .css. Snippets enable you to enter a small amount of text that is expanded to more text in order to save typing time.

After typing at least s- a snippet can be selected from a popup list. Continue typing to narrow the list. To select a snippet, click it or use the up and down arrow keys to navigate to it, and press the Return key.

For example, selecting the s-if-else-block snippet adds the following:

{#if condition}
   <!-- content here -->
{:else}
   <!-- else content here -->
{/if}

The cursor will be positioned on condition. Enter a condition to replace this. Press the Tab key to advance to the comment in the if block and enter content to replace it. Press the Tab key again to advance to the comment in the else block and enter content to replace it. The other snippets work similarly.

Table F.1 summarizes some of the most useful snippets provided by this extension. A nice feature is that all you need to remember is to type s-. After that, you can read the list of available snippets in the popup list and select one.

Table F.1 Useful snippets

Snippet

Description

s-await-short-block

Adds an {#await} block with no :then or :catch sections

s-await-then-block

Adds an {#await} block with a :then section

s-await-catch-block

Adds an {#await} block with :then and :catch sections

s-each-block

Adds an {#each} block

s-each-key-block

Adds an {#each} block with a key

s-each-index-block

Adds an {#each} block with an index

s-each-index-key-block

Adds an {#each} block with an index and a key

s-if-block

Adds an {#if} block

s-if-else-block

Adds an {#if} block with an {:else} section

s-on-event

Adds on: event handling to an HTML element that refers to a function

s-on-event-inline

Adds on: event handling to an HTML element using an inline arrow function

s-script

Adds a script element

s-script-context

Adds a script element with context="module"

s-style

Adds a style element

A complete list of the supported snippets can be found on the vscode-svelte-snippets GitHub page (https://github.com/fivethree-team/vscode-svelte-snippets).

F.4 The Svelte Intellisense extension

The Svelte Intellisense VS Code extension is available at http://mng.bz/5a0a. Install it to enable the following capabilities when editing .svelte files.

Completion for many Svelte-specific directives is supplied. This includes the bind, class, in, out, transition, and use directives. For example, after entering <div bind:, the options clientHeight, clientWidth, offsetHeight, offsetWidth, and this are offered.

Completion for block structures is also provided. After typing {#, the options if, each, and await are offered. Selecting one of these inserts a snippet for completing the block structure. However, the final } character on the last line of the snippet is currently omitted (see the issue at https://github.com/ArdenIvanov/svelte-intellisense/ issues/24).