背景

vscodeとqiita-cliでオフラインQiita編集環境を作って投稿していくやる気を（無理やり）引き出していきたいと思います！
会社のConfidentialな情報（ちょっとしたものも含めて）Qiitaに間違って投稿してしまったらいやだなあと思い、今まで記事執筆尻込みしていたため、オフライン環境を準備することにしました。

前提

macOS Ventura13.4.1
vscode 1.82.2
qiita-cli v1.1

QiitaCLIを準備

Github/qiita-cliに沿って準備を実施します。

まずはQiita CLI の記事ファイルや管理をするディレクトリを作成します。
ディレクトリの名前はお好きな名前で。今回はqiitaにします。

mkdir -p ~/qiita
cd ~/qiita

npm install @qiita/qiita-cli@latest --save-dev
npx qiita version
npx qiita init

設定ファイルを生成します。

  Creating /Users/username/qiita/.github/workflows/publish.yml
     Created!

  Creating /Users/username/qiita/.gitignore
     Created!

  Creating /Users/username/qiita/qiita.config.json
     Created!

Success! ✨

次のステップ:

  1. トークンを作成してログインをしてください。
    npx qiita login

  2. 記事のプレビューができるようになります。
    npx qiita preview

Qiita のトークンを発行

APITOKENでのアクセス形式みたいですね。
https://qiita.com/settings/tokens/newでトークンを発行していきます。
権限は「read_qiita」と「write_qiita」を設定すればOKだそう！

発行ボタン押すと一度しかトークンが表示されないのでメモしましょう。

ログイン

npx qiita login

トークンの入力を求められたら先ほどメモしたものを入力して準備は完了です。

以下のURLにアクセスしてトークンを発行してください。（「read_qiita」と「write_qiita」にチェックを入れてください）
  <https://qiita.com/settings/tokens/new?read_qiita=1&write_qiita=1&description=qiita-cli>
  
発行したトークンを入力: {トークン入力}
Hi Ta_Oo!

ログインが完了しました 🎉
以下のコマンドを使って執筆を始めましょう！

🚀 コンテンツをブラウザでプレビューする
  npx qiita preview

🚀 新しい記事を追加する
  npx qiita new (記事のファイルのベース名)

🚀 記事を投稿、更新する
  npx qiita publish (記事のファイルのベース名)

💁 コマンドのヘルプを確認する
  npx qiita help

ローカルプレビュー画面起動

npx qiita preview

実行結果

Preview画面で操作方法も載っているので忘れても安心。

記事管理について

ローカルでの記事管理のみか、Githubでの管理もする合わせ技での自由選択ができるようです。

今回はGithubで管理したいニーズがないためローカルでの記事管理のみで実施しました。
編集方法や投稿方法などはまた余裕があれば、まとめてみたいと思います。

vscodeとの連携

ここまでqiita-cliの準備をしてきましたが、ローカルのエディタと連携しないとさすがにつかいづらいなと。
今回は普段使用しているvscodeで準備したいと思います。

Markdownを書きやすくする拡張機能もたくさんあるため、相性がよさそうです。
今回はvscodeのworkspaceを開いたらPreviewhttp://localhost:8888画面が開くようtasks.jsonの設定をしていきたいと思います。>

~/qiita/.vscode/tasks.json

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Qiita Preview",
            "type": "shell",
            "command": "npx qiita preview",
            "isBackground": true,
            "runOptions": {
                "runOn": "folderOpen"
            },
            "options": {
                "cwd": "${workspaceFolder}/",
                "env": {},
                "shell": {}
            },
            "promptOnClose": true
        },
    ]
}

蛇足

qiita-cliの更新頻度について

本記事作成より1ヶ月前にqiita-cli触ってたのですが、もうマイナリリースが2つも上がっていますね。

vscodeのカラーテーマについて

https://marketplace.visualstudio.com/items?itemName=Increments.qiitaを使うとワークスペースを開いた時だけカラーテーマが変わり、Qiitaの記事を書いてる感を出せました。

~/qiita/qiita.code-workspace

{
  "settings": {
    "workbench.colorTheme": "Qiita",
  }
}

引用