Blogpost

Published: 2020-06-06 - Updated: 2020-11-18

Setting up deno.land using Visual Studio Code

Abstract

This blogpost shows you how to get started with deno (A secure runtime for JavaScript and TypeScript) using Visual Studio Code. I will show you how to configure VS code in order to leverage code-autocompletion and allow debugging. Furthermore I will explain how to import libs from npm and github, and how to organize your deno project in general.

First of all install deno and VS Code.

I will use deno with TypeScript, if you already know JavaScript you can have a quick intro to TS here.

Now let´s go ahead by configuring our VS Code environment.

Deno logo

Table of contents

VS Code

Getting started

  • Install the denoland extension. The extension will fix the error that arises when trying to make imports from URLs.
  • Adding the "Deno"-TS-definitions:
    • in your main project directory create an empty file named "tsconfig.json"
    • run deno types > lib/deno_runtime.d.ts
    • now VS Code will recognize commands as "Deno.test()"
    • source

Debug configs

This is the configuration object that goes to the folder within your projects "mainFolder/.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug current file",
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceFolder}",
            "runtimeExecutable": "deno",
            "runtimeArgs": ["run", "--inspect-brk", "-A", "${file}"],
            "outputCapture": "std",
            "port": 9229
        },
        {
            "name": "Debug current test file",
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceFolder}",
            "runtimeExecutable": "deno",
            "runtimeArgs": ["test", "--inspect-brk", "-A", "${file}"],
            "outputCapture": "std",
            "port": 9229
        }
    ]
}

The first configuration allows you to debug the current file opened in VS Code. The second one allows you to debug deno tests.

.gitignore

Create a ".gitignore" file at your projects main folder with the following content.

.vscode

Project structure

I like to organize my projects in modules (directories) that describe the purpose of their content.

The structure of my project:

  • "aerodactylus" - the routing system and http server wrapper
  • "config" - the module handling the configuration of our application
  • "tests" - a folder containing tests
  • "server.ts" - the starting point of our application
  • "deps.ts" - a file for managing external dependencies

The project directory furthermore contains a folder "lib" and a "tsconfig.json" that were created in the getting started section.

Run deno - server.ts

Deno automatically transpiles your TS files. So in order to run your application it's enough to run deno run ./server.ts or any other file you want. You won’t need an additional building tool.

server.ts content:

console.log('hi')

Managing external dependencies - deps.ts

Since deno allows you to directly add dependencies by specifying a URL you have to pull them in before VS Code can recognize its declarations. In order to achieve this, it comes in handy to create a single file ("deps.ts") that contains all dependencies. This way you only have to run deno cache --lock=lock.json --lock-write ./deps.ts from your project directory when you add a new dependency. Otherwise you would have to run this command for every file you add an external dependency.

By using the "--lock" arguments you add integrity checking to your dependencies. On another machine you can then execute deno cache -r --lock=lock.json ./deps.ts to have additional integrity checking of your dependencies.

How to import a specific version of a resource: deno manual

Import git package

!As of 18. Nov 2020 this doesn't seem to work any longer!

Suppose you want to include the library "marked" from github. For success you need to compose the import URL the following way: "https://deno.land/x/gh:markedjs:marked@v1.1.0/lib/marked.esm.js"

How to:

Note: for some libraries you have to omit the "v" before the version specification.

In your deps.ts:

import _marked from 'https://deno.land/x/gh:markedjs:marked@v1.1.0/lib/marked.esm.js';

export const marked = _marked;

Hint: You can also put "https://deno.land/x/gh:markedjs:marked@v1.1.0" in your browser address field and navigate from there to the file you need. This can simplify the process.

Import npm package

For npm use the following format "https://deno.land/x/npm:lodash@v4.17.15/clone.js"

Deno libs

You can find more docu and a list of deno packages here: https://deno.land/x

Deno permissions

If you want to allow deno to access certain resources of your OS you have to allow it explicitly when launching deno.

deno run --allow-read ./server.ts for example allows your application to access the file system. See a full list of permissions.

Run deno tests

Keep your test files in the "tests" folder. This way you can execute them by running deno --allow-read ./tests. Also for your tests you need to specify all the permissions ("--allow-read" in the case of the example) to run them successfully.

Within your "tests" folder you should have the same directory structure as you have within your main directory. Each file you test should have the same name as in its original directory with the suffix "_test" attached to its name. If you have a file "./fs/read.ts" the test file should be stored at "./tests/fs/read_test.ts". This helps you organize your tests consistently. The suffix “_test” is necessary to tell deno that this is a test file.

Example content of a test file:

Deno.test({
  name: "fs read test",
  fn() {
    // your test functionality here
  },
});

Now you should be able to have a smooth start with deno and VS Code. This is it, happy coding.

Discussion

https://www.reddit.com/r/programming/comments/ha8qa2/setting_up_denoland_using_visual_studio_code/

Links

Sources

Tags

#deno #tutorial #setup #vs_code #javascript