【趣味】【ゲーム開発】VSCodeのExtension開発HelloWorldをわかりやすくまとめてみた。

2019-09-30

やることは、↓で公式がやってることと、まんま一緒です。

 

日本語のわかりやすいサイトがなかったので、自分でまとめることにしました。

※荒削りの理解なので、概念や呼称が間違っているかもしれませんが、

 操作内容は公式とほぼ変わりないので、参考する程度で見てください。

 

まず下の2つを導入する。

※VSCodeのExtension開発なので、言うまでもなくVSCodeは入っていることとする。

 

次に作業用フォルダを作り、VSCodeで開く。

※筆者はドキュメントフォルダに “vscode-extension” を作った。

 

VSCode内でターミナルを開き、↓のコマンドで環境をインストールする。

 

続いて↓のコマンドで、新規のプロジェクトを作る。

 

すると、こんなキャラが表示されると思う。

 

ここから、いくつかの設定内容を入力しますが、

公式と同じ内容を入力していきましょう。

↑を要約すると、こんな感じです。

・TipeScriptで新規のExtensionを開発する。(上下キーで選択)

・Extension名は “HelloWorld” (キー入力)

・識別IDは “helloworld” (キー入力)

・説明欄は “空白のまま” (上下キーで選択)

・Gitリポジトリを初期化する。(y/n選択)

・パッケージマネージャーは npm を使う (上下キーで選択)

 

これで、新規のプロジェクトが作成されたので、そのプロジェクトを開きます。

公式は↓のコマンドで開いていますが、他の開き方でもOK。

 

プロジェクトが開けた時点ですでに、

“Hello World” 表示用のスクリプトが組まれています。

F5キーを押して実行すると、新しいWindowでVSCodeが開くので、

こちらのWindow側でテスト出来るというわけですね。

Ctrl + Shift + P でコマンドパレットを開き、↓のコマンドを実行しましょう。

 

これで、ウィンドウの右下に “Hello World” が表示されたら、

“Hello World” テスト完了です。

 

公式は続いて、色々試せることを書き連ねていますが、

単なるHello Worldの拡張なので、ここで解説するのは控えます。

こんなの書き連ねるから、情報量増えて「あーしんどそう」ってなるんだよな。

別のページに書いて、そのリンク貼るだけでいいのに。