VS Code 101 はじめてのVS Code①

# VS Code 101 はじめてのVS Code①

## 目的

* VS Codeを触らなくなって早1年
* 2か月後にチーム開発をするので、その開発環境？としてVS Codeを使うので改めておさらい
* この文章（Markdown)はTyporaで書いてます（VS Codeで書けよ）
* まずは使い方と、ドキュメントの管理をGitを使ってできればいいな。
* VS Code meetupで作られたハンズオン資料を使っています



## VS Codeの超準備

### 作業用フォルダを作りましょう

* C:\Users\oresama\Documents\vscode_workspace
* この後使うTopicを作成（すでに.mdは 他のアプリに関連付けられてるけどな）

```
vscode_workspace -- 作業⽤フォルダ 
`- topic1
|- topic1-A.md
|- topic1-B.md
`- topic1-C.md
```



### VSCodeインストール

* インストールはしていたのでスキップ。確か簡単だったはず
* もしインストールしていたら、環境変数（PATH）が通っているか確認。デフォルトでPATHが通っているので大丈夫なはずですが。

```
C:\>echo %PATH%
<略>
C:\Users\oresama\AppData\Local\Programs\Microsoft VS Code\bin;
<略>
```



### VS Codeの表示を日本語に

* 既になってた。一応手順は下記

  1. アクティビティーバー（画⾯左端のタブメニュー）から「拡張機能」を選択しま す。 
  2. サイドバー（画⾯左側のエリア）にある Search Extensions in Marketplace 欄に japanese と⼊⼒します。
  3. サイドバー中に Japanese Language Pack for Visual Studio Code とい う項⽬が出てくるので、これをクリックします。右側に拡張機能の詳細が表⽰され るので、 Install のボタンをクリックします。 
  4. 通知ポップアップ（画⾯右下）に Would you like to change VS Code's UI language to Japanese and restart? と表⽰されるため、 Yes を選択 します。
  5. （インストールされている画面ですが）

![image-20210323113820975.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543420/e9b7c0d8-5587-2f18-73f8-ee1b6401eb70.png)




### VS Code 画面の説明

#### ワークスペースとは

* VS Code開発をするとき、必要なファイル等をひとつのフォルダーにまとめて管理すること がよく⾏われます。VS Code ではそのようなプロジェクトごとの作業環境を ワークス ペース と呼んでいて、VS Code で開いたフォルダは ワークスペース として扱われます。
* ひとまず 「VS Code で開かれたフォルダは ワ ークスペース と呼ばれる」 と覚えておく

#### ワークスペースを開く

* 先ほど作成したフォルダを開きます。
* ファイル > フォルダーを開く     （ワークスペースを開くではないのね）
![image-20210323114237263.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543420/f0690697-c5d4-8da0-9c96-3d037844528e.png)

* ワークスペースが開き、先ほど作成したファイルが参照できます。
![image-20210323114438905.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543420/1c856828-05fd-f8f0-1b63-0d550a9f8ba9.png)

* 画面の説明
  * エディタ（右上）
    * 複数ファイルを開いたり、タブにしたり並べたりできる
  * アクティビティバー（一番左）
    * サイドバー（その隣）：に表示手切る機能が並んだもの
  * サイドバー
    * アクティビティバーで選んだものの作業場所：ctl+Bで表示/非表示 切り替え
  * ステータスバー（一番下）：
  * パネル（右下）：CTL+J
    * コンソールログやデバッグなどなど、便利
![image-20210323114757045.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543420/2e07d90f-182a-ca22-d09b-9e6eb2021419.png)

### ハンズオン1 - VS Codeをご機嫌な感じに表示してみよう

* 課題
  * VS Code の UI を下図のように表⽰させてください。 
    * サイドバーは表⽰しない 
    * 下部にパネルを表⽰する 
    * エディターは上下に 2 分割する 
    * 下部には topic1-C.md を表⽰する 
    * 上部はさらに左右に 2 分割する 
      * 左に topic1-A.md を表⽰する 右に topic1-B.md を表⽰する
  * こんな感じかな？
![image-20210323115628740.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543420/39ab2f8f-05d2-91bd-e370-3cdc051fe3f0.png)

## その他Tips

* 複数のファイルを編集することも多いと思いますが、その場合に一括で保存「すべて保存」ができます
* Explorerを開く。個人的には便利。ワークスペースで作業しろよって言われそうですが。
![image-20210324114640512.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543420/a36b7910-95d8-a1f0-2dca-adf0e2a66f27.png)

## マークダウンを書いてみる <超省略>

* VS CodeはMarkdownエディタとして優秀です。
* リアルタイムでプレビューできます。

### ハンズオン2 - マークダウンを書いてみる

* エクスプローラービューから、 topic2 のフォルダを作成し、このフォルダの中に 以下のような hello.md を作成してください。 

* hello.md を保存して、エディターのタブに ● 印がつかない状態にしてください。

* プレビューしてください

  ```
  # マークダウンのサンプル 
  ## ⾒出し 1 
  本⽂ 
  ## ⾒出し 2 
  記号と項⽬の間には半⾓スペースを空ける 
  - リストの項⽬ 1 
  - リストの項⽬ 2
  ```



### ファイル検索と置換（ワークスペース内）

* ワークスペースを一気に検索できるようだ
* 一気に置換もできます。
  * 一気に置換する際も、特定のものを選んだりもできます。
* もちろん正規表現もできます
* やってみれば分かる
* 検索した後にコードが見れる（コードの前後）も見れる



## 今日のまとめ

* VS Codeは標準ツール。
* ワークスペースという考え方で作業フォルダを使う