Advent Calenderをvscodeとqiita cliを使って書くために準備をしていたら、自分の日が来てしまったのでやっていたことをまとめます

qiita cliが今年の8月にリリースされていました

せっかくので今回のAdvent Calenderをqiita cliを使って書いてみようと思っていました
そう思ったのは良いんですが、投稿日ぎりぎりに着手したために準備をしていたら投稿日になってしまいました

今から記事を書くと間に合わないので、やっていたことをまとめてみようかなと思いました
今回はdev containerを使って執筆環境を作りました

1. qiita cliのインストール

package.jsonにqiita cliを追加しておきます

package.json

{
  "name": "qiita-content",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "devDependencies": {
    "@qiita/qiita-cli": "^1.3.0"
  }
}

2. credentials.jsonの作成

qiita cliのreadme.mdを参考にトークンを発行しておきます

こちらは本来npx qiita loginを実行すると$XDG_CONFIG_HOME/qiita-cliもしくは$HOME/.config/qiita-cliにcredentials.jsonを作成してくれますが、今回はコンテナ内にマウントしたいためプロジェクト内に作ろうと思います
このファイルにはqiitaのAPIトークンが含まれているため、先に.gitignoreに追加しておきます
ついでにnode_modulesやqiita cliで作られるフォルダも追加しておきます

.gitignore

credentials.json
node_modules
.remote

credentials.jsonを作成します

credentials.json

{
  "default": "qiita",
  "credentials": [
    {
      "name": "qiita",
      "accessToken": "先ほど発行したトークン"
    }
  ]
}

3. devcontainerの設定

cmd + shift + pを押してDev Containers: Add Dev Container Configuration Files...を選択します

qiita cliを動かすためにはnode.jsが必要なので、node.jsのdevcontainerを選択します
また、今回はpnpmを使おうと思うので、pnpmを選択しておきます

.devcontainerにdevcontainer.jsonが作成されたと思います
qiita cliはデフォルトでは8888ポートを使うようなので、forwardPortsに8888を追加しておきます
今回はpnpmを使用しているので、postCreateCommandをpnpm installに変更します
先ほど作成したcredentials.jsonをコンテナ内にマウントするためにmountsを追加しています

devcontainer.json

{
  "name": "Node.js",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:1-20-bullseye",
  "features": {
    "ghcr.io/devcontainers-contrib/features/pnpm:2": {}
  },
  "forwardPorts": [8888],
  "postCreateCommand": "sudo chown node node_modules && pnpm install",
  "mounts": [
    "source=qiita-content-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume",
    "source=${localWorkspaceFolder}/credentials.json,target=/home/node/.config/qiita-cli/credentials.json,type=bind,consistency=cached"
  ],
  "customizations": {
    "vscode": {
      "extensions": [
        "DavidAnson.vscode-markdownlint",
        "streetsidesoftware.code-spell-checker"
      ]
    }
  }
}

cmd + shift + pを押してDev Containers: Reopen in Containerを選択し起動します

3. qiita cliでの記事作成

１回だけqiita initを実行しておきます

pnpm qiita init

これによってqiita.config.jsonやgithub actionsの設定ファイルが作成されます

preview

pnpm qiita previewでpreviewを確認できます

新規作成

pnpm qiita newを実行するかpreview上の新規作成ボタンから作成ができます

pnpm qiita new 記事のファイルのベース名

記事の公開

qiita cliのreadmeを参考にgithub actionsで公開するように設定します

4. vscode拡張機能

devcontainer.jsonのcustomizationsに拡張機能を追加することができます

devcontainer.json

{
  "customizations": {
    "vscode": {
      "extensions": [
        "DavidAnson.vscode-markdownlint"
      ]
    }
  }
}

text-lintのような執筆が楽になるような拡張機能を追加しておきたいです

最後に

qiita cliによってvscodeで記事が書けるようになったので、記事の執筆が捗りますね