Qiita CLIをもっと便利に！VS Code で完結する記事管理ツールキットを作ってみた

はじめに

Qiita CLI は手元の環境で記事を執筆・プレビュー・投稿できる便利なツールです。エディタとの親和性が高く、Git での記事管理もできるため、テキストエディタ派の方には特におすすめです。

ただし、使い込んでいくと「もう少しここが便利だったら……」という点がいくつか出てきました。

• 投稿した記事の カレンダー表示ができない
• 指定した日に自動投稿する予約投稿機能がない
• VS Code での Markdown プレビューが Qiita 固有の構文（:::note ブロックや lang:ファイル名 記法など）に対応していない
• 記事作成のたびにブランチ作成・ファイル配置・Front Matter 設定を手作業でやるのが面倒

これらの課題を解消するために、既存の Qiita CLI 環境に追加するだけで使える追加ツールキットを作りました。コンセプトは「VS Code だけで完結する記事管理」です。

既存の Qiita CLI 環境に VS Code 拡張機能と設定ファイルを追加するだけで動作します。リポジトリを作り直す必要はありません。

Qiita CLI との機能比較

まず、Qiita CLI 単体との機能差をまとめます。

機能	Qiita CLI 単体	このツールキット
記事の作成	qiita new で public/ 直下に生成	スクリプトで public/YYYY/MM/ に自動配置 + ブランチ作成
記事の公開	手動で qiita publish を実行	main への push で自動公開（GitHub Actions）
予約投稿	非対応	scheduled_publish + GitHub Actions で自動化
公開通知	非対応	Chatwork / Slack / Discord / Teams に自動通知
created_at 管理	非対応	CI が投稿後に自動で Front Matter へ追記
ファイル整理	フラット管理（public/ 直下）	年月別サブディレクトリで整理
カレンダー表示	非対応	VS Code 拡張で14週カレンダーを表示
構文チェック	非対応	Qiita 固有記法の Lint（7 ルール）
コードフォーマット	非対応	Prettier による自動フォーマット
ブランチ運用	非対応	記事ごとにブランチを自動作成
Markdown プレビュー	Qiita 構文は未対応	VS Code 拡張で Qiita 固有構文をプレビュー

主な機能

記事カレンダー（VS Code 拡張機能）

public/ 配下の記事ファイルを解析し、投稿履歴・予定をカレンダー形式で表示する VS Code 拡張機能です。ワークスペースに qiita.config.json または public/ ディレクトリが存在すると自動的にアクティブになります。

14 週間分（今日の 2 週間前〜12 週間先）を一覧表示し、記事のステータスを色で区別します。

ステータス	色	条件
Published	緑	id が設定済み・private: false
Published (private)	紫	id が設定済み・private: true
Scheduled	青	scheduled_publish が未来日
Ready	黄	ignorePublish: false・id が null
Draft	グレー	ignorePublish: true・id が null

カレンダー上から直接、新規記事の作成（公開・限定共有・予約投稿）や Git 操作（コミット・プッシュ・マージ）も行えます。カレンダー右側のサイドバーには日付未定の記事（ファイル名が 99999999- で始まるもの）が一覧表示されます。

その他の主な機能は以下のとおりです。

機能	説明
投稿推移グラフ	直近 12 ヶ月の積み上げ棒グラフ（前年同期比付き）
ドラッグ＆ドロップ	予約投稿・下書き記事の日付を D&D で変更（ファイルリネーム・Front Matter 更新まで自動）
祝日表示	日本の祝日を自動取得して表示
ファイル監視	public/ 配下の変更・ブランチ切替を検知して自動リロード
キーボード操作	← → で週移動、Escape でモーダルを閉じる

予約投稿機能（GitHub Actions）

GitHub Actions を使って、指定した日に記事を自動投稿する機能です。

Front Matter に scheduled_publish フィールドで投稿予定日を指定するだけで、毎日 JST 9:00 と JST 18:00 に動作するワークフローが対象記事を検出して自動投稿します。

---
title: 記事タイトル
tags:
  - タグ1
private: false
updated_at: '2026-03-12T22:53:57+09:00'
id: null
organization_url_name: null
slide: false
ignorePublish: false
---

指定日が到来すると、ワークフローは以下を自動的に行います。

1. ignorePublish: false に変更
2. scheduled_publish 行を削除
3. Qiita に投稿
4. 変更をコミット・プッシュ

Qiita Markdown プレビュー（VS Code 拡張機能）

VS Code 標準の Markdown プレビューを Qiita 固有の構文に対応させる拡張機能です。ワークスペースに qiita.config.json または public/ ディレクトリが存在すると自動的にアクティブになります。Ctrl+Shift+V でプレビューを開くと、Qiita と同じ見た目で記事を確認できます。

構文	説明
:::note info|warn|alert	ノートブロック（3 種類のスタイル）
```lang:filename	コードブロックのファイル名ヘッダー表示
```math	数式ブロック（VS Code の KaTeX と連携）
`#FF0000`	インラインカラーコード（色プレビュー付き）
改行	自動 <br> 変換（Qiita と同じ挙動）

npx qiita pull および npx qiita preview は通常運用では使用しないでください。Qiita CLI のこれらのコマンドは Front Matter を上書きし、scheduled_publish や created_at などのカスタムフィールドの削除・ディレクトリ構造の破壊・ignorePublish のリセットが発生します。プレビューには VS Code の Markdown プレビュー拡張を使用してください。

記事作成スクリプト（PowerShell）

scripts/ 配下に記事管理を自動化する PowerShell スクリプトを用意しています。VS Code タスクから実行するか、ターミナルから直接呼び出せます。

スクリプト	説明
New-Article.ps1	ブランチ作成 + public/YYYY/MM/ へのファイル配置 + Front Matter 設定を1コマンドで実行
New-ScheduledArticle.ps1	予約投稿記事を作成（scheduled_publish の自動設定付き）
Sync-ArticleDates.ps1	created_at / scheduled_publish に基づいてファイル名の日付プレフィックスをリネーム
Add-CreatedAt.ps1	Qiita API から投稿日時を取得し、Front Matter に created_at を追記

カスタム Lint ルール

Qiita 固有の Markdown 構文をチェックするカスタム Lint ルールを用意しています。VS Code に DavidAnson.vscode-markdownlint 拡張をインストールすると、保存時にリアルタイムで検証されます。

ルール ID	検証内容
QFM001	Front Matter 必須フィールドの検証
QFM002	:::note ブロックの構文検証
QFM003	コードブロックの lang:ファイル名 記法
QFM004	数式ブロックの開閉対応
QFM005	details/summary の構文検証
QFM006	埋め込みサービスのホワイトリスト検証
QFM007	インライン数式の構文検証

npm run lint で全記事をチェックできます。

セットアップ

動作要件

• Node.js 20.0.0 以上
• PowerShell 7.0 以上（スクリプト実行用）
• VS Code 1.85.0 以上
• Qiita CLI 1.8.0 以上（サブディレクトリを使った記事管理に必要）

手順

1. VS Code 拡張機能のインストール

Releases ページ から最新の .vsix ファイルをダウンロードし、VS Code にインストールします。

# 最新リリースから VSIX をダウンロード
gh release download --repo vehiclevisionjp/VehicleVision.Tools.QiitaArticle --pattern "*.vsix"

# カレンダー拡張
code --install-extension VehicleVision.Tools.QiitaArticle.Calendar.vsix

# Qiita Markdown プレビュー拡張
code --install-extension VehicleVision.Tools.QiitaArticle.MarkdownPreview.vsix

または VS Code の拡張機能ビュー（Ctrl+Shift+X）→ ... → VSIX からインストール でもインストールできます。

2. lint・ツールファイルのセットアップ

Releases ページ から qiita-tools.zip をダウンロードし、既存の Qiita CLI 記事リポジトリのルートに展開します。

# 最新リリースから qiita-tools.zip をダウンロード
gh release download --repo vehiclevisionjp/VehicleVision.Tools.QiitaArticle --pattern "qiita-tools.zip"

# 記事リポジトリのルートで展開
unzip qiita-tools.zip -d .

ZIP に含まれるファイルは以下のとおりです。

ファイル / ディレクトリ	用途
.markdownlint-cli2.jsonc	markdownlint 設定
.markdownlint-rules/	Qiita 固有 Lint ルール（7 ルール）
.prettierrc	Prettier フォーマット設定
package.json	Lint / Format 依存パッケージ定義
.vscode/extensions.json	推奨拡張の自動提案設定
.vscode/tasks.json	VS Code タスク定義
scripts/	記事管理 PowerShell スクリプト
.github/workflows/push-publish.yml.sample	push 時自動公開ワークフロー（サンプル）
.github/workflows/scheduled-publish.yml.sample	予約投稿ワークフロー（サンプル）

3. 依存パッケージのインストール

npm install

4. GitHub Actions の有効化（自動公開を使う場合）

サンプルワークフローをリネームして有効化します。

mv .github/workflows/push-publish.yml.sample .github/workflows/push-publish.yml
mv .github/workflows/scheduled-publish.yml.sample .github/workflows/scheduled-publish.yml

次に、リポジトリの Settings → Secrets and variables → Actions で以下の Secrets を設定します。

シークレット	用途	必須
QIITA_TOKEN	Qiita API アクセストークン	✅

通知機能を利用する場合は、使用するサービスに応じた Secret を追加します。サンプルワークフローにコメントアウトされた状態で通知ステップが含まれているので、必要なものを有効化してください。

サービス	必要な Secret
Chatwork	CHATWORK_API_TOKEN, CHATWORK_ROOM_ID
Slack	SLACK_WEBHOOK_URL
Discord	DISCORD_WEBHOOK_URL
Microsoft Teams	TEAMS_WEBHOOK_URL

まとめ

このツールキットを使うことで、Qiita CLI が持っていた以下の課題を解消できます。

課題	解決方法
記事の投稿履歴・予定が見えない	記事カレンダー拡張でカレンダー表示
予約投稿ができない	scheduled_publish + GitHub Actions で自動化
VS Code プレビューが Qiita 構文未対応	Qiita Markdown プレビュー拡張
記事作成の手間が多い	PowerShell スクリプトでブランチ・ファイル・Front Matter を一括自動化
Qiita 構文の書き間違い	カスタム Lint ルールでリアルタイム検証

既存の Qiita CLI 環境に .vsix と qiita-tools.zip を追加するだけで導入できます。npx qiita publish などの既存ワークフローはそのまま維持されます。

興味があればぜひ試してみてください。