Visual Studio Code, also commonly referred to as VS Code, is undoubtedly one of the most popular Integrated Development Environments (IDEs) because it is highly extensible and has over 35,000 extensions in the marketplace to supercharge it.

In this article, I will share a curated list of the top 10 VS Code extensions for SvelteKit and Svelte developers that will improve your productivity and make you more efficient.

The extensions are going to be based on two categories – visual and functional extensions. Visual extensions are an aesthetic upgrade to the IDE in terms of colors, themes, fonts, and formats. Functional extensions on the other hand add more superpower to the IDE making it perform tasks more efficiently and faster.

You can also read:

Top 10 Best VS Code Extensions for Svelte Developers
Next.js Full-Stack App with React Q...
Next.js Full-Stack App with React Query, and GraphQL-CodeGen

1. Svelte for VS Code

Svelte for VS Code

By default, Svelte components or code in VS Code have no syntax highlighting or IntelliSense. When you open a Svelte code without the Svelte for VS Code extension installed, you should see something like this which isn’t pretty.

svelte file without theme formatting

VS Code will automatically detect the Svelte code and show a popup asking you to install the recommended extensions.

vs code popup to install the recommended svelte extensions

When you click on the install button, VS Code will go ahead and install the Svelte for VS Code extension. With the Svelte for VS Code extension enabled, you should get beautiful syntax highlighting, code formatting via prettier-plugin-svelte, autocompletion, CSS Color highlighting, error checking, hover info, and many more features.

The extension also comes bundled with a TypeScript plugin, which VS Code will automatically show a popup asking you to enable it after the Svelte extension has been installed.

vs code popup to enable typescript support with svelte

Once you enable the TypeScript plugin, you will get great IntelliSense within JavaScript and TypeScript files for interacting with Svelte files.

2. Svelte Intellisense

Svelte Intellisense

Despite the official Svelte extension for VS Code having some IntelliSense backed into it, the Svelte Intellisense extension takes IntelliSense to the next level. This extension provides IntelliSense for data, events, slots, bind, import statements, and many more in Svelte components.

By default, the extension supports the go-to definition VSCode feature that allows you to quickly navigate between components and references.

You can also hover over a component in the template markup, import statement, and components section to see its documentation.

Visit the Svelte Intellisense extension page in the VS Code extension marketplace to see a visual demonstration of all the features the extension provides.

3. Svelte 3 Snippets

Svelte 3 Snippets

One of the things most Svelte developers struggle with is the basic syntax. Therefore, the Svelte 3 Snippets extension was developed to provide snippets for common patterns in Svelte and SvelteKit. These snippets are based on or follow the official Svelte documentation.

All the snippets are prefixed with “s-” for simplicity and scoped for their appropriate placement in the Svelte files.

For example, let’s say I forgot the syntax for an if/else statement, I can type “s-if” and IntelliSense will kick in to show all the snippets that match the symbol.

Svelte 3 Snippets in action for if else statements

You can use the up/down arrow keys to navigate through the options and click on the snippet you want to generate.

generated snippets

This is a no-brainer extension because it comes with a lot of snippets to speed up your development workflow and save you a lot of time when working with Svelte and SvelteKit. Visit the extension page in the VS Code marketplace to see all the available snippet shortcuts.

4. Tailwind CSS IntelliSense

Tailwind CSS IntelliSense

Tailwind CSS is a framework packed with utility classes which makes it really easy to build stylish websites quickly. There is no doubt that tailwind CSS helps you write CSS very quickly but at some point in your development journey, you may forget some of the utility classes.

For these reasons, the Tailwind Labs team developed and released an official plugin that adds autocomplete, syntax highlighting and linting to your VSCode environment, and it only takes a few clicks to be installed.

The Autocomplete feature uses intelligent suggestions to help you apply appropriate utility class names to your markup easily. This eliminates the guesswork we usually do when we forget a particular utility class and also at a glance we can see relevant information about any utility class.

5. Better Comments

better comments

Better Comments gives developers the ability to write human-friendly comments by helping them annotate and document code more efficiently using customizable tagging systems.

After installing the Better Comments extension, press CTRL + SHIFT + P to open the VS Code palette, type “open settings” and click on “Open User Settings(JSON)” option.

open user settings json file

Next, type “Better” and IntelliSense will kick in to show some better comments-related options. Go ahead and click on the “better-comments.tags” option to see all the default settings and the tag annotations that come out of the box with Better Comments.

click on better comments tags

You should see a couple of annotation tags like alert, error, warning, question, strikethrough, catch-all, and TODO.

Each of the tags can be customized to meet your preference or you can add your own tag like a bug tag.


{
      "tag": "bug",
      "color": "#0703fa",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    }

After adding your custom annotation tag, reload VS Code for the changes to take effect.

6. GitLens — Git supercharged

GitLens — Git supercharged

By default, VSCode has built-in Git tools for basic version control operations like adding your source code to the staging environment, committing the changes, pushing the source code to a remote repository, and even creating/changing branches. However, to supercharge VS Code to perform any kind of stuff that can be done with Git, you need to install the GitLens — Git supercharged extension.

To make the extension take effect immediately, reload VS Code by pressing CTRL + SHIFT + P, then type reload and click on the “Developer: Reload Window” option.

After the extension has been activated, wherever you put your cursor there will be an unobtrusive annotation displaying the Git commit author, the commit date, and the Git commit message.

gitlens commit annotation

When you hover over the annotation, you will get a better visualization of all the information about your commit. On the bottom-left of the popup, you will see the commit number.

gitlens commit annotation popup

When you click on the commit number, the Gitlens palette will be displayed where you can reveal the commit in the sidebar, revert, reset, rebase, merge, push the commit to a remote repository, and many more.

gitlens palette with more options

GitLens is a very useful tool that can help you perform various version control operations directly in the editor without opening the terminal.

7. Thunder Client

Thunder Client

Usually, when we build APIs with SvelteKit, we use API testing tools like Postman, Insomnia, and many more to test the endpoints of our API. Those API testing tools are great but the Thunder Client VS Code extension has similar features to help you test your API endpoints or external APIs directly in VS Code.

Thunder Client VS Code extension is comparable to Postman but with a simpler and cleaner design making it perfect for VS Code.

Similar to Postman, the extension also has a GraphQL API Client that can be used to test GraphQL API endpoints.

8. GitHub Copilot

GitHub Copilot

GitHub Copilot is an AI Pair Programmer developed by OpenAI and GitHub. Its purpose is to help developers code faster by suggesting code snippets based on descriptions of the code they write, function names, or comments.

Copilot is no longer free, you have to pay $10 per month or $100 per year.

9. MySQL by Weijan Chen

MySQL by Weijan Chen

The MySQL by Weijan Chen extension is a database management client for VS Code that supports MySQL/MariaDB, MongoDB, PostgreSQL, SQLite, Redis, SQL Server, S3, and more. It also works as an SSH client.

For example, when you are building a SvelteKit API that uses a MongoDB database, you can easily connect and manage the data stored in the database with the MySQL by Weijan Chen extension.

To do that, click on the NoSQL tab on the left sidebar and click on the Create Connection button.

Next, select the server type which in this case is MongoDB, and provide the required credentials. Then, click on the Connect button to connect VS Code to the database server.

connect to mongodb with vs code mysql extension edited

Once the connection has been successfully created, you can access and manage the data directly in the GUI provided by the MySQL extension.

both redis and mongodb connect with mysql vs code extension

10. Docker

docker

The VS Code Docker extension comes with a lot of tools to make the building, managing, debugging, and deployment of containerized applications a breeze in Visual Studio Code.

One interesting feature of this extension is you can easily generate the appropriate Dockerfile and Docker-compose files for your project with just one click.

To generate a Dockerfile, docker-compose.yml, and docker-compose.debug.yml files for your project, press CTRL + SHIFT + P to open the VS Code command palette then type “Docker: Add” and click on the “Docker: Add Docker files to Workspace…” command.

use the vs code docker extension to generate the docker files

Next, select your preferred language from the provided list and fill in the necessary details.

select the language from the command palette

With the required information provided, VS Code will go ahead and pull the latest Docker image of the selected framework or language from the Docker hub.

Now to build the Docker image, right-click the Dockerfile in the files explorer panel and select “Build image“.

There are numerous things you can do with the VS Code Docker extension. For example, the extension comes with a bunch of commands to manage your Docker images and containers directly from the Command Palette without the need to type a single command in the terminal.