VSCode インストールと画面説明と日本語化

```VSCode``` について頑張ってまとめようとしたけど沼なので、一旦こちらの記事は以下に留めておくことにした。

- インストール
- パーツの説明
- 日本語化

# インストール

Googleで```VSCode```で検索すればインストーラにたどり着ける。
2021.9.24.時点だと [こちら](https://azure.microsoft.com/ja-jp/products/visual-studio-code/) 。

インストールすると最初は英語表記かもしれない。
後述の方法で日本語化すると良い。

# VSCode全体の基本構造

パーツの説明から。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/8445f27b-c3dc-1e04-32b8-95d740ad89a8.png)

各パーツは基本的に ``メニュー > 表示 > 外観`` から表示/非表示の操作ができる。

## メニューバー

上部にあるバー。Office製品だと「リボン」っていう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/b930f2a0-f6a0-30ac-0449-cf9bbc82f74d.png)

これを非表示にすると再表示の方法が分からなくて焦るけど、左側にハンバーガーメニュー(≡)で生きている。良かった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/5dcbd41a-404c-1e73-7873-9f9449ac4a8f.png)

## サイドバー

``VSCode``の操作の基本となる``エクスプローラ``。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/c2b99421-471f-6230-0ad6-1f3c86e1ace8.png)


黄色いアイコンでも表示/非表示を切り替えられるが、ショートカットキーを覚えた方がいい。``Ctrl + B``で領域そのものの表示/非表示を切り替えられる。狭いディスプレイを活用するために頻繁に表示/非表示を切り替えることがある。

``エクスプローラ``以外の情報も``サイドバー``の領域に表示される。いま左側に見えているアイコンは上から

- エクスプローラ(ファイルエクスプローラをツリー表示したようなもの)
- 検索(たぶんエクスプローラ内のファイル/フォルダーの検索)
- Git操作(アイコンはブランチ的なやつ)
- 実行とデバッグ(ソースコード開発のときに利用かな)
- 拡張(機能の追加。いわゆるプラグイン的な。めちゃ使う)

## ステータスバー

一番下の色つきのバー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/0b6043f8-6270-b006-7ce3-833978e6733a.png)

コードのエラー数とか。見た目かっちょいいし、操作のヒントが本当に助かるので表示しておくことが無難。

## アクティビティーバー

サイドバーで説明した、サイドバーに表示する内容を制御する領域
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/77f13e4a-65fc-e460-2d50-75252c3afa04.png)

一番下に歯車アイコンがある。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/619a5b9b-e312-7d59-6ca5-dceb3f419de8.png)

``配色テーマ``もここにある。

## エディタのレイアウトを変更

``メニュー > 表示 > エディターレイアウト``でイジれる。

例えばファイルを2つ開いているとこんな見た目。タブで表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/53a5fc51-a1a8-5be0-a4a3-edd8c73009fe.png)

レイアウトで左右分割にするとこうなる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/f3b5934f-5495-86b3-4a0c-1eadca9b8799.png)

同じファイルも左右で開けるので、編集中ファイルの別部分を見ながらコード書けたりする。

# ファイルを作成/編集するには

まずは``エクスプローラ``に該当ファイルが保存されているフォルダーを表示する必要がある。
フォルダーの開き方は2つ。

- フォルダーを直接開く
- ワークスペースにフォルダーを開く

## フォルダーを直接開く方法

``Ctrl + B``でサイドバーを開いたら``メニュー > ファイル > フォルダーを開く``を実行。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/55cbb7d9-f9d1-00ed-b7e7-16ffe0e8184f.png)

フォルダー選択ダイアログが出てくるが、選択するのは「フォルダー」であることに注意。
初めて開いたりネットワーク上のファイルだと「信頼しますか？」的な警告が出るかも。信頼できるフォルダであれば「はい」を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/572ebc5e-cc29-2b99-5a57-13399c0e3f26.png)

別のフォルダーを開きたければ同様にフォルダーを開けばいい。その場合はいま開いているフォルダーが閉じられて、新たに選択したフォルダーが表示される。

## ワークスペースにフォルダーを追加して開く方法

先のフォルダーを開く方法だと、同時に複数のフォルダーを開くことができない。
同時に複数のフォルダーを開きたい場合は``ワークスペース``を利用する。

まずは``フォルダーを直接開く方法``で1つのフォルダーをエクスプローラー領域に表示する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/f9e76f92-7e70-252e-36cf-670030d005e9.png)

ココに、全く違う場所に置いてある``vscode_xxx``フォルダーを同時に表示する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/705123ec-ea4c-ea46-c21f-d8ec55c63846.png)

今度は``フォルダーをワークスペースに追加``を選択し、同じようにフォルダーを選択して開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/6bff0e78-a6cd-5c1a-f2f9-4d72765980c9.png)

すると、``フォルダーを開く``と異なり、2つのフォルダーが``未設定(ワークスペース)``という``ワークスペース``に括り付けられ、両方のフォルダーが参照できるようになる。

``ワークスペース``とは複数のフォルダーを参照している領域のことであり、``ワークスペースの保存``をすると、どのフォルダを開いていたかを保存・呼び出しすることができる。

## ファイルを作成/編集する

編集したいファイルがエクスプローラーに存在すればそのままクリックすれば良い。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/4d75eef0-3837-4005-a5e5-381810460d7a.png)

新たに作成する場合は、作成する場所(フォルダー)を選択して``右クリック > {新しいファイル|新しいフォルダー}``を押下すれば良い。
ちなみに、エクスプローラー上でいずれかのファイルを``Ctrl``キーを押下しながらドラッグ&ドロップすると簡単にファイルがコピーできる。

# 日本語化

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259373/9a0e0fb5-e5a1-888b-9c9a-6e98714db659.png)

1. アクティビティーバーから「Japanese Language Pack for Visual Studio Code」を検索してインストールする。
2. インストール完了後、画面右下に通知バルーンが表示され「Restart Now」のボタンがあるので押下。
3. 再起動後、言語が日本語になっていることを確認する。