VSCode Dev Containers で執筆環境をつくる

ブログ記事の体裁を整えるため、Markdown 文書を校正してくれる textlint というツールを使用しています。ローカルの Node バージョンを上げたことをきっかけとして、執筆環境を Docker へ引越しすることにしました。今回は Dev Containers という VSCode の拡張機能を用いた、セットアップ手順を紹介します。

Dev Containers とは

Dev Containers は Microsoft が提供する VSCode の拡張機能です。環境から VSCode の設定・拡張機能まで Docker コンテナーに盛り込めるため、Docker と VSCode さえあれば誰でも再利用できる環境を構築できます。

執筆環境として以下のようなツール使っているのですが、これらを一纏めにできる Dev Containers はもってこいということです。

Node.js
textlint
VSCode
- 拡張機能
  - textlint
  - Spell Checker
  - その他に Markdown 文書をサポートするもの
- 設定

セットアップ手順

それではセットアップ手順を紹介します。

前提

ローカルに Docker Desktop および VSCode がインストールされている
Docker が起動している (以下のコマンドで確認)

$ docker --version
Docker version 20.10.21, build baeda1f

Dev Containers の設定

はじめに Dev Containers をインストールします。

$ code --install-extension ms-vscode-remote.remote-containers
Installing extensions...
Installing extension 'ms-vscode-remote.remote-containers'...
(node:75923)[DEP0005]DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
(Use `Electron --trace-deprecation ...` to show where the warning was created)
Extension 'ms-vscode-remote.remote-containers' v0.327.0 was successfully installed.

インストールが完了すると、VSCode 上でいくつかの機能が有効になります。コマンドパレットを開いて、ベースとなる設定ファイルを生成します。

"Open Folder in Container..." を選択する
Dockerfile のベースイメージに Node.js を選択する
Node.js のバージョンを選択する
追加機能は選択せずに "OK" で確定する

VSCode が自動的にコンテナー環境で開き直してくれます。少し待つと .devcontainer というフォルダーが生成されるはずです。

Docker / VSCode の設定

前の手順で生成された、ベースとなる設定ファイルを編集していきます。
まずは devcontainer.json に VSCode の設定・拡張機能に関する変更を加えます。

.devcontainer/devcontainer.json

@@ -1,8 +1,24 @@
-// See https://containers.dev/implementors/json_reference/ for configuration reference
 {
-	"name": "Untitled Node.js project",
+	"name": "Technical writing",
 	"build": {
-		"dockerfile": "Dockerfile"
+		"dockerfile": "./Dockerfile"
 	},
-  "remoteUser": "node"
-}
+	"customizations": {
+		"vscode": {
+			"settings": {
+				"editor.formatOnSave": true,
+				"textlint.autoFixOnSave": true,
+				"textlint.run": "onType"
+			},
+			"extensions": [
+				"ms-azuretools.vscode-docker",
+				"taichi.vscode-textlint",
+				"streetsidesoftware.code-spell-checker",
+				"yzhang.markdown-all-in-one",
+				"bierner.markdown-preview-github-styles",
+				"bierner.markdown-emoji"
+			]
+		}
+	},
+	"remoteUser": "node"
+}

続いて、Dockerfile に textlint と関連ツールをインストールするための変更を加えます。

.devcontainer/Dockerfile

@@ -1,12 +1,13 @@
 FROM node:18
 
-# Install basic development tools
 RUN apt update && apt install -y less man-db sudo
 
-# Ensure default `node` user has access to `sudo`
+RUN npm install -g textlint@latest \
+    textlint-rule-preset-ja-technical-writing \
+    textlint-rule-preset-ja-spacing
+
 ARG USERNAME=node
 RUN echo $USERNAME ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/$USERNAME \
     && chmod 0440 /etc/sudoers.d/$USERNAME
 
-# Set `DEVCONTAINER` environment variable to help with orientation
 ENV DEVCONTAINER=true

これで Container がビルドされると、textlint と関連ツールがコンテナー内で使用できる様になります。Dockerfile を変更したので、コンテナをつくり直しましょう。

Dev Containers によって、VSCode から Docker コンテナーを操作できます。Docker に慣れていなくても安心ですね。

ここまでの手順で Node.js と textlint が使える様になっているはずです。

node@db70406a32bf:/workspaces/writing-template$ node --version
v18.19.0
node@db70406a32bf:/workspaces/writing-template$ npx textlint --version
v13.4.1

textlint の設定

仕上げに textlint の設定ファイルを作成して、自分好みのルールを追加してください。

npx textlint --init

私は以下のような設定にしました。

.textlintrc.json

{
  "rules": {
    "preset-ja-technical-writing": {
      "no-exclamation-question-mark": false
    },
    "preset-ja-spacing": {
      "ja-space-around-code": {
        "before": true,
        "after": true
      },
      "ja-no-space-around-parentheses": {
        "before": false,
        "after": false
      },
      "ja-space-between-half-and-full-width": {
        "space": "always",
        "exceptPunctuation": true
      }
    }
  }
}