WebStormでDeno開発の初期設定手順

2020年のjig.jpインターンのメンターをしていましたninja03です。

今年のインターンでは開発に使った言語はDenoでした。
メンバーは主にVisual Studio Code(VSCode)を使いました。

自分は仕事ではJetBrains社のJava用開発環境のInteliJ IDEAを使っています。
そのためDenoの開発には操作方法が近い同社のJavaScript用開発環境のWebStormを使っています。

WebStormは有料で価格は月額680円ですが、30日間の体験版があります。
また学生だと無料ライセンスが取得できるのでそのあとも引き続き使うことができます。
https://blog.jetbrains.com/ja/2019/08/22/2105/

WebStormでも開発をしてみたい方向けに、初期設定方法を解説していきます。

Denoのインストール

まずはVSCodeと同様にDenoをインストールします。

WindowsキーとRキーを同時に押し「ファイル名を指定して実行」を開きます。
powershellと入力してPowerShellを開きます。

Denoのインストールコマンドを入力し実行します。
https://deno.land/manual/getting_started/installation

iwr https://deno.land/x/install/install.ps1 -useb | iex!

WebStormのインストール

下のリンクからWebStormをダウンロードします。
https://www.jetbrains.com/ja-jp/webstorm/
ダウンロードしたインストーラーを起動します。
特に設定せずにNext→Next→Finishでインストールが完了します。

Pleiadesで日本語化

下のリンクからpleiades-win.zipをダウンロードします。
https://mergedoc.osdn.jp/#pleiades.html#PLUGIN
解凍して、setup.exeを起動します。
日本語化するアプリケーション→選択を押します。
C:\Program Files\JetBrains\WebStorm 2020.2.3\webstorm64.exe
を選択します。
日本語化するを押して完了です。

Denoプラグインのインストール

WebStormにDeno開発で使うプラグインをインストールします。
まずWebStormを起動して新規プロジェクト→空のプロジェクト→作成を行います。
メニューバーからファイル→設定→プラグイン→マーケットプレースを開きます。
Denoで検索してインストールをします。

インデントの設定

メンバーとインデント数を合わせる必要がある場合に変更します。
メニューバーからファイル→設定→エディター→コードスタイル→JavaScript→タブとインデントを選びます。
タブサイズ インデント 連続インデントの文字数を変更します。

コンソールの文字化けの解消

WebStormでconsole.log("サーバ起動")のように日本語を出力するとコンソールで文字化けします。
ヘルプ→カスタムVMオプションの編集を開いて以下の文をファイルの最後に追加します。

-Dfile.encoding=UTF-8

その後、WebStormを再起動すれば文字化けしなくなります。

サンプルプログラムの実行

Denoのサーバプログラムを動かしてみます。
メニューバーからファイル→新規作成→JavaScriptファイルを選び、main.jsを作成します。
下のプログラムを入力します。

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

const s = serve({port: 80});
console.log("サーバー起動");
for await (const req of s) {
  const json = {
    msg: "ハローワールド"
  };
  req.respond({
    status: 200,
    headers: new Headers({"content-type": "application/json"}),
    body: JSON.stringify(json)
  });
}

すると、Enable Deno support for this project?
と上に出るのではいを押します。

ソース上で右クリックします。
'Deno: server.js'の編集...を押します。
引数がrunになっているのをrun -Aに変更します。

再度ソース上で右クリックします。
実行 'Deno：server.js'をクリックするとサーバプログラムが起動します。

ブラウザで、http://localhost:8888/を開くと結果を確認することができます。

ソースを書き換えたら右クリックし実行 'Deno：server.js'を押すとプログラムがリロードされます。

#.gitignoreの設定
WebStormが作るファイルをGitのコミットから除外するとコミットしやすくなります。
下の文を.gitignoreファイルに書いておきます。

.idea/*