Configure Deno completions on VSCode

Published in

Tech Tonic

4 min readFeb 3, 2022

Visual Studio Code (VSCode) is a source-code editor made by Microsoft for Windows, Linux and macOS. Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git. Users can change the theme, keyboard shortcuts, preferences, and install extensions that add additional functionality. In the Stack Overflow 2021 Developer Survey, Visual Studio Code was ranked the most popular developer environment tool, with 70% of respondents reporting that they use it.

To increase developer productivity, VSCode marketplace has tons of extensions. Deno also comes with an official VSCode extension that allows:

Type checking for JavaScript and TypeScript, including quick fixes, hover cards, intellisense, and more.
Integrates with the version of the Deno CLI you have installed, ensuring there is alignment between your editor and the Deno CLI
Resolution of modules in line with Deno CLI’s module resolution strategy allows caching of remote modules in Deno CLI’s cache
Integration to Deno CLI’s linting functionality, including inline diagnostics and hover cards
Integration to Deno CLI’s formatting functionality
Allow specifying of import maps and TypeScript configuration files that are used with the Deno CLI
Auto-completion for imports
etc.

In this article, we’ll learn how to install, enable, and use Deno’s VSCode extension for ease of writing Deno applications.

Experience without extension

Before starting, let’s have a quick look at the experience of writing a very simple ‘hello world’ server without Deno’s VSCode extension:

Pre-requisite

Deno CLI (or simply Deno) must be installed on the PC. The official installation instructions are present here. A detailed article on installation of Deno on Windows is present here.

$ deno -V
deno 1.18.1

The Deno’s installation directory must be present in the path environment variable:

$ which deno
/Users/mayankc/.deno/bin/deno$ echo $PATH
<<suppressed>>:/Users/mayankc/.deno/bin:<<suppressed>>

Installation

The first step is to install the extension from VSCode marketplace. Open the extensions tab and search for deno:

Installation of the extension takes a few seconds. After installation, the extension is available but remains un-configured for use.

Enabling extension

The extension gets installed as a global extension, that’s why it remains off by default. To enable it, open the command palette (on Mac, press Cmd + Shift + P), enable linting and unstable APIs.

A message at the bottom is seen if the extension gets enabled successfully for a workspace. Note that we’re not enabling it globally.

Once the extension is enabled, a Deno process will be spawned in background. VSCode communicates with this Deno process using LSP (language server protocol).

That’s all about the configuration part. The extension is ready for use.

Writing Hello world with extension

Now that the extension has been configured for a workspace, let’s go through the experience of writing the same ‘hello world’ application with Deno’s completions.

The Deno completions does ease up the regular coding work. There are import path completions, suggestions for API parameters, etc. Also, there are linter suggestions (the one where it suggested prefixing req with _ as req was an unused parameter).

Further reading: The article to learn how to run and debug Deno applications in VSCode is here.