WindowsPCの開発環境(WSL+Docker+VSCode)構築手順

# 概要
WindowsPCの新調やクリーンインストールをした際に
開発環境をセットアップするための忘備録。 (2021/10/26時点)



# 0. Windows Updateを最新の状態にしておく



# 1. WSL導入
[公式ガイド](https://docs.microsoft.com/ja-jp/windows/wsl/install)を参考に以下手順を実施する。



## ⅰ. [WSLの準備コマンド(Ubuntu)]を実行する
[スタートボタンを右クリック] -> [`A`] -> [管理者用Powershellに以下をコピペ & 実行] -> [コマンドの実行が終了後、再起動]

``` powershell
wsl --install
```


## ⅱ. [Ubuntu]の準備をする
[再起動後、Ubuntuの準備が終了するまで待機] -> [ユーザ名 & パスワードを登録]
※ 初回起動時のみ、時間がかかる。



# 1. Windows Terminalをインストール & 設定
[[Windows Terminal](https://www.microsoft.com/ja-jp/p/windows-terminal/9n0dx20hk701)を入手] -> [新たに出現したウィンドウを閉じる] 
-> [起動] -> [`Ctrl + ,`] -> [以下の設定を行う]

- スタートアップ
  - 規定のプロファイル -> `Ubuntu`
- Ubuntu
  - ディレクトリの開始 -> `\\wsl$\Ubuntu\home\******(ユーザ名)`



# 2. Ubuntuの環境整備を行う
上記設定を行った Windows Terminal を再起動し、以下コマンドを順に実行する。
## ⅰ. apt
### ① パッケージ一覧の更新

``` bash
sudo apt -y update
```


### ② パッケージの更新

``` bash
sudo apt -y upgrade
```


### ③ クリップボードコマンド

``` bash
sudo apt -y install xsel
```


### ④ zip解凍コマンド

``` bash
sudo apt -y install unzip
```


### ⑤ プログラム管理コマンド

``` bash
sudo apt -y install make
```



## ⅱ. home
### ① ログイン時の出力メッセージ省略のためのファイル

``` bash
touch ~/.hushlogin
```


### ② ドキュメント置場(document)

``` bash
mkdir ~/doc
```


### ③ 物置(miscellaneous)

``` bash
mkdir ~/mis
```


### ④ ソースコード置場(source)

``` bash
mkdir ~/src
```



## ⅲ. bashrc
### ① bash起動時に読み込まれる設定

``` bash
cat << 'EOS' >> ~/.bashrc

# Add by yourself.
alias lsa='ls -la'
alias pbcopy='clip.exe'
alias duc='du -hd 1 | sort -h'
alias docker-start='docker start $(docker ps -aq)'
alias docker-stop='docker stop $(docker ps -aq)'
alias docker-rm='docker rm $(docker ps -aq)'
alias docker-rmi='docker rmi -f $(docker images -aq)'
alias docker-rmv='docker volume rm $(docker volume ls -q)'

eval `ssh-agent` > /dev/null

EOS
```


### ② 上記設定の即時適用

``` bash
source ~/.bashrc
```



## ⅳ. Git
### ① Gitで使用されるユーザ名

``` bash
git config --global user.name "******(ユーザ名)"
```


### ② Gitで使用されるメールアドレス

``` bash
git config --global user.email ******(メールアドレス)
```


### ③ GitHubなどとやりとりするのに必要なssh鍵

``` bash
ssh-keygen -t rsa -b 4096 -C "******(ssh鍵の名称)"
```

- 上記コマンド実行後、以下の質問に答える。
  - `Enter file in which to save the key (/home/******(ユーザ名)/.ssh/id_rsa):`  
    -> そのままEnter
  - `Enter passphrase (empty for no passphrase):`  
    -> ssh鍵のパスフレーズを入力
  - `Enter same passphrase again:`  
    -> もう一度同じパスフレーズを入力

### ④ GitHubなどへssh接続する際に使用されるconfig

``` bash
cat << 'EOS' >> ~/.ssh/config
Host *
  AddKeysToAgent yes
EOS
```

※ 上記configによって、ssh接続する度に求められるパスフレーズが初回のみとなる。

### ⑤ ssh公開鍵をクリップボードへコピー

``` bash
cat ~/.ssh/id_rsa.pub | pbcopy
```


### ⑥ GitHubなどに公開鍵登録



# 3. Dockerをインストール
[[ここ](https://www.docker.com/get-started)から `Docker Desktop for Windows` をDL] -> [実行] -> [インストール設定はデフォルト]



# 4. Visual Studio Code(VSCode)をインストール
[[ここ](https://code.visualstudio.com/download)からWindows版をDL] -> [実行] 
-> [以下画像のインストール設定以外はデフォルト] -> [PC再起動]
![vscode_install_config.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645714/baaac4c1-7afc-ed1a-d3e9-eecd413c536e.png)



# 5. Visual Studio Codeの拡張機能をインストール
拡張機能に関しては、個々人によって導入するものが違うので
私が導入している拡張機能について簡単に紹介する。
## ⅰ.視認性向上
- [Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)
  - UIの日本語化。
- [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)
  - ファイル形式がアイコンで見やすくなる。
- [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
  - 対となる括弧同士(),[],{} に同じ色を付与して見やすくする。
- [Output Colorizer](https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer)
  - プログラム実行した際の出力や、ログファイルを見やすくする。
- [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)
  - envファイル(Laravelなど)を見やすくする。
- [Rainbow CSV](https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv)
  - csvファイルを見やすくする。
- [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
  - インデントを見やすくする。


## ⅱ.コーディングサポート
- [Json Editor](https://marketplace.visualstudio.com/items?itemName=nickdemayo.vscode-json-editor)
  - jsonファイルの編集がしやすくなる。
- [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)
  - markdownファイルの編集がしやすくなる。
- [Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python)
  - Pythonのコーディングがしやすくなる。
- [Python Docstring Generator](https://marketplace.visualstudio.com/items?itemName=njpwerner.autodocstring)
  - Pythonのdocstring(関数の仕様説明)が書きやすくなる。
- [PHP Intelephense](https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client)
  - PHPのコーディングがしやすくなる。
- [PHP DocBlocker](https://marketplace.visualstudio.com/items?itemName=neilbrayfield.php-docblocker)
  - PHPのDockBlock(関数の仕様説明)が書きやすくなる。
- [change-case](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case)
  - キャメルケースやスネークケースへの書式変換がしやすくなる。
- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
  - コード上で、ファイルパスの入力補完が効くようになる。
- [zenkaku](https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku)
  - 全角スペースを見やすくする。


## ⅲ.その他
- [Remote - WSL](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl)
  - WSL上のファイルをVSCodeで開くことができる。
- [Remote - Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
  - Docker上のファイルをVSCodeで開くことができる。
- [Remote - SSH](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh)
  - ssh接続先のファイルをVSCodeで開くことができる。
- [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker)
  - VSCode上でDockerが扱いやすくなる。
- [GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
  - VSCode上でGitが扱いやすくなる。
- [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)
  - Gitのコミット履歴が見やすくなる。
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)
  - ペアプログラミングがリモートで可能になる。
- [Draw.io Integration](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio)
  - 作図ツールのDraw.ioをVSCodeで使えるようにする。
- [Partial Diff](https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff)
  - ファイル差分を比較する右クリックメニューが追加される。
- [Edit csv](https://marketplace.visualstudio.com/items?itemName=janisdd.vscode-edit-csv)
  - csvファイルをExcelのように編集できる。





上記の拡張機能については、以下コマンドをWSL上で実行することで
一気にインストールすることが可能。

``` bash
code --install-extension MS-CEINTL.vscode-language-pack-ja &&\
code --install-extension vscode-icons-team.vscode-icons &&\
code --install-extension CoenraadS.bracket-pair-colorizer-2 &&\
code --install-extension IBM.output-colorizer &&\
code --install-extension mikestead.dotenv &&\
code --install-extension mechatroner.rainbow-csv &&\
code --install-extension oderwat.indent-rainbow &&\

code --install-extension nickdemayo.vscode-json-editor &&\
code --install-extension yzhang.markdown-all-in-one &&\
code --install-extension ms-python.python &&\
code --install-extension njpwerner.autodocstring &&\
code --install-extension bmewburn.vscode-intelephense-client &&\
code --install-extension neilbrayfield.php-docblocker &&\
code --install-extension wmaurer.change-case &&\
code --install-extension christian-kohler.path-intellisense &&\
code --install-extension mosapride.zenkaku &&\

code --install-extension ms-vscode-remote.remote-wsl &&\
code --install-extension ms-vscode-remote.remote-containers &&\
code --install-extension ms-vscode-remote.remote-ssh &&\
code --install-extension ms-azuretools.vscode-docker &&\
code --install-extension eamodio.gitlens &&\
code --install-extension mhutchie.git-graph &&\
code --install-extension ms-vsliveshare.vsliveshare &&\
code --install-extension hediet.vscode-drawio &&\
code --install-extension ryu1kn.partial-diff &&\
code --install-extension janisdd.vscode-edit-csv
```




# 補足
- bashrcに追加したaliasコマンドについて
  - `lsa`  
    -> カレントディレクトリの中身を全一覧(隠しファイルも含む)表示する。
  - `pbcopy`  
    -> 出力をクリップボードに保存する。  
    　 `cat ******(ファイル名) | pbcopy`といったように使う。
  - `duc`  
    -> カレントディレクトリの各ファイル & 各ディレクトリ容量を、昇順で一覧表示する。
  - `docker-stop`  
    ->現在起動中のDockerコンテナを例外なくすべて停止する。
  - `docker-rm`  
    ->現在停止中のDockerコンテナを例外なくすべて削除する。
  - `docker-rmi`  
    ->Dockerイメージを例外なくすべて削除する。
  - `docker-rmv`  
    ->Dockerボリュームを例外なくすべて削除する。

- 非常に助けられた先人の知恵
  - [よく使うLinuxコマンド](https://qiita.com/arene-calix/items/41d8d4ba572f1d652727)
  - [VS Code の便利なショートカットキー](https://qiita.com/12345/items/64f4372fbca041e949d0)
  - [Docker ドキュメント日本語化プロジェクト](https://docs.docker.jp/index.html)



# 参考記事
- [aptコマンドチートシート](https://qiita.com/SUZUKI_Masaya/items/1fd9489e631c78e5b007)
- [コマンドでDockerコンテナを停止・削除、イメージの削除をする](https://qiita.com/shisama/items/48e2eaf1dc356568b0d7)
- [du -h -d 1 | sort -h が優勝](https://qiita.com/yugo-yamamoto/items/18939d7cc382b518572b)
- [ssh agentをパスフレーズ省略に応用する方法まとめ](https://qiita.com/onokatio/items/397a5899a0ec16c7e60a)
- [Macのpbcopyをubuntuでも使う](https://qiita.com/yoshikyoto/items/1676b925580717c0a443)