Visual Studio CodeのRemote Containerを使ってAsciidocの環境を作りました。

以前AsciiDoc+ブラウザ自動更新環境のDockerイメージを作った - Qiita という記事を書いたのですが、
この記事ではAsciiDocのプレビュー環境をdockerを使って構築していました。
この方法では、docker-composeで環境を起動してあとは自分でVisual Studio Codeの環境を作ってね、という形でちょっと面倒な状態でした

ただ、今はVisual Studio Code のRemote Container機能があり、これを使えばプロジェクトの構成から一発で作れるだろうということで作ってみました。
(ベースとなるコンテナがAlpine LinuxだったのでVisual Studio Code August 2019の更新でのサポート待ち状態でした)

使っているDockerイメージなどはAsciiDoc+ブラウザ自動更新環境のDockerイメージを作った - Qiitaと変わっていませんので、詳細気になる方はこっちを参照ください。

環境

Visual Studio Codeは1.38以上が必須です

$ code --version
1.38.1
b37e54c98e1a74ba89e03073e5a3761284e3ffb0
x64

Remote - Containers - Visual Studio Marketplace の拡張機能も必要です。

使い方

手順概要

プロジェクトをcloneする
Visual Studio Codeで開く
Remote Containerで開く
index.adocを編集する
ブラウザで http://localhost:18080/index.html を開く

以上です

これで、index.adocを変更すればブラウザが自動で更新される環境のできあがりです。
次から詳細について

プロジェクトをcloneしてVisual Studio Codeで開く

プロジェクトのテンプレートはgithubにあげているのでcloneで取得してください。

$ git clone https://github.com/dbgso/vscode-asciidoc-container.git
$ code vscode-asciidoc-container

Remote Containerで開く

コマンドパレットでRemote-Containers: Reopen Folder in Containerコマンドを実行

あるいは以下のダイアログでReopen in Containerを選択する

index.adocを編集する

サンプルとなるファイルを置いているので、これをベースに編集してもらえれば良いです。

ブラウザで `http://localhost:18080/index.html` を開く

index.adocが変更されると自動でindex.htmlが生成されます。
http://localhost:18080/index.htmlを開いておけばこの変更が自動で反映されます。
ポート18080を変えたい場合はdocker-compose.ymlを適宜変更してください。

表示結果

以下のようなサンプルコードがプロジェクトに最初から置いてありますので、適当に編集するなりしてください

vscode-asciidoc-container/index.adoc at master · dbgso/vscode-asciidoc-container

レンダリング画面は以下のようになります。縦長なので閉じました

プレビュー結果

![sample_adoc.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330514/4c6b06c9-6d66-c70f-2195-c143be6ad414.jpeg)

まとめ

AsciiDocの執筆環境をVisual Studio Codeを使ってお手軽構築できました。
良かったら使っていただいて、改良してもらえると嬉しいです