VS Code+WSLで簡単ぷろぐらみんぐ用Linux環境構築☆だもん！

# まえがき
最近Microsoft公式さんがVS Codeにつよつよ拡張機能をリリースしてくれた．その名は ***†Remote Development†*** …
これはあの大人気つよつよIDEのVS Codeから直接SSHや，Dockerコンテナ，さらにWSLに接続して開発できるだけでなく，接続先にVS Codeの拡張機能をインストールして使えるというやつだ！

今回はそんなつよつよ拡張機能のひとつ，**Remote-WSL**を利用してラクラク環境構築すりゅよ

# この記事を書こうと思った経緯
弊高専のとある学科の2,3年生が授業で扱うC言語の環境を作るため，WindowsのPCにVirtualBoxなどを使って何人かと協力して頑張ってる姿を何度も見てオタク悲しくなった

## 想定環境
OS: Windows10
User: 人間

# そもそもWSL is 何
- WSLとは"Windows Subsystem for Linux"の略
- WSLによりLinuxディストリビューションが実行できる
- 何ができるのか一言で表すと「窓でbashが使える！」

詳しい仕組みとかは以下の記事などが参考になるかと思います
[Windows Subsystem for Linuxとは？ そのインストールと使い方 - Build Insider](https://www.buildinsider.net/enterprise/wsl/01)

# WSLの何が良いのか（07/04追記）
### 導入が楽！
普通にVirtualBoxでUbuntuをインストールすると数十分かかるのがWSLだとほんの数分で終わる
初期設定も主にユーザ名とパスワードを設定するだけ
パーティションやら，初学者には難しい設定も必要ない！

### 起動がはやい！
普通ならOSを起動する必要があり数十秒かかるがWSLは秒で起動する

### Windows上のファイルにも直接アクセス可能！
普通，ホストOSーゲストOS間で同じ場所のファイルを共有するなら別途アプリが必要


ほかにもVS CodeもWSLもMicrosoft公式のもので互換性も良きだしメモリの割り当てなども惜しまずに済んだり……
とにかく推せる
> 参考
[WSL vs VM for 開発作業](https://qiita.com/satoru_takeuchi/items/a54812806bba0eb48f02)
[Bash on Ubuntu on Windows (on Mac) つかってみた。](https://qiita.com/fumihumi/items/066eea775956c8fc31c9)


---
つまりこのWSLとVS Codeを組み合わせると比較的簡単にWindows上でLinuxの開発環境がつくれちゃうわけでちゅね

# 早速環境をつくってみよう！
1. [こちら](https://qiita.com/Aruneko/items/c79810b0b015bebf30bb#%E3%82%B9%E3%83%88%E3%82%A2%E3%81%8B%E3%82%89wsl%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)の記事を参考にWSLをインストール&初期設定（ユーザ名とパスワードの設定）
2. VS Codeを[公式サイト](https://code.visualstudio.com/Download)からDL&インストール
3. VS Codeで拡張機能**"Remote Development"**をインストール

おわり

ほかに必要なものは`$ apt install`とかで適宜インストールを

# VS Code上でWSLに接続してみよう（9/24追記）
1. VS Codeを起動
2. 左下の`><`みたいなマークのところをクリックし，出てきたポップアップの中から`Remote-WSL: New Window`を選択
3. 新しいVS Codeのウィンドウが開き，`Starting VS Code in WSL`と通知が来るので，それが消えるまで待つとWSLへの接続が完了する
4. 「ファイル」→「フォルダーを開く...」から任意のフォルダ（デフォルトはユーザのホームディレクトリ）を選択し`OK`を押す

この4ステップでVS CodeからWSL上で開発する準備完了！

# とりあえずC言語のプログラミング環境を整えよう（9/24追記）
`Ctrl + @`でターミナルを開けます
ここで`$ sudo apt install gcc`と打って実行するとパスワードが求められた後gccコンパイラのDL&インストールが始まります

終わり！ｗ

Microsoft公式の拡張機能「**C/C++**」を入れるところまでできたら完璧

# VS Codeの使い方（07/04追記）
以下におすすめの記事をいくつか置いときます
>
- [【今日から携わる】はじめてのVisual Studio Code入門（オススメの設定・プラグイン・使い方）](https://qiita.com/abeno/items/6366bfe1ea8e5f6ee07c)
- [Visual Studio Codeを使用したC言語学習の準備](https://qiita.com/N_Matsukiyo/items/464594d1fd3e6ef576a4)
- [VS Code の便利なショートカットキー](https://qiita.com/12345/items/64f4372fbca041e949d0)

とりあえず拡張機能の入れ方、ファイルのつくり方，ターミナルの開き方を知っていれば問題ないかと思います

# より良い環境にするために
これでとりあえず環境はできましたがこのままじゃちょっと物足りませんよね
せっかくなのでもっと開発が楽しくなるよういろいろいじって自分好みにしちゃいましょう！

##いろんな拡張機能を入れて一瞬でつよつよエディタに
以下の記事におすすめの拡張機能がたくさんです！
>[開発が捗る Visual Studio Code 拡張機能](https://qiita.com/Yuta_Yamamoto/items/fbeb7b31173b3e787fc2)

個人的におすすめは「Bracket Pair Colorizer」「Code Runner」「indent-rainbow」「Trailing Spaces」「Visual Studio IntelliCode」「GitLens」「Git History」です！

## bashrcをいじってコマンド入力を楽に
ユーザのホームディレクトリ下に`.bashrc`というファイルがあるかと思います
ここでエイリアスの設定などを書き込めます（コマンドに好きな別名をつけれる）
以下に一例として私の設定の一部を載せておきます

```shell
# enable -i by default
alias rm='rm -i'
alias cp='cp -i'
alias mv='mv -i'

# some more ls aliases
alias ls='ls -F --color=auto'
alias ll='ls -alF'
alias la='ls -A'
alias l='ls -CF'

#
alias cat='cat -n'
alias bk='cd ..'

# for git
alias gs='git status'
alias gd='git diff'
alias gc='git commit'
#push='push -f'
```

うっかり`$ sudo rm -rf /`して死なないように`alias rm='rm -i'`は~~絶対~~設定しておきましょう

bashrcに書き込んで保存した段階ではまだ設定が有効化されてないので、書き終えたらターミナルで`source ~/.bashrc`と打ってEnterしましょう
これでbashrcが読み込まれて設定したエイリアスが使えるようになります！

## いつでもキュアピースとじゃんけん！
>[Cureutilsを使ったプリティでキュアキュアなターミナルライフの実現 - Qiita](https://qiita.com/greymd/items/666a26459aa1bd4cb06c)

↑こちらの記事に導入方法・実行・実行結果例がまとめてあります．幸せになれます

### 補足
VSCodeからWSLに接続すると自動でlocaleがja_JPになるようで
これをありがたいと思えるかはちょっと微妙…

# おわりに
間違ってるところや説明不十分なところなどあればどしどしコメントお願いします！
女児アニメの沼にはまって抜け出せないオジ☆チャンの一人より