ローカルでのzenn執筆活動が捗るvscode拡張機能「vs-zenn」を作ってみた(改)
元記事がこちらになりますが、まともに扱えるようになったのと、初めてvscodeの拡張機能を公開したので、したことをまとめました
これはなに?
zenn-cliを使って記事や本を新規作成すると、16進数のランダム文字列がファイル名になるので、直接エクスプローラで表示すると何が書いてあるのか、中身を見ないとわかりません
逐一開くのは面倒なので、それを解消するのがvs-zennになります
実際にどうなるのか
| before | after |
|---|---|
ここからファイルを開いて編集とかも出来ます
機能
titleで表示することを中心に使っていたらあったら便利なやつをいくつか追加しました
記事
-
emojiとtitleを使ってエクスプローラ上に表示 - エクスプローラから記事を開く
- コマンドパレットから新規作成
-
titleとtypeの指定が可能
-
本
-
titleを使ってエクスプローラ上に表示 - 本ごとにあるチャプターをネスト表示
- チャプターごとの
titleでエクスプローラ上に表示
- チャプターごとの
- コマンドパレットから新規作成
-
titleの指定が可能
-
拡張機能公開までにしたこと
拡張機能の開発環境は既に構築していましたが、公開までしたことはなかったのでまとめました
基本的には公式にある公開までのやり方と同じです
vsceのインストール
公開するにはvsceを使うので、これをインストールします
npm install -g vsce
# yarn派はこちら
yarn global add vsce
ちなみに、これはコマンドラインでvscodeの拡張機能をパッケージ化、公開、非公開を管理するツールになります
Azure DevOpsからパーソナルアクセストークンを取得する
パッケージ化するにしても、Azure DevOpsで発行されたパーソナルアクセストークンとパブリッシャー登録が必要になるので、これらを準備します
まずはパーソナルアクセストークンから
Azure DevOpsにアクセスしてログインします
ログイン出来たら、↓にある箇所からPersonal access tokensをクリックします
new tokenでトークンを作成します
この時、3箇所の設定を変えます
- Organization: All accessible organizations
- scopes: Custom defined
- Marketplace: Manageにチェック
- Show all scope をクリックすると、出てきます
createボタンを押すと、トークンが表示されます
パブリッシャーを作成する
続いて、vsceを使って、パブリッシャーを作成します
拡張機能を公開した時、この名前が使われて公開されます
まず、package.jsonにpublisherを記載します
{
"publisher": "publisher-name",
}
次に、以下のコマンドを実行します
vsce create-publisher <publisher-name>
対話式でpublisher-name(人が親しみやすい名前)、email、Personal Access Tokenを入力するので、最初の2つはお好みの、最後はAzure DevOpsで発行したトークンを入力します
Successfully created publisher '<publisher-name>'.と、成功したログが表示されたらOKです
README.mdを編集する
README.mdですが、この内容がマーケットプレイスの拡張機能のページにどんと載るので、vscodeの拡張機能のテンプレから編集してないのはよろしくありません
適宜修正することをおすすめします
実際に公開する
ここまで来たら、公開する準備は出来ました
以下のコマンドで簡単に公開することが出来ます
vsce publish
最後のログに公開用URLが表示されたら成功になります、お疲れさまでした
WARNでrepositoryが設定されていないというのが出た場合、package.jsonにrepositoryとそのURLを入力したら解消されます
{
"repository": "repository-url"
}
Discussion