VSCodeの拡張機能を作ってみよう

モチベーション

仕事をする上で欠かせないものとなりつつあるVSCode。
自分なりにカスタマイズして使ったりもしているけれども。
拡張機能を利用すればどんなことまで出来るのかという事を知っておくと、
より使いこなす事が出来るかなと思いチュートリアルを試してみる事に。

参考

前準備

Node.jsのインストール

チュートリアルに入る前にnpmを叩けないといけないので、Node.jsをインストール

Node.js公式からLTS版をダウンロード
https://nodejs.org/ja/
msi を実行してインストール
コマンドの実行確認

>node -v
v14.17.5

>npm -v
6.14.14

作業フォルダの作成

今回はWindows環境で作業するので、以下のフォルダを作業フォルダとして準備

C:\code_extention

Your First Extension

npm で extention の開発に必要な Yeoman と VS Code Extension Generator のインストールを実施

C:\code_extention>npm install -g yo generator-code

しばらく待ってインストールが完了したらVSCode Extension generatorを起動
対話式の質問に対して返答して自動生成の実行を待つ

C:\code_extention>yo code

? ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== Yes

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? HelloWorld
? What's the identifier of your extension? helloworld
? What's the description of your extension?
? Initialize a git repository? Yes
? Bundle the source code with webpack? No
? Which package manager to use? npm

終了すると、idで指定したフォルダ名に以下画像のようなファイルが出来上がる

生成されたフォルダをVSCodeで開く

C:\code_extention>code ./helloworld

立ち上がり次第、F5を押すとExtentionが実行される。
この時、F5を押したら新しいウィンドウが立ち上がるので、その中でCtrl＋Shift＋Pを押して Hello と入力すれば、作成したExtentionが出てくる。
※ 元のウィンドウで、あれ？動かないとしばらくやってしまった

↓ F5押下

↓ 新しいWindowでCtrl＋Shift＋Pを押下し、Helloと入力し実行

↓ 実行すると、右下にインフォメーションが表示される。

Githubへ登録

折角なので、作成したプロジェクトをGithubに登録
ローカルリポジトリへのcommitはあらかじめしておく。

Githubで新規プロジェクトを作成

プロジェクトのリモートリポジトリを追加してPush

C:\code_extention\helloworld>git remote add origin https://github.com/yakato-jun/vscode-extention-example-helloworld.git
C:\code_extention\helloworld>git push --set-upstream origin master

登録したGithubリポジトリは以下。

拡張機能コードの変更

(続く)

VSCodeの拡張機能を作ってみる その1 導入編