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
レンダリング画面は以下のようになります。縦長なので閉じました
プレビュー結果
まとめ
AsciiDocの執筆環境をVisual Studio Codeを使ってお手軽構築できました。
良かったら使っていただいて、改良してもらえると嬉しいです