VSCode 拡張機能を作って公開してみた : non-italic-monokai

ふと思い立って、VSCode 拡張機能を作って公開してみた。

今回作ったのは、non-italic-monokai : Non-Italic Monokai というカラーテーマ。よくある Monokai のテーマはイタリック (斜体) になるシンタックスがあるのだが、個人的にはイタリックが見づらいので、全てのイタリック指定を取り除いて別の拡張機能として公開してみた次第。

VSCode のマーケットプレイスと、ソースコードを管理している GitHub リポジトリは以下。

• non-italic-monokai - Visual Studio Marketplace
• GitHub - Neos21/vscode-non-italic-monokai: VSCode Extensions : Non-Italic Monokai Theme

以降、拡張機能の作成から公開までの手順をまとめてみる。

目次

• VSCode 拡張機能の雛形を作る
• VSCode 拡張機能を公開するための準備
• VSCode 拡張機能を公開する

VSCode 拡張機能の雛形を作る

VSCode 拡張機能を作りたい、でも何から始めたら良い？

と思って調べてみると、VSCode 拡張機能を作るための雛形生成ツールが提供されていたので、コレを使った。

• 参考：Your First Visual Studio Code Extension - Hello World
• 参考：Visual Studio Code はじめての拡張機能開発 - Qiita

ツールは npm でグローバルインストールするので、Node.js 環境がない場合は別途準備しておくこと。

• Node.js をバージョン管理できる体制でインストールする

# Yeoman と VSCode 拡張機能ジェネレータをインストールする
$ npm install -g yo generator-code

# Yeoman を使って対話形式で雛形を作る
$ yo code

あとは対話形式で雛形が生成できる。生成できたコードをゴリゴリイジって、僕の場合はテーマを作った。

VSCode 拡張機能を公開するための準備

拡張機能の作成が終わったら公開…なのだが、公開のためには VSTS アカウントの作成が必要だった。

• Create a VSTS account with a Microsoft account or a work/organization account | Microsoft Docs
  • Visual Studio Team Services | Sign In

上のリンクより、まずはアカウントを作った。

• 「プロジェクトをホストする地域」は適当に設定。
• https://【決めたアカウント名】.visualstudio.com/ に 自分のワークスペースみたいなのが用意される。
• 「MyFirstProject」が生成されて、ダッシュボード画面に行くが、このプロジェクトは要らないので削除しちゃう。

次に、作成したアカウントの Personal Access Token を生成する。

• 参考：Authenticate access with personal access tokens | Microsoft Docs
• 参考：拡張機能の公開 | 非公式 - Visual Studio Code Docs

ダッシュボード画面の右上にあるアイコンから「Security」に進むと、Personal Access Token の生成画面に移動できる。

「Add」リンクを押下し「Create a personal access token」画面に進んだら、以下のように設定する。

• Description : 適当に説明を書く
• Expires In : 「1 year」を選択する (有効期限を1年に設定する)
• Accounts : 「All accessible accounts」を選択する
• Authorized Scopes : 「All scopes」を選択する

コレで下の方にある「Create token」ボタンを押下すると、トークンが生成できる。このトークンはコピーしてメモしておこう。

VSCode 拡張機能を公開する

いよいよ拡張機能を公開する。公開のためのツールも npm で公開されているので、コレをインストールして利用してみよう。

# 拡張機能公開用のツールをインストールする
$ npm install -g vsce

次に、以下のコマンドで Publisher、つまり拡張機能を公開するユーザを作成する。

$ vsce create-publisher 【アカウント名】
# 表示するアカウント名・メールアドレス・先程作成した Personal Access Token を入力する

アカウントを作成したらログインする。

$ vsce login 【アカウント名】
# 「Do you want to overwrite its PAT?」に「y」と回答、Personal Access Token を再度入力する

コレでログインできるはず。

ログインできたら、作成した VSCode 拡張機能があるディレクトリに移動し、以下のコマンドで公開できる。

$ vsce publish
Publishing Neos21.non-italic-monokai@0.0.1...
Successfully published Neos21.non-italic-monokai@0.0.1!

コレで拡張機能が公開できた。サクッと作れてイイカンジ！