はじめに
皆様普段エディタは何をお使いになっているでしょうか。
私は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は配布されているのですが、コンテナ作成時にエラーになったので自作しました。
追加のボリュームが必要な場合は面倒ですが、コンテナ作り直しです…
そのうち作った拡張機能の紹介ができればと。
拡張機能の作り方自体はたくさん記事があるので割愛します。
参考になれば幸いです。