VS Code ExtensionをDockerコンテナの中で開発したい

自分でsyntax highlighterを作りたいなと思って環境構築をしています。

基本的にはnodeとyaomenが必要です。ということでいつものようにRemote Containersの機能を使って環境を作ります。

FROM node
RUN npm install -g yo generator-code

RUNしている内容は、以下に従ってのことです。

code.visualstudio.com

しかし、そのままコンテナ内でyo codeすると、失敗します。

Error: EACCES: permission denied, open '/root/.config/configstore/insight-yo.json'

どうやら、rootでそんなことをしちゃいけないようです（まあ、そうですかね）。というわけで、コンテナ内でadduserする、つまり一般ユーザを新しく作ってやってみたんですが、そうするとVS Code内のファイルエクスプローラには何も出てこないです。あくまで、root以下のファイル構造が出てくるだけ。だから最初から一般ユーザでコンテナにログインする必要があります。素のDockerなら、docker exec -uでやればいいんですが、Remote Containersではどうすればいいんでしょう。

と思って調べたら、なるほどありました。すごいなVS Code。というかRemote Containersは公式のextensionなので、ドキュメントちゃんとしているな。いや、MicrosoftはWindowsのドキュメントをもうちょっとがんばってくれ（突然の愚痴）。

code.visualstudio.com

それによると、このextensionの設定ファイルであるdevcontainers.jsonに設定を追加する必要があるようです。具体的にはremoteUserという設定項目にログインしたいユーザを設定してください。ちなみに、ユーザを勝手に作ってくれるわけではないですよ。それはDockerfileの中で自分で勝手に作ってくださいね。

{
    // Uncomment to connect as a non-root user if you've added one. See https://aka.ms/vscode-remote/containers/non-root.
    "remoteUser": "ext"
}

Dockerfileは以下。ユーザつくってます。

FROM node
ARG UID=501
RUN adduser -m -u ${UID} ext
USER ${UID}
RUN npm install -g yo generator-code

これでようやく、コンテナ内でyo codeが通るようになり、その内容がVS Code内に表示されるようになりました。これから開発ですね。