ローカルでのzenn執筆活動が捗るvscode拡張機能「vs-zenn」を作ってみた(改)

3 min読了の目安(約2700字TECH技術記事

元記事がこちらになりますが、まともに扱えるようになったのと、初めてvscodeの拡張機能を公開したので、したことをまとめました

これはなに?

zenn-cliを使って記事や本を新規作成すると、16進数のランダム文字列がファイル名になるので、直接エクスプローラで表示すると何が書いてあるのか、中身を見ないとわかりません
逐一開くのは面倒なので、それを解消するのがvs-zennになります

実際にどうなるのか

before after
before after

ここからファイルを開いて編集とかも出来ます

機能

titleで表示することを中心に使っていたらあったら便利なやつをいくつか追加しました

記事

  • emojititleを使ってエクスプローラ上に表示
  • エクスプローラから記事を開く
  • コマンドパレットから新規作成
    • titletypeの指定が可能

  • titleを使ってエクスプローラ上に表示
  • 本ごとにあるチャプターをネスト表示
    • チャプターごとのtitleでエクスプローラ上に表示
  • コマンドパレットから新規作成
    • titleの指定が可能

拡張機能公開までにしたこと

拡張機能の開発環境は既に構築していましたが、公開までしたことはなかったのでまとめました
基本的には公式にある公開までのやり方と同じです

vsceのインストール

公開するにはvsceを使うので、これをインストールします

npm install -g vsce
# yarn派はこちら
yarn global add vsce

ちなみに、これはコマンドラインでvscodeの拡張機能をパッケージ化、公開、非公開を管理するツールになります

Azure DevOpsからパーソナルアクセストークンを取得する

パッケージ化するにしても、Azure DevOpsで発行されたパーソナルアクセストークンとパブリッシャー登録が必要になるので、これらを準備します
まずはパーソナルアクセストークンから

Azure DevOpsにアクセスしてログインします

microsoftアカウントが必要になります(今回は割愛)

ログイン出来たら、↓にある箇所からPersonal access tokensをクリックします

new tokenでトークンを作成します
この時、3箇所の設定を変えます

  • Organization: All accessible organizations
  • scopes: Custom defined
  • Marketplace: Manageにチェック
    • Show all scope をクリックすると、出てきます

createボタンを押すと、トークンが表示されます

トークンはこのタイミングでしか表示されないので、ローカルのどこかにコピペしてください
何らかの原因で画面に更新がかかった場合はもう一度トークンを作成してください

パブリッシャーを作成する

続いて、vsceを使って、パブリッシャーを作成します
拡張機能を公開した時、この名前が使われて公開されます

まず、package.jsonpublisherを記載します

{
  "publisher": "publisher-name",
}

次に、以下のコマンドを実行します

vsce create-publisher <publisher-name>

対話式でpublisher-name(人が親しみやすい名前)、emailPersonal Access Tokenを入力するので、最初の2つはお好みの、最後はAzure DevOpsで発行したトークンを入力します
Successfully created publisher '<publisher-name>'.と、成功したログが表示されたらOKです

README.mdを編集する

README.mdですが、この内容がマーケットプレイスの拡張機能のページにどんと載るので、vscodeの拡張機能のテンプレから編集してないのはよろしくありません
適宜修正することをおすすめします

基本英語ですが、日本語でも構いません(私は何故か英語にしてしまった、zennが日本向けのサービスなのに)

実際に公開する

ここまで来たら、公開する準備は出来ました
以下のコマンドで簡単に公開することが出来ます

vsce publish

最後のログに公開用URLが表示されたら成功になります、お疲れさまでした
WARNでrepositoryが設定されていないというのが出た場合、package.jsonrepositoryとそのURLを入力したら解消されます

{
  "repository": "repository-url"
}