Zenn
📘

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

2021/07/12に公開
Docker
VS Code
Windows
WSL
tech

概要

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

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

1. WSL導入

公式ガイドを参考に以下手順を実施する。

ⅰ. [Linux 用 Windows サブシステム]を有効にする

[スタートボタンを右クリック] -> [A] -> [管理者用Powershellに以下をコピペ & 実行]

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

ⅱ. [仮想マシン プラットフォーム]を有効にする

[管理者用Powershellに以下をコピペ & 実行] -> [PC再起動]

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

ⅲ. [Linux カーネル更新プログラム パッケージ]をDL & 実行

[ここからDL (ARM64のPCはここからDL)] -> [実行]

※ PCが[x64 or ARM64]を調べるには
[Winキー + R] -> ["cmd"と入力 & Enter] -> [コマンドプロンプトに以下をコピペ & 実行]

systeminfo | find "システムの種類"

ⅳ. WSL2 を既定のバージョンに設定

[スタートボタンを右クリック] -> [I] -> [Powershellに以下をコピペ & 実行]

wsl --set-default-version 2

ⅴ. Ubuntuをインストール

[Ubuntuを入手] -> ["複数のデバイスで使用する"を拒否]
-> [起動] -> [ユーザ名 & パスワードを登録]
※ 初回起動時のみ、時間がかかる。

1. Windows Terminalをインストール & 設定

[Windows Terminalを入手] -> ["複数のデバイスで使用する"を拒否]
-> [起動] -> [Ctrl + ,] -> [以下の設定を行う]

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

2. Ubuntuの環境整備を行う

上記設定を行った Windows Terminal を再起動し、以下コマンドを順に実行する。

ⅰ. apt

① パッケージ一覧の更新

sudo apt -y update

② パッケージの更新

sudo apt -y upgrade

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

sudo apt -y install xsel

④ zip解凍コマンド

sudo apt -y install unzip

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

sudo apt -y install make

ⅱ. home

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

touch ~/.hushlogin

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

mkdir ~/doc

③ 物置(miscellaneous)

mkdir ~/mis

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

mkdir ~/src

ⅲ. bashrc

① bash起動時に読み込まれる設定

cat << 'EOS' | sudo tee -a ~/.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

② 上記設定の即時適用

source ~/.bashrc

ⅳ. Git

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

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

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

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

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

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

cat << 'EOS' | sudo tee -a ~/.ssh/config
Host *
  AddKeysToAgent yes
EOS

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

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

cat ~/.ssh/id_rsa.pub | pbcopy

⑥ GitHubなどに公開鍵登録

3. Dockerをインストール

[ここから Docker Desktop for Windows をDL] -> [実行] -> [インストール設定はデフォルト]

4. Visual Studio Code(VSCode)をインストール

[ここからWindows版をDL] -> [実行]
-> [以下画像のインストール設定以外はデフォルト] -> [PC再起動]

5. Visual Studio Codeの拡張機能をインストール

拡張機能に関しては、個々人によって導入するものが違うので
私が導入している拡張機能について簡単に紹介する。

ⅰ.視認性向上

ⅱ.コーディングサポート

  • Json Editor
    • jsonファイルの編集がしやすくなる。
  • Markdown All in One
    • markdownファイルの編集がしやすくなる。
  • Python
    • Pythonのコーディングがしやすくなる。
  • Python Docstring Generator
    • Pythonのdocstring(関数の仕様説明)が書きやすくなる。
  • PHP Intelephense
    • PHPのコーディングがしやすくなる。
  • PHP DocBlocker
    • PHPのDockBlock(関数の仕様説明)が書きやすくなる。
  • change-case
    • キャメルケースやスネークケースへの書式変換がしやすくなる。
  • Path Intellisense
    • コード上で、ファイルパスの入力補完が効くようになる。
  • zenkaku
    • 全角スペースを見やすくする。

ⅲ.その他

  • Remote - WSL
    • WSL上のファイルをVSCodeで開くことができる。
  • Remote - Containers
    • Docker上のファイルをVSCodeで開くことができる。
  • Remote - SSH
    • ssh接続先のファイルをVSCodeで開くことができる。
  • Docker
    • VSCode上でDockerが扱いやすくなる。
  • GitLens — Git supercharged
    • VSCode上でGitが扱いやすくなる。
  • Git Graph
    • Gitのコミット履歴が見やすくなる。
  • Live Share
    • ペアプログラミングがリモートで可能になる。
  • Draw.io Integration
    • 作図ツールのDraw.ioをVSCodeで使えるようにする。
  • Partial Diff
    • ファイル差分を比較する右クリックメニューが追加される。
  • Edit csv
    • csvファイルをExcelのように編集できる。

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

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ボリュームを例外なくすべて削除する。

  • 非常に助けられた先人の知恵

参考記事

Discussion