VSCodeからチケット管理する拡張機能を作ってみる(1)

ネタが無いのでまぁまぁでかくなりそうなものをシリーズにして投稿する作戦です。

今回は、VSCode上からBacklogやJira等のチケット管理システムを操作する拡張機能を作って行こうと思います。

構成

一旦は

• VSCodeExtention
  • Yeoman
  • TypeScript

のみです。
どのチケット管理システムにアクセスするかは次回以降で決めていこうかなと思います。
（Gitlab好きなので最初はGitlabにするかもしれません）

開発環境を作っていく

ChatGPT様に聞いたところ、Yeomanという雛形作成ツールみたいなのを利用すると楽ちんらしいです。
https://yeoman.io/

早速DevcontainerでYeomanが動く環境の構築をしていきます。

devcontainer.json

{
  "name": "ticket-manager-client",
  "dockerComposeFile": [
    "../docker-compose-dev.yml"
  ],
  "service": "ticket-manager-client",
  "workspaceFolder": "/home/appuser/app",
  "remoteUser": "appuser",
  "customizations": {
    "vscode": {
      "extensions": [
        "mhutchie.git-graph",
        "GitHub.copilot",
        "GitHub.copilot-chat",
        "GitHub.copilot-labs"
      ]
    },
    "features": {
      "ghcr.io/devcontainers/features/git:1": {
        "ppa": true,
        "version": "os-provided"
      }
    }
  }
}

docker-compose-dev.yml

version: "3"
services:
  ticket-manager-client:
    container_name: ticket-manager-client
    image: ticket-manager-client
    build:
      context: .
      dockerfile: Dockerfile.dev
    volumes:
      - .:/home/appuser/app
    environment:
      TZ: Asia/Tokyo
    env_file:
      - .env
    tty: true

Dockerfile.dev

FROM node:21.4-alpine3.18

RUN adduser -D appuser
USER appuser
WORKDIR /home/appuser/app

RUN yarn global add yo generator-code

こんなかんじです。
adduserしている理由としては、どうやらYeomanはDockerそのままのrootユーザーでは動いてくれないようで、新規にユーザーを作成してそのユーザーのホームディレクトリをWORKDIRに指定する必要があったためです。
（この解決に結構時間を要した…）

Yeomanでひな形を作成する

上記Devcontainerを起動し、ターミナルで以下のコマンドを打ちます

npx yo code

するとプロジェクト名とかいろいろ聞かれるので、適当に設定すると以下の画像のように雛形が作成されます。

.vscodeフォルダ内まで作ってくれているのがポイントで、このおかげでデバッグボタンをポチっとするだけで新しいVSCodeが立ち上がり、拡張機能のデバッグをすることができます。

おわり

次回はチケット管理システムのAPIをみていくかなと思います。