30歳からのプログラミング

30歳無職から独学でプログラミングを開始した人間の記録。

Deno でも Visual Studio Code の支援を受けられるようにする

最近 Deno を触り始めた。

エディタには Visual Studio Code を使っているのだが、現状では、通常の TypeScript での開発のような「ゼロコンフィグで様々な支援を受けることができる」という状態にはなっていない。
Deno での構文がエラーになるし、インテリセンスも効かない。
これでは不便だし、TypeScript を使うメリットが半減してしまうので、対策を調べた。

Visual Studio Code (以下、VSCode)のバージョンは1.46.0、Deno のバージョンは1.1.0で、動作確認している。

まずサンプルとして、以下の内容のserver.tsを用意する。
そして$ deno run --allow-net server.tsを実行すると、サーバが立ち上がる。また、Deno のバージョン情報がターミナルに表示される。

import { listenAndServe } from "https://deno.land/std/http/server.ts";

listenAndServe({ port: 8080 }, (req) => {
  if (req.method === "GET") {
    switch (req.url) {
      case "/":
        req.respond({
          status: 200,
          headers: new Headers({
            "content-type": "text/plain",
          }),
          body: "Hello Deno.",
        });
        break;
      default:
        req.respond({
          status: 404,
          headers: new Headers({
            "content-type": "text/plain",
          }),
          body: "Not found",
        });
        break;
    }
  }
});

console.log("Server running on localhost:8080");

console.log(Deno.version);

このコードの内容については、本記事の主題ではないので詳しくは触れない。
問題は、1 行目のコード。

import { listenAndServe } from "https://deno.land/std/http/server.ts";

パスとして URL を指定しており、これが Deno の特徴のひとつなのだが、通常の TypeScript ではこのような書き方はしないため、VSCode がエラーを出してしまっている。

f:id:numb_86:20200619142543p:plain

そして、末尾のconsole.log(Deno.version);でもエラーが出ている。

f:id:numb_86:20200619142556p:plain

TypeScript にDenoというオブジェクトは存在しないので、当然ではある。
だが Deno で実行する場合はDenoは存在するので、Deno のプロジェクトにおいてはこのエラーは出て欲しくない。
何より、インテリセンスが機能しないが厳しい。

f:id:numb_86:20200619142640g:plain

これらのエラーを消すために、まず、以下の拡張機能をインストールして有効にする。

marketplace.visualstudio.com

次に、$ yarn add -D typescript-deno-plugin typescriptで必要なパッケージをインストールする。

これで、ファイルを開き直すとエラーが消えている。

f:id:numb_86:20200619142616p:plain

インテリセンスも機能している。

f:id:numb_86:20200619142659g:plain

node_modulesさえあれば問題ないようなので、package.jsonyarn.lockは削除してしまう。

ちなみに、node_modulesに入っているtypescriptと Deno が使う TypeScript は別物であり、Deno を実行した時はあくまでも Deno が搭載している TypeScript を使用する。
そのため、$ yarn addで入れた TypeScript のバージョンによって実行結果が変わってしまう、ということはない。

これで、Deno でも VSCode の支援を受けながら開発できるようになった。

Deno で使う訳ではない npm パッケージ(typescript-deno-plugintypescript)をインストールしなければならないのは不格好で不便だが、Deno はまだ新しい言語であり、仕方ないのかもしれない。