はじめに
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を使ったサンプルがあるので、これを見て機能を学ぶことができます。
いくつか使いそうなものをピックアップしてみたので、次回から詳細をまとめていこうと思います。