はじめに
VScodeの拡張機能作成は大きく､
- 自作する ← 【今回】
- 公開する ← 【次回】
の2つのプロセスを踏みます｡
今回は､「作る」方法を解説します｡
VScodeを作成するにはYeomanというアプリを使います｡
Yeomanとは「使用人」という意味で､Google社が開発したnode.jsのツールです｡
yo 雛形のジェネレーターとすることで､あらゆるWEBアプリケーションのベースを自動で作成します｡
当然､VScodeの雛形ジェネレーターも配布されています｡
インストール
まずはYeomanとVScodeの雛形ジェネレーターをnpmでインストールします｡
Windowsでインストールする場合
> npm install -g yo
> npm install -g generator-code
Linuxでインストールする場合
$ sudo npm install -g yo
$ sudo npm install -g generator-code
テンプレート作成
任意のフォルダでターミナルを開き､yo codeと入力します｡
すると､7つ質問されるので､それらに全て答えます｡
- 第一の質問:「どんなタイプの拡張機能を作りたいのか？」
- 基本的には
TypeScriptかJavaScriptを選びます｡
- 基本的には
- 第二の質問:「拡張機能はどんな名前にするのか？」
- 拡張機能の名前を入力します｡
- 第三の質問:「拡張機能の識別子はどうする？」
- デフォルト｡何も入力せず､Enter｡
- 第四の質問:「拡張機能の説明はどうする？」
- 拡張機能の説明を入力｡
- 第五の質問:「Gitリポジトリは初期化するか？」
- デフォルトはYesですが､あらかじめGitHubにリポジトリを作成しているならNoにします｡
- 第六の質問:「WEBパックにソースコードを同梱するか？」
- デフォルト｡何も入力せず､Enter｡
- 第七の質問:「どのパッケージマネージャーを使う？」
-
npmがよく使われます｡
-
第一の質問「どんなタイプの拡張機能を作りたいのか？」
$ yo code
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create?
(Use arrow keys)
❯ New Extension (TypeScript)
New Extension (JavaScript)
New Color Theme
New Language Support
New Code Snippets
New Keymap
New Extension Pack
New Language Pack (Localization)
New Web Extension (TypeScript)
New Notebook Renderer (TypeScript)
第二の質問「拡張機能はどんな名前にするのか？」
? What's the name of your extension?
第三の質問「拡張機能の識別子はどうする？」
? What's the identifier of your extension?
第四の質問「拡張機能の説明はどうする？」
? What's the description of your extension?
第五の質問「Gitリポジトリは初期化するか？」
? Initialize a git repository? (Y/n) n
第六の質問「WEBパックにソースコードを同梱するか？」
? Bundle the source code with webpack? (y/N)
第七の質問「どのパッケージマネージャーを使う？」
? Which package manager to use? (Use arrow
keys)
❯ npm
yarn
pnpm
これでテンプレートが作成されます｡
デバッグしてみる
あとは生成したフォルダで開発していくだけですが､その前にデバッグをしてちゃんと動くか確認します｡
- VScodeで生成したフォルダを開きます｡
- 次に､左側の「デバッグビュー」の
Run Extensionをクリックすると､拡張機能がインストールされた状態のVScodeウィンドゥが立ち上がります｡ - このウィンドゥでコマンドパレットを開いて､デバッグ用に用意された「hello world」を実行します｡
無事動いたので､あとはextension.tsやextension.jsに記述していけば､VScode拡張機能を作ることができます｡