【趣味】【ゲーム開発】VSCodeのExtension開発HelloWorldをわかりやすくまとめてみた。
やることは、↓で公式がやってることと、まんま一緒です。
https://code.visualstudio.com/api/get-started/your-first-extension
日本語のわかりやすいサイトがなかったので、自分でまとめることにしました。
※荒削りの理解なので、概念や呼称が間違っているかもしれませんが、
操作内容は公式とほぼ変わりないので、参考する程度で見てください。
まず下の2つを導入する。
※VSCodeのExtension開発なので、言うまでもなくVSCodeは入っていることとする。
https://nodejs.org/en/
https://git-scm.com/
次に作業用フォルダを作り、VSCodeで開く。
※筆者はドキュメントフォルダに “vscode-extension” を作った。
VSCode内でターミナルを開き、↓のコマンドで環境をインストールする。
|
1 |
npm install -g yo generator-code |
続いて↓のコマンドで、新規のプロジェクトを作る。
|
1 |
yo code |
すると、こんなキャラが表示されると思う。
|
1 2 3 4 5 6 7 8 9 |
_-----_ | | .--------------------------. |--(o)--| | Welcome to the Visual | `---------´ | Studio Code Extension | ( _´U`_ ) | generator! | /___A___\ '--------------------------' | ~ | __'.___.'__ ´ ` |° ´ Y ` |
ここから、いくつかの設定内容を入力しますが、
公式と同じ内容を入力していきましょう。
|
1 2 3 4 5 6 7 8 |
# ? 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 # ? Which package manager to use? npm |
↑を要約すると、こんな感じです。
・TipeScriptで新規のExtensionを開発する。(上下キーで選択)
・Extension名は “HelloWorld” (キー入力)
・識別IDは “helloworld” (キー入力)
・説明欄は “空白のまま” (上下キーで選択)
・Gitリポジトリを初期化する。(y/n選択)
・パッケージマネージャーは npm を使う (上下キーで選択)
これで、新規のプロジェクトが作成されたので、そのプロジェクトを開きます。
公式は↓のコマンドで開いていますが、他の開き方でもOK。
|
1 |
code ./helloworld |
プロジェクトが開けた時点ですでに、
“Hello World” 表示用のスクリプトが組まれています。
F5キーを押して実行すると、新しいWindowでVSCodeが開くので、
こちらのWindow側でテスト出来るというわけですね。
Ctrl + Shift + P でコマンドパレットを開き、↓のコマンドを実行しましょう。
|
1 |
> Hello World |
これで、ウィンドウの右下に “Hello World” が表示されたら、
“Hello World” テスト完了です。
公式は続いて、色々試せることを書き連ねていますが、
単なるHello Worldの拡張なので、ここで解説するのは控えます。
こんなの書き連ねるから、情報量増えて「あーしんどそう」ってなるんだよな。
別のページに書いて、そのリンク貼るだけでいいのに。