How to Setup VS Code, and Webstorm For Deno Development

Deno Logo

Are you ready to dive into the world of Deno development? Setting up your development environment is the first step towards building powerful applications with Deno.

In this article, we will guide you through the process of setting up VS Code and Webstorm for Deno development.

What is Deno?

If you don't know what Deno is. Deno is a runtime for JavaScript and TypeScript that is built on the same technology as Google’s V8 JavaScript engine. It was created by Ryan Dahl, the original creator of Node.js, with the goal of providing a more secure and modular runtime environment for JavaScript and TypeScript applications.

VS Code

VS Code, or Visual Studio Code, is a popular choice among developers for building applications in various languages. It is a lightweight, cross-platform code editor that is free and open-source, and it comes with a rich ecosystem of extensions and tools that make it easy to customize and extend.

In order to make VS Code compatible with Deno, you need to follow these steps:

1. Install Deno Extension

Click the extensions tab on the right side, and search for denoland.vscode-deno.

Deno Extension in VS Code

Note: I assume that you already have a Deno CLI installed on your Computer. If you don’t have it, you can check this article from Deno to install Deno.

2. Use The Extension

After installing the extension, we now have features for Deno in VS Code. One of the features that we’re going to use is to Initialize Workspace.

To do that, open VS Code Command Panel, by using:

// In Windows
CTRL + Shift + P

// Mac
Command + Shift + P

then search for Deno initialize workspace, VS Code will give you some autocomplete, and you can click the first item on the list.

Initialize Deno Workspace Command

The extension will ask you for some configuration for Deno, and I suggest you activate all the configuration features.

Deno Linting

Deno Unstable API

You’re done here…

You can see all the extension configurations by using the extension as well. Open the command panel again, search for Deno: Language Server Status, and choose the first item of the list.

WebStorm by JetBrains

WebStorm is an integrated development environment for JavaScript and related technologies.

One of the JavaScript environments is Deno, right? So we can actually use this IDE to develop great Deno projects.

Before we start everything, I assume you already installed WebStorm.

1. Install Deno Plugin

To install Deno Plugin in WebStorm (Actually, all JetBrains Products), open WebStorm settings. The shortcut is CTRL + Alt + S.

Settings Menu in WebStorm

and then click on Plugins tab on the left side, and search for Deno.

Plugins in WebStorm

After that, go to Languages & Frameworks, and Click on Deno.

Languages & Frameworks in WebStorm

Then, click the checkbox to enable the extension for the current project.

Enable Deno Plugin for the Current Project in WebStorm

then click OK.

2. Give it A Shoot

Create a new TypeScript file called main.ts in the root of the project, and paste these simple HTTP Server codes:

import { serve } from 'https://deno.land/std@0.167.0/http/mod.ts';

serve((_) => new Response("Hello, World"));

You can run this file by clicking the Start icon.

For these codes, Deno will ask permission to access the network on your machine, you can manually type y, to grant access.

Deno Asking Permission for Security Purposes

You can grant access automatically when you run Deno by clicking the Start icon.

To do that, click There Dots, and click on Run with Parameters.

Configure Run Command for main.ts file

Pop Up for the configuration will show.

Run Command Configurations

Here, you can modify the run command. Add allow-net flag, to grant access to the network.

After that click Apply and try to run the file again by clicking the Start icon button.

HTTP Server is Running

As you can see, Deno won’t ask you for permission for the network anymore, since you already grant access to this permission on the run command.

Bonus Tips:

If you want to generate a Deno project, you can use the deno CLI subcommand.

To do so, open up your terminal, and type:

deno init <project-name>

To generate the project on the current folder, you can type:

deno init

That’s It

That’s how you can configure your favorite IDE to work with Deno🦕. Hope you find it useful and as always ‘Happy Coding, folks’.

Follow Me

Twitter: https://twitter.com/novqigarrix

GitHub: https://github.com/NovqiGarrix

Medium: https://medium.com/@novqigarrix