🛠

VSCodeでZennの記事作成を便利にするタスクを作った

に公開
VS Code
Zenn
tech

悪いなプログラマのみんな、このタスクは Windows 専用なんだ

最初にごめんなさいしておきます。本記事で紹介するタスクの一部は Windows でしか動きません。
とはいえ、Windows 以外でタスクを作成するためのヒントにはなるかもしれません。

本記事の前提

本記事は Zenn のコンテンツが GitHub のリポジトリで管理され、Zenn CLI の npx zenn init が既に実行済みである事を前提としています。

コンテンツを GitHub で管理する方法については下記の公式記事を参照してください。

GitHub リポジトリで Zenn のコンテンツを管理する
Zenn CLI をインストールする

VSCode のタスクとは

特定のディレクトリの中に .vscode/tasks.json というファイルを作成し、その中にタスクの情報を記述すると、VSCode のコマンドパレッドからタスクを実行したり、ディレクトリを開いたときにタスクを自動実行させたりすることができる仕組みです。

今回は npx zenn init を実行したディレクトリの中に .vscode/tasks.json を作成します。
つまり、article, book, node_modules 等と同じ階層に .vscode が並ぶこととなります。

フォルダ構成

本記事で作成するタスク

本記事では以下の４個のタスクを作成します。

  • run preview - プレビュー用のローカル Web サーバを起動（自動実行も可能）
  • show preview - プレビューをブラウザで表示（Windows 専用）
  • new article - 新しい記事を作成
  • new book - 新しい本を作成

tasks.json (コピペ用)

.vscode/tasks.json を作成し、下記の内容をコピー＆ペーストする事で４個のタスクが使用できるようになります。

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "type": "shell",
      "label": "run preview",
      "command": "npx",
      "args": ["zenn", "preview"],
      "problemMatcher": [],
      "presentation": {
        "panel": "dedicated",
        "clear": true
      },
      "runOptions": {
        "runOn": "folderOpen"
      }
    },
    {
      "type": "shell",
      "label": "show preview",
      "windows": {
        "command": "explorer.exe"
      },
      "args": [
        "http://localhost:8000/${relativeFileDirname}/${fileBasenameNoExtension}"
      ],
      "problemMatcher": [],
      "presentation": {
        "panel": "dedicated",
        "clear": true
      }
    },
    {
      "type": "shell",
      "label": "new article",
      "command": "npx",
      "args": ["zenn", "new:article", "--slug", "${input:slug}"],
      "problemMatcher": [],
      "presentation": {
        "panel": "dedicated",
        "clear": true
      }
    },
    {
      "type": "shell",
      "label": "new book",
      "command": "npx",
      "args": ["zenn", "new:book", "--slug", "${input:slug}"],
      "problemMatcher": [],
      "presentation": {
        "panel": "dedicated",
        "clear": true
      }
    }
  ],
  "inputs": [
    {
      "id": "slug",
      "type": "promptString",
      "description": "slug"
    }
  ]
}

run preview - プレビュー用のローカル Web サーバを起動（自動実行も可能）

次の使用方法１、２のいずれかの方法で使用します。

使用方法 1 : コマンドパレットから Tasks: RunTask > run preview を選択
npx zenn preview を実行し、プレビュー用のローカル Web サーバを起動します。
このタスクを実行することにより、次の show preview でプレビューを表示できるようになります。

使用方法 2 : コマンドパレッドから Tasks: Manage Automatic Tasks in Folder > Allow Automatic Tasks in Folder を選択
VSCode で Zenn CLI が管理するフォルダを開いた際に npx zenn preview が自動実行されるようになります。

show preview - プレビューをブラウザで表示（Windows 専用）

使用方法 : Markdown ファイルを開いた状態でコマンドパレッドから Tasks: RunTask > run preview を選択

ブラウザが起動し、現在開いている Markdown ファイルのプレビューが表示されます。
explorer.exe に URL を渡すことでブラウザを起動するため Windows 専用です。

new article - 新しい記事を作成

使用方法 : コマンドパレッドから Tasks: RunTask > new article を選択後、slug(Markdown のファイル名)を入力して Enter を押す

新しい記事が作成されます。

new book - 新しい本を作成

使用方法 : コマンドパレッドから Tasks: RunTask > new book を選択後、slug(本を格納するフォルダ名)を入力して Enter を押す

新しい本が作成されます。

Discussion