VSCodeとQiita CLIで爆速執筆環境を構築する
Qiitaの記事をブラウザではなく、使い慣れた VS Code で書きたい、かつ Git (GitHub) でバージョン管理したい方向けの環境構築ガイドです。
1. 事前準備：Node.js の確認
Qiita CLI は Node.js 環境で動作します。まずはインストール済みか確認しましょう。
node -v
- バージョン（v18以上推奨）が表示されればOKです。
- 未インストールの場合は、Node.js公式サイトからLTS版をインストールしてください。
2. Qiita アクセストークンの発行
CLIから記事を投稿するための「合鍵」を作成します。
- Qiita 設定ページ > アプリケーション にアクセスします。
- 「個人用アクセストークン」の 「新しく発行する」 をクリック。
-
アクセストークンの説明:
Qiita CLI（任意） -
スコープ:
read_qiitaとwrite_qiitaにチェック。 - 発行 を押し、表示されたトークンを必ずコピーして控えておいてください。
3. プロジェクトの初期化
記事を管理するための専用フォルダを作成し、初期設定を行います。
フォルダ作成と移動
mkdir my-qiita-articles
cd my-qiita-articles
Qiita CLI のインストール
npm install @qiita/qiita-cli
初期設定
npx qiita init
実行するとログインを求められるので、先ほど発行したアクセストークンを入力してください。
4. 執筆・プレビュー・公開の流れ
環境構築が終われば、次からは以下のコマンドだけで執筆作業が完結します。
新規記事の作成
npx qiita new 記事のファイル名
public/ フォルダの中に、Markdownファイルが生成されます。
リアルタイムプレビュー
npx qiita preview
ターミナルに表示される http://localhost:8888 をブラウザで開きます。
VS Codeでファイルを保存するたびに、ブラウザ側も自動更新されるため、公開後のイメージを確認しながら執筆できます。
記事の公開
npx qiita publish 記事のID
5. (おまけ) さらに快適にする VS Code 拡張機能
以下の拡張機能を導入すると、さらに生産性が向上します。
| 拡張機能名 | 用途 |
|---|---|
| Markdown All in One | ショートカットや目次自動生成 |
| Paste Image | クリップボードの画像を即座にファイル保存＆リンク挿入 |
| Code Spell Checker | 英単語のタイポ防止 |
まとめ
これで、あなたのPCが最強のQiita執筆マシンになりました！
記事をGitHubにPushするようにすれば、執筆履歴もきれいに残せるのでおすすめです。
npx qiita help