Visual Studio Code での Extension 開発00(環境構築)

# Visual Studio Code での Extension 開発00(環境構築)

* [公式ドキュメントより](#公式ドキュメントより)
* [環境構築](#環境構築)
* [参考](#参考)

---

## 公式ドキュメントより

- 公式ドキュメント  [あなたの最初の拡張 Visual Studioコード拡張API](https://code.visualstudio.com/api/get-started/your-first-extension)


>__Node.js__ と __Git__ がインストールされていることを確認してから、
 __Yeoman__ と __VS Code Extension Generator__ を次のようにインストールします <br/>__`npm install -g yo generator-code`__

　ということなので、まずは環境構築です

---
流れとしては、、、

1. __Node.js__ のインストール確認
1. __Git__ のインストール確認
1. __Yeoman__ と __VS Code Extension Generator__ のインストール
  
順に実施していきます

---

## 環境構築
1. __✔Node.js__ のインストール確認
    1. コマンドラインで以下を実行します<br>
    `node --version`<br>
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347291/d0b15dd1-aa96-d93b-25dd-97325e66b5c0.jpeg" width="500">
    <br/>入っていないです
    1. __✔Node.js__ のインストール<br>
    [node.jsサイト](https://nodejs.org/ja/)にアクセス<br>
    ⬇<br>
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347291/314217ad-8367-e6eb-69ab-0d023e367c6c.jpeg" width="700"><br>
    「 __10.15.3 LTS　推奨版__」をダウンロードします<br>
    「__node-v10.15.3-x64.msi__ 」がダウンロードされます<br>
    <img src=".https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347291/be282f09-9722-e74e-e895-6d29e234605d.jpeg" width="100"><br>
    ダブルクリックしてインストールを開始<br>
    ⬇<br>
    セットアップウィザード起動　Next を押下<br>
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347291/2a494254-64c6-b527-11d8-82842504ba86.jpeg" width="350"><br>
    ⬇<br>
    左下のチェックボックスにチェックを入れる Next を押下<br>
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347291/577dfe7c-a048-504f-7006-02cb66a3cade.jpeg" width="350"><br>
    ⬇<br>
    インストール場所の指定 そのまま Next を押下<br>
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347291/f1d4c2ee-e19d-1dda-3fec-470bdd8cb6d5.jpeg" width="350"><br>
    ⬇
    インストールのカスタマイズ そのまま Next を押下<br>
    ※npmも一緒にインストールされます<br>
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347291/71b43516-d997-a37e-7031-a6342c874623.jpeg" width="350"><br>
    ⬇<br>
    Install を押下<br>
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347291/3050f739-e975-c940-4d7e-e99a4e808d69.jpeg" width="350"><br>
    ⬇<br>
    しばらくすると完了します<br>
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347291/1de68290-94eb-74d4-b9c2-7dfd5637ed59.jpeg" width="350"><br>
    Finish を押下して閉じる<br>
    1. __✔Node.js__ がインストールされているか確認<br>
    コマンドラインで以下を実行します<br>
     `node --version`<br>
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347291/c01ac88f-62f4-5f29-b709-fbd3b03c7ee7.jpeg" width="500"><br>
    v10.15.3がインストールされていることが確認できました<br>
    1. __✔nmp__ がインストールされているか確認<br>
    コマンドラインで以下を実行します<br>
    `nmp --version`<br>
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347291/02813564-6784-bf80-5f50-7e07ff4de28f.jpeg" width="500"><br>
    6.4.1がインストールされていることが確認できました<br>

    ---
1. __✔Git__ のインストール確認
    1. コマンドラインで以下を実行します<br>
    `git --version`<br>
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347291/cfe85c94-870a-6683-f172-13786edf0566.jpeg" width="500"><br>
    こちらはインストールされていることが確認できましたので割愛します<br>

    ---
1. __✔Yeoman__ と __VS Code Extension Generator__ のインストール
    1. コマンドラインで以下を実行します<br>
    ```npm install -g yo generator-code```<br>
        <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347291/ba98aa06-e972-734c-b438-b2163c9ef52f.jpeg" width="800"><br>
    1. インストールされたか確認します<br>
    コマンドラインで以下を実行します<br>
    ```yo --version```<br>
        <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347291/b041dcf9-6fea-4bcc-d1c2-77342049191e.jpeg" width="500"><br>

---
 
以上で環境は整いました
(これらの作業は公式ドキュメントのたった3行分の作業です、、、)
機会があれば続きを書く予定です

---
## 参考
- 公式ドキュメント: [あなたの最初の拡張 Visual Studioコード拡張API](https://code.visualstudio.com/api/get-started/your-first-extension)

- Qiita: [Node.js / npmをインストールする（for Windows）](https://qiita.com/taiponrock/items/9001ae194571feb63a5e)