windowsへVSCodeをインストール後、CentOS7に接続して色々試す（git連携など）

# summary

VSCodeを初めて導入したい人向けの解説だよ
windows上でvirtual boxやvagrantを使って、仮想環境内でLinuxを起動している人向けの記事だよ

- [windows10にVSCodeをインストール](#vscodeインストール)  
⇒ すぐ終わる
- [windowsから鍵認証方式で仮想環境にssh接続できるよう準備する](#windowsから鍵認証方式で仮想環境にssh接続できるよう準備する)  
⇒ 慣れてない人はちょっと時間かかるかも
- [VSCodeから仮想環境(CentOS7)にssh接続](#vscodeから仮想環境にssh接続)
⇒ めっちゃ辛かった...
    - 拡張インストール
    - ssh-agent有効化
    - .ssh/configの作成
    - ssh接続

- [VSCodeで仮想環境上のソースコードを編集](#仮想環境上のソースコードを編集)  
- [VSCodeのgit連携機能](#git連携)
便利^^
- [VSCode上でターミナル起動](#ターミナル起動)
便利^ワ^

ここまで紹介するよ(`・ω・´)ｷﾘｯ

# versions

| item    | version    |
| :-----  | :--------- |
| windows | 10         |
| VSCode  | 1.36       |
| ~~vscode-remote-workspace~~ ← 使うのやめた | ~~0.42.0~~ |
| Remote Development | 0.15.0 |

# どうしてVSCode?

職場の人たちに、VSCodeを紹介されて、次のようないいことができるらしいと知りました。

windows上のエディタ内で、

- git diffが見れる
- ファイル内検索ができる  
今までは、sshログインして`find . -type f print | xargs grep -n 文字列`とかしてた><


# これまで使っていたエディタ
`SublimeText3`を使っていました。
`Atom`でもgit連携できるけど、ファイル開くたびに遅くてイライラするので、Atomは全力で却下。


# VSCodeインストール

- まずはここにアクセスして、VSCodeのインストーラーをダウンロード
https://code.visualstudio.com/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327407/d60f0b88-0454-af38-e56b-7f69adb457af.png)
`Stable`って安定版のことですよね

- インストーラーはこんな名前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327407/970b4e07-a527-3ea2-71f8-8dc917efd0a9.png)

- そのままインストーラーを起動して、VSCodeインストール
私は一切設定を変えずにインストールしました


# VSCode起動
こんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327407/89a71f24-51b8-f293-ae34-12d2e3b5145c.png)
（どうやって使えばいいのかまだわからないや。。。）(´・ω・`)


# windowsから鍵認証方式で仮想環境にssh接続できるよう準備する

既にできてる人は、このステップは不要

### 仮想環境でssh鍵ファイル生成

この記事を参考にさせていただきました。
[お前らのSSH Keysの作り方は間違っている](https://qiita.com/suthio/items/2760e4cff0e185fe2db9)
（なんて挑戦的なタイトル...）（゜д゜;）

```bash
$ ssh-keygen -t rsa -b 4096 -C "sample@mail.com"
Generating public/private rsa key pair.

# 鍵の保存場所と名前をきめます。今回はhogeという鍵名にしました。
Enter file in which to save the key (/home/user_name/.ssh/id_rsa): /home/user_name/lab/hoge

# passphraseの入力はご自由に。
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /home/user_name/lab/hoge.
Your public key has been saved in /home/user_name/lab/hoge.pub.
The key fingerprint is:
SHA256:................................ user_name@localhost.localdomain
The key's randomart image is:
+---[RSA 4096]----+
|                 |
|                 |
|                 |
|                 |
|                 |
|                 |
|                 |
|                 |
|                 |
+----[SHA256]-----+'

$ ll | grep hoge
-rw-------.  1 user_name user_name 3243  7月 21 17:02 hoge
-rw-r--r--.  1 user_name user_name  754  7月 21 17:02 hoge.pub
```
まず`*.pub`とついている方のファイル（公開鍵）を、仮想環境の`/home/user_name/.ssh/authorized_keys`に移動する。

```bash
$ mv hoge.pub /home/user_name/.ssh/authorized_keys

# 権限も変えておこう
$ sudo chmod 600 /home/user_name/.ssh/authorized_keys
```
次に、`.pub`がついてない方の鍵（秘密鍵）をwindowsのローカルディレクトリに移動させる。
秘密鍵は決して人に渡してはならない鍵、そして、よく無くしやすいものなので、保存場所は慎重に選ぼう>_<;

この鍵でsshログインできるかは一度試しておこう。
こんな感じで....
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327407/8af2a173-a18a-4dcf-0d78-44100d9992ea.png)



# VSCodeから仮想環境にssh接続
### 前提

- windowsから、仮想環境に対して`鍵認証方式`でsshログインできること  
teratermとかでログインできればOK

具体的な方法は、ほぼこちらの記事をパクらせていただきました！
[VSCodeのRemote Developmentを使ってみる](https://qiita.com/HoriThe3rd/items/b2f6c440f096106cf89e)

### 拡張インストール

`Remote Development`という拡張を次のようにインストールする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327407/e7f7db58-7012-c932-eef7-c169869e28e9.png)

②の入力を行うと、下に`Remote Development`と書かれたブロックが出現するので、その中の緑色の`install`ボタンをクリック
（上記画像はクリック後の状態のため、既にボタンがない...）

### sshエージェントの有効化

windowsの人は必要...
細かいことはここ↓に書いてあるので、気になる人は見てみてね。
[Visual Studio Code: Setting up the SSH Agent](https://code.visualstudio.com/docs/remote/troubleshooting#_setting-up-the-ssh-agent)

まずpowershellを管理者権限で起動！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327407/8c7d7bc4-7b5b-e38c-0308-40aa335083e4.png)

そして、以下のコマンドを入力すると`ssh-agent`が有効になる

```bash
Set-Service ssh-agent -StartupType Automatic
Start-Service ssh-agent
Get-Service ssh-agent
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327407/7c7a71d1-2396-314a-78ee-e04f37ab8e26.png)
これでOK

### .ssh/config の作成
ここは以下の画像の通りに操作を....
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327407/d02f715f-f48f-71a2-9a77-5307ec80fd58.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327407/60ae7617-29aa-4c73-738c-dcb2d9e2136f.png)

- configファイルへの入力内容
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327407/3dfe840a-4896-f61f-2e42-f60255b1d37e.png)
**※注意**  
    - `Host`に `hoge@localhost` や `hoge@xxx.xxx.xxx.xxx` などと指定すると、なぜかそれ以下の記述が読み込まれなかった
    - たとえば、、、
        - `User user_name` と指定しているにも関わらず、Host に記載した`@`以前の部分の名前(今回は`hoge`)でログインしようとする挙動が見られました
    - 他にも以下の暴挙が見られました><
        - `Port xxxxx` って指定してるのに 22 番portでログインしようとする
        - `IdentityFile` を指定しているのにpassword認証でログインしようとする  
    - というわけで、`Host`には`@`マークを使わないようにしましょう（反例があれば教えて下さい）

というわけで、こんな感じにしました。

```bash
# Read more about SSH config files: https://linux.die.net/man/5/ssh_config
Host localserver # @マークは使用しないこと
    HostName localhost
    User user_name
    IdentityFile ~/.ssh/sshkey_for_vs_private # 秘密鍵を設置した場所
    # IdentityFile C:\Users\PCUser\.ssh\sshkey_for_vs_private # ←ダメな書き方
    Port 22 # sshログインに使用するport番号
```

### ついに接続

①、②の順にクリックするだけ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327407/af828b5c-7167-bc2e-c94e-7763d41edbd2.png)

次は、①②③でディレクトリを開くことができる^^
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327407/9efe2740-fddb-609b-0a0b-d4d94a03fe70.png)

これだけで10時間くらいはかかりました。。。
初めての調査ってなんでも辛い...＞＜


# こらむ（search機能）

ちょっとしか触ってないけど、この`search`機能が非常に使いやすい！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327407/3a2c76ed-84b6-d258-1210-cb74fd3a9b75.png)
ディレクトリ内の全文検索をする際、今まではteratermでログインして、いちいち
`$ find dir_path -type f -print | xargs grep -n 検索したい文字列`
していたけれど、もうこんな作業からはおさらばじゃ...！

# 仮想環境上のソースコードを編集
ちょっとソースコードに変更を加えて保存したら、こんなマークがつきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327407/bb134a7a-12a8-c70c-5c76-9a816a9728fb.png)

- gitのアイコン上
- 変更が加わっているディレクトリ名の横
- 変更を加えたファイル名の横

の3箇所ですね。

# git連携

そしてそして、gitのアイコンをクリックし、更に、変更済みのファイル名をクリックすると...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327407/fbeb7624-819e-1639-4039-868ba47ef1b7.png)
ソースコードの変更差分（git diff）をVSCode上で確認できるんですね！
超便利！>▽<

ちなみに、ファイル名の右にある3つのアイコンは、左から順に

- ファイルを開く
- 変更差分を元に戻す  
※誤操作注意
- git add する

という機能になっています。
クリックするだけで差分をキャンセルしたり、`git add`できるのは便利すぎる。

# ターミナル起動

以下の画像の通りに操作すればターミナルも起動できるんだな...( ˘ω˘ )

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327407/6a5f8b69-d298-0c32-1cf0-cf1f5add31f6.png)

ほれ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327407/938f0c81-7f1e-29d2-09e2-4142017b06bf.png)

これなら`commit`や`push`もできるので、 
これでもう、VSCodeだけで大体何でもできちゃいますね！

# 参考資料

- VSCodeそのものについて
[【ゼロから！】Visual Studio Codeのインストールと使い方](https://eng-entrance.com/texteditor-vscode#5Git)

- VSCodeから仮想環境へのアクセス方法
[VSCodeのRemote Developmentを使ってみる](https://qiita.com/HoriThe3rd/items/b2f6c440f096106cf89e)

# オススメ関連記事

- VSCodeの見やすさ改善  
[インストールするだけでVSCodeをカッコよくする拡張4つ](https://qiita.com/ksakiyama134/items/8ca98295897dc1280644)  

この記事で紹介されている`Bracket Pair Colorizer`は１と２がある。
１と２の違いについては[こちらの記事](https://loumo.jp/wp/archive/20190603120015/)に情報があり、どうやら２の方が素早く正確とのこと。
２はβ版だけれど、私は２を使うことにした。どっちがいいかはよくわかってない...

- Syntax Highlighter
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327407/d5b5cf60-5ac3-6c1e-fa73-8501b195a341.png)
結構たくさんあって選び放題！(((o(*ﾟ▽ﾟ*)o)))
`One Dark Pro`ってやつは、Atomのデフォルトそっくりのカラーでした。
私は`Duo Tone`が好きなので`Duo Tone Dark Themes`を使っています^^

- 拡張を多数紹介している記事
[The Ultimate VSCode Setup for Front End/JS/React](https://medium.com/productivity-freak/the-ultimate-vscode-setup-for-js-react-6a4f7bd51a2)
英語だけど、すごくいい感じの拡張を紹介してくれている。
@ksakiyama134さんの[記事](https://qiita.com/ksakiyama134/items/8ca98295897dc1280644)に載っていたのだけど、よかったので拡散するために掲載しました。