【2021年4月19日追記】
この記事を書いた後、さらに便利な方法で開発環境を構築することが出来るようになったので、新しく2021.4月版として記事を書きました。新しい記事の方をご覧ください。

この記事は、「囲みマス育成会」のために書かれた記事ですが、Denoの開発環境をVSCodeで作りたい方全体を対象をしております。
さいごに囲みマスの説明を少しだけさせてくださいm(__)m

はじめに

今回の内容は、2021年1月4日時点での方法です。
Denoは発展途上のランタイムなので、より良い方法があるよというときにはコメントにてお知らせしていただけると嬉しいです。
また、VSCode、Denoはインストール済みという前提で話を進めていきますので、まだインストールしていない方は先に済ませておくことをお勧めします。

1．Deno拡張機能のインストール

VSCodeにはありがたいことに、既にDenoの拡張機能が用意されています。
Deno - Visual Studio Marketplace

Installを押してインストールしましょう。

2．Deno拡張機能を有効化

Deno拡張機能を使うためには有効化する必要があります。VSCode全体で有効化することもできますが今回は作業フォルダ内でのみDeno拡張機能を有効化します。

①左下の設定アイコンから「設定／Settings」をクリック（またはショートカットキーCtrl+,）。

②下の画像の赤線部分をクリックしてWorkspaceの設定画面に変更。

③上の検索窓から「Deno」と検索。すると、「Deno: Enable」という項目があると思うので、チェックを入れる。

3．デバッグ設定ファイルの作成

プログラムを途中で止めて確認をすることができるようにデバッグ設定ファイルを作っていきます。
既に、「.vscode」というフォルダが作られていると思うので、その中に以下に示すデバッグ環境用のファイル「launch.json」を作ってください。

launch.json

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

4．プログラム実行

以上の手順でVSCodeの設定は終わりです。

試しにtest.tsを作成して、Deno.と入力してみてください。Deno拡張機能が有効化されていれば下のように補間の関数などがたくさん出てくると思います。

次は、サンプルコードを動かしてみましょう。test.tsの中身を全部消して、次のプログラムを書き込んでください。

test.ts

import { serve } from "https://deno.land/std@0.83.0/http/server.ts";
const s = serve({ port: 8880 });
console.log("http://localhost:8880/");
for await (const req of s) {
  req.respond({ body: "Hello World\n" });
}

恐らく初めは１行目のリンクのところに波線が引かれていると思います。

これは1度実行すると消えると思うので、さっそく実行していきます。F5キーを押すと実行できます。

デバッグコンソールに「http://localhost:8880」と出力されたら、そのアドレスにブラウザからアクセスしてみましょう。「Hello World」と表示されれば設定完了です！

「囲みマス」について

この記事は、「囲みマス」の育成会用に書かれた記事です。「囲みマス」とは、コロナウイルスの影響で中止になった高専プロコン2020競技部門を勝手に開催する会として発足したプロジェクトです。
この「囲みマス」ゲームシステム部分もDenoで書かれており、Githubにてソースコードが公開されています。

もし育成会以外でこの記事をご覧になられた方で、「囲みマス」に興味を持たれた方は、大会等も行う予定ですので是非ご参加ください！

Kakomimasu - Github
囲みマス Twitter

余談

DenoをVSCode全体で有効化しない理由

Not recommended in global configuration
"グローバル設定では推奨されません"

となっています。DenoはJavascript／Typescriptランタイムなので、グローバルで有効化してしまうと普通にJavascriptを書きたいときなどにもDeno拡張機能が働いてしまいます。なので、workspaceまたはフォルダ単位で有効化することをお勧めします。

Deno拡張機能について

今回使用した拡張機能は公式でサポートされており、次のGithubリポジトリにて管理されているようです。なので今後も安心して使っていけそうです。
denoland/vscode_deno

ちなみに、VSCode Marketplaceで「Deno」と検索すると、いくつか出てきますが、製作者が「denoland」でないもののほとんどは公式版が出る前に制作されたものです。

現在の公式版はjustjavacさんとaxetroyさんの拡張機能（現在はDeprecated、非推奨となっています）にインスパイアされたものだそうです。

This project was inspired by justjavac/vscode-deno and axetroy/vscode-deno. Thanks for their contributions.¹

また、同じく公式の「denoland」が出しているDeno(Canary)は、Deno1.6から搭載されたLanguage Serverに対応した拡張機能でまだ開発中のものです。今回説明した方法と同じような形で使用できます。興味のある方は使用してみてください。

https://github.com/denoland/vscode_deno#thanks ↩

Denoの開発環境をVSCodeで作る