Visual Studio Codeのリモートコンテナ機能を使ってDenoのFreshフレームワークを開発する環境を用意する方法です。
Visual Studio CodeもDenoも何もわからない状態で、準備してたら詰まったので備忘録として残しておきます。
事前手順
- Visual Studio Codeをインストール
- Remote - Containersプラグインをインストール
手順
- 開発環境にするフォルダを用意
- フォルダ名は何でもいいと思いますが、今回は
fresh-devとしました。
- フォルダ名は何でもいいと思いますが、今回は
- Visual Studio Codeで
Cmd + Shift + pを入力してコマンドパレットを開く Remote-Containers: Open Folders in Container...を選択して、先ほど作成したフォルダを選択Show All Definitions...を選択denoと入力すると、Denoが選択肢に出てくるので、選択- 大体デフォルトのOSで良いと思うので、
bullseye (default)を選択 - しばらく待つと、開発用Dockerコンテナが作成される
- Visual Studio Code内でターミナルを開く(Ctrl + Shift + `)
ターミナルで下記コマンドを実行する
$ deno run -A -r https://fresh.deno.dev ./ --force --twind --vscode.vscode/settings.jsonに"deno.importMap": "./import_map.json",を追記- 一部のimportがエラーになるので、
Cmd + Shift + pを入力してコマンドパレットを開き、Deno: Cache Dependenciesを実行する Visual Studio Codeのターミナルで下記コマンドを実行する
$ deno task start- http://localhost:8000/ でプレビューが表示できる
補足
Freshのinitコマンドのオプションの意味
--force
既存のファイルがあっても、上書きします。
上書きするのは、テンプレートと同名のファイルがあったときのみなので、 .devcontainer フォルダ等が消されたりはしないです。
--twind
Twind CSSによるスタイリングを利用したテンプレートを生成します。
--vscode
Visual Studio Code向けの設定ファイル ( .vscode/settings.json など)を生成します。