M3 Macのdevcontainerでzenn-cliを使う

M3 Macのdevcontainerでzenn-cliを使う

M3 Macを購入してから、開発環境を整えるためにdevcontainerを使うようになりました。
zennの記事をgithubで管理したいと思い、zenn-cliを使って記事を作成することにしました。
環境作成方法をメモがてら書きます

環境

• PC：M3 pro Mac
• OS version：sonoma 14.3
• Editor：VSCode

devcontainerの作成

自分のgithubアカウントでリポジトリを作成します。
Githubリポジトリとzennのアカウントを連携させます。
いかに公式の記事がありますので、そちらを参考にしてください。
📘 How to use

リポジトリを作成したら、VSCodeでリポジトリを開きます。
devcontainerを作成します。

mkdir .devcontainer
touch .devcontainer/devcontainer.json

devcontainer.jsonに以下の内容を記述します。

{
    "name": "zenn-cli",
	"image": "mcr.microsoft.com/devcontainers/javascript-node:1-20-bullseye",
	"remoteUser": "node",
	"customizations": {
		"vscode": {
			"extensions": [
				"negokaz.zenn-editor"
			]
		}
	}
}

imageはjavascript-nodeを使っています。
remoteUserはnodeを指定しています。
customizationsではzenn-editorをインストールしています。

devcontainerの起動

VSCodeでリポジトリを開いたら、左下の><をクリックします。
Reopen in Containerを選択します。

zenn-cliのインストール

devcontainerが起動したら、ターミナルを開いてzenn-cliをインストールします。

npm init --yes
npm install zenn-cli

zenn-cliの初期設定

zenn-cliを初期設定します。

npx zenn init

上記のコマンドを実行すると、以下のようなメッセージが表示されます。

  🎉  Done!
  早速コンテンツを作成しましょう

  👇  新しい記事を作成する
  $ zenn new:article

  👇  新しい本を作成する
  $ zenn new:book

  👇  投稿をプレビューする
  $ zenn preview

これでzenn-cliを使う準備が整いました。