こんにちは、WEBエンジニアの堀井です。
私が仕事で普段から愛用しているエディターVisual Studio Code（通称VSCode）。
このエディターを使っている理由の一つに拡張機能があります。
拡張機能を使うことで開発がとてもやりやすくなるのです。
そんな拡張機能、既に様々なものが公開されていますが、痒いところに手が届かないなんてこともあるかもしれません。
そんな時は自作してしまいましょう。
今回はその第一歩としてHelloWorldを実行するところまでやってみます。
準備
拡張機能の開発の前に以下を準備しておきましょう。
- VSCode
- Node.js と git のインストール
プロジェクトの作成
まずは Yeoman というスキャフォールディングツールを利用して雛形を作成するため、以下コマンドを実行します。
npx --package yo --package generator-code -- yo code
おじさんが出てきて色々聞かれるので、今回は画像のようにしました。
するとhelloworldプロジェクトが作成されます。
実行
先ほど作成したhellowprldプロジェクトをVSCodeで開き、左の「実行とデバッグ」タブの「実行とデバッグ」を押すと新たにVSCodeが起動します。
そこで「command + shift + P」でコマンドパレットを表示し、「HelloWorld」を選択すると右下に通知が表示されます。
これで拡張機能が動くことが確認できました。
まとめ
今回はVSCodeの拡張機能を作成してHelloWorldを表示してみました。
といってもスキャフォールディングツールを利用しただけなのでほぼ何もしてませんが、それでもVSCodeの拡張機能ができたことには変わりありません。
これで基本的なVSCode拡張機能の作り方がわかったと思いますので、これを応用して自身の作りたい拡張機能を作成してみてはいかがでしょうか？
最後に、本格的に拡張機能を作成したい方はこちらにサンプルがたくさんありますので、そちらを参考にしてみてください。
以上、堀井でした。