はじめに

皆様普段エディタは何をお使いになっているでしょうか。
私はVSCodeを愛用しております。
何といっても拡張機能の豊富さが素敵です。

また拡張機能が作れることも良さの一つです。
自分が欲しい機能を持った拡張機能もないこともあるので、
プログラマらしく無いなら作ってしまえの精神です。

まず開発環境が必要なので、
今回はDockerを使って環境を用意する手順を記載します。

環境構築

Dockerは入っている前提です。
筆者はWindows環境ですが、MacでもLinuxでも変わらないかと。
ボリュームをマウントする際の書き方が少し違うくらいです。

Dockerfileは以下。というか必要なのはこれだけ。

FROM node:17-slim

# パッケージインストール
RUN apt-get update -qq \
    && apt-get install -y -git

# ユーザー設定
ARG USER="node"
USER $USER

# ワークスペース設定
WORKDIR /workspace

ENV NPM_CONFIG_PREFIX=/home/$USER/.npm-global
ENV PATH="/home/${USER}/.npm-global:${PATH}"

# エイリアス設定
RUN echo "alias ll='ls -al'" >> /home/$USER/.bashrc

# ライブラリインストール
RUN npm install -g npm \
    && npm install -g vsce generator-code yo

ビルドしてコンテナ作成。

> docker build -t vscode_extention_base --no-cache .
> docker run --name vscode_extention_base -v %cd%:/workspace -t vscode_extention_base /bin/bash

新規プロジェクトが作れるか確認。

$ npx yo code
? ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== (Y/n)n

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? test_extension
? What's the identifier of your extension? test_extension
? What's the description of your extension? for test
? Initialize a git repository? No
? Bundle the source code with webpack? No
? Which package manager to use? yarn

エラーが出なければOK。
あとはWORKDIR内で好きなだけ拡張機能を作る。

追加のパッケージが必要な場合、rootユーザーでコンテナにアタッチしてaptでインストールできます。

> docker exec -u 0 -it vscode_extention_base /bin/bash

ポイント紹介

ユーザーは一般ユーザーで

rootユーザーではPermissionの兼ね合いで「npx yo code」を実行時にエラーになってしまうため。

パッケージインストール以降、rootユーザーではなく一般ユーザーに切り替えています。
node:17-slimにはnodeユーザーが既にいるので切り替えだけ。

npmのパッケージはグローバルでインストール

拡張機能作成に必要なNodeのパッケージ

vsce
generator-code
yo

は-gオプションをつけてグローバルにインストールしています。
nodeユーザーでの操作になるので、Permissionエラーにならないように、
nodeユーザーのホームディレクトリ配下の「.npm-global」ディレクトリにインストールするようにしています。

WORKDIRにインストールするとボリュームをマウントした際に消えてしまうため。
entrypointでもインストールできるが、環境として完成させておきたいので、この形にしました。

おまけ：エイリアス設定

alias ll='ls -al

は必須。

まとめ

公式からもDockerfileは配布されているのですが、コンテナ作成時にエラーになったので自作しました。
追加のボリュームが必要な場合は面倒ですが、コンテナ作り直しです...

そのうち作った拡張機能の紹介ができればと。
拡張機能の作り方自体はたくさん記事があるので割愛します。

参考になれば幸いです。