VScodeの拡張機能を作りたい(環境構築編)

そもそも

　知り合いが「VScodeの拡張機能作ってるんだ」ということを聞いて、自分も作ってみたいなって思ったのがきっかけです。しかもTypeScriptで書けるではありませんか！と、手を出してみたという訳です。
　なるべくわかりやすく書こうと思っていますので、訂正や分かりにくいところがあればぜひ教えてください！

環境

• Windows 10
• Visual Studio Code(Ver 1.37.1)
• npm(Ver 6.4.1)

まだ入れていない方は - [Windowsでのインストールの仕方](https://qiita.com/taiponrock/items/9001ae194571feb63a5e) - [Macでのインストールの仕方] (https://qiita.com/PolarBear/items/62c0416492810b7ecf7c)

を参考にしてください。

プロジェクトを作る前に

Yeoman をnpm でインストール

• Yeoman とは？

  
  　プロジェクトの雛形を作成する統合開発ツールのこと。初めて聞いたので利点欠点は分かりませんが、ターミナル上の一問一答形式でどんあプロジェクトが作れるか選択できる。

• インストールする意味
  Yeomanのジェネレーターの1つである"code"を使うと拡張機能が作れるらしいから。

• 方法

npm install --global yo
// yoのインストール
 
//今から"code"というジェネレータを入れる
//方法1
npm install -g yo generator-code
//方法2
yo
//するとターミナル上に選択画面が表示される
//その中で"Install a generator"を選択する
//  Search npm for generators:と出るのでcodeと入力

無事インストールされると

``` + for@0.1.0 + generator-code@1.2.5 added 386 packages from ～ ``` と表示されると思います。(バージョンは異なると思う)

プロジェクトを作る

• 今からすること

　プロジェクト名がHelloWorldとするプロジェクトを立ち上げます。

• 方法

yo code

　そこからプロジェクトをどのような形式のもので作るかを選んだり入力していきます。

１．どのようなタイプの拡張機能を作りますか？

? What type of extension do you want to create? (Use arrow keys) 
> New Extension (TypeScript)
  New Extension (JavaScript)
  New Color Theme
  New Language Support
  New Code Snippets
  New Keymap
  New Extension Pack

　これはNew Extension (TypeScript)を選びます。今回はTypeScriptで開発したいからですね。下5つの項目はまたいずれか見ていこうと思います。

2．この拡張機能の名前は何でしょう？

? What's the name of your extension? 

　ここにはHelloWorldと打ち込みます。

3．拡張機能の識別子は何ですか？

　
　そこで識別子とは何ぞや？ってなったので具体例を出してみたいと思います。例えば上の拡張機能。名前は勿論"C/C++"です。ここの中で識別子というのは"ms-vscode.cpptools"、名前の横にある薄い文字のことですね。本当に名前の通り拡張機能をプログラム等から識別するためのものでした。

? What's the identifier of your extension? (helloworld)

　括弧の中身は、さっき入力した拡張機能の名前の小文字バージョンです。公開する気もないうえにそこまで変える必要性を感じないのでそのまま"helloworld"と入れておきました。

4．拡張機能の説明を入れてください。

? What's the description of your extension? 

　拡張機能の説明を入れます。入れないときはEnterでスキップ出来ます。作りたいものが決まっている人はメモ程度に入れるのもアリかもしれません。公開しないのであればですが。

5．gitのリポジトリを作りますか？

? Initialize a git repository? (Y/n)  

　もしかしたらGit入れてないと出てこない、またはエラーが出てくる質問かもしれません。コードの管理を簡単にするために私はYを入力しましたが、お好きな方へどうぞ。

6．パッケージのマネージャーは何にします？

? Which package manager to use? 
> npm
  yarn

　質問の下にある選択肢は人それぞれでしょうが、今回はnpmを選びます。

　ここまで入力し終わるとバーッとインストールが始まります。

Your extension you has been created!

To start editing with Visual Studio Code, use the following commands:

     cd helloworld
     code .

Open vsc-extension-quickstart.md inside the new extension for further instructions
on how to modify, test and publish your extension.

For more information, also visit http://code.visualstudio.com and follow us @code.

そして上みたいなメッセージが出たら無事終了です！お疲れ様です。

動かしてみる

テストプログラムが組み込まれているので、このままでも動きます。ちょっと動かしてみましょう。

1．VScodeを起動

　今回のターミナルでの作業をVScodeで行っているまたはVScode起動したまま作業している場合はリロードになります。リロードの方法は、まずCtrl + Shift + pを押します。そうすると入力欄が出てくると思うのでそこで Reload WIndow と打ってください。そしてEnterを押すとリロードされます。

2．デバッグを始める

　VScodeでのデバッグの始め方は

• F5キーを押す
• [View] -> [Debug] を押す

になります。

3．実行

　デバッグが始まると新しいVScodeが立ち上がります。その立ち上がったWindowで Ctrl + Shift + pを押し、HelloWorld と打ち込むと、右下にメッセージボックスが出てきます！

2020.1.19 追記
　Ctrl + Shift + p で選択しても HelloWorld が見つからないという類のエラーが出て上手くいかない場合、npm run compile をターミナルで打って out ファイルを作ってから実行しなおすといいですよ。

備考

　これから新しくカスタマイズしていこうと思っています。なので詳しいことを何ひとつ説明できていません、すみません。

参考資料

• 公式リファレンス
  　

  
  VScode Extension

  
  Yeoman

  
  generator-codeのGitHub

• 参考にさせていただいた記事

[Visual Studio Code はじめての拡張機能開発(Qita)](https://qiita.com/rma/items/8c53077d1355ab8fa4c6)

[Visual Studio Codeの拡張機能を作成する (atmarkit)](https://www.atmarkit.co.jp/ait/articles/1511/30/news030.html)