# Denoの開発環境をVSCodeで作る
###### tags: `解説資料`

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

## 1．Deno拡張機能のインストール
VSCodeにはありがたいことに、既にDenoの拡張機能が用意されています。
[Deno - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=denoland.vscode-deno)

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

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

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

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

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

## 3．デバッグ設定ファイルの作成
プログラムを途中で止めて確認をすることができるようにデバッグ設定ファイルを作っていきます。
既に、「.vscode」というフォルダが作られていると思うので、その中に以下に示すデバッグ環境用のファイル「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`の中身を全部消して、次のプログラムを書き込んでください。

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](http://localhost:8880)」と出力されたら、そのアドレスにブラウザからアクセスしてみましょう。「Hello World」と表示されれば設定完了です！