はじめに

VSCodeの拡張機能を作ってみます。
今回は事前準備として、インストールとプロジェクト生成をおこない、テストを実行します。

インストール

YeomanとVS Code Extension Generatorをインストールします。

npm install -g yo generator-code

新規プロジェクト生成

yoコマンドで新しいプロジェクトを生成します。

HelloWorldという拡張機能をTypeScriptで作成する場合↓

yo code

# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###

# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Initialize a git repository? Yes
# ? Bundle the source code with webpack? No
# ? Which package manager to use? npm

code ./helloworld

テスト実行

エディタを選択した状態でF5 を押すと、拡張機能がコンパイルされ、開発ウィンドウが開きます。
新しいウィンドウでコマンドパレット( Ctrl+Shift+P )からHello Worldコマンドを実行します。
Hello World from HelloWorld!の通知が表示されたら成功です！

拡張ファイルの構造

extension.tsにメインの処理、package.jsonに拡張機能の設定をおこないます。

.
├── .vscode
│   ├── launch.json     // 拡張機能を起動してデバッグするための設定
│   └── tasks.json      // TypeScriptをコンパイルするための設定
├── .gitignore
├── README.md
├── src
│   └── extension.ts    // メイン処理
├── package.json        // 拡張機能の設定
├── tsconfig.json       // TypeScriptの設定

package.json

activationEventsに

公式サンプル

公式GitHubにVSCode APIを使ったサンプルがあるので、これを見て機能を学ぶことができます。

いくつか使いそうなものをピックアップしてみたので、次回から詳細をまとめていこうと思います。

VSCode拡張機能を作ってみる2 - 入力補完