LoginSignup
5
3

More than 1 year has passed since last update.

@mttk030

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

Last updated at Posted at 2021-07-12

概要

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

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

1. WSL導入

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

ⅰ. [WSLの準備コマンド(Ubuntu)]を実行する

[スタートボタンを右クリック] -> [A] -> [管理者用Powershellに以下をコピペ & 実行] -> [コマンドの実行が終了後、再起動]

wsl --install

ⅱ. [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' >> ~/.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' >> ~/.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再起動]
vscode_install_config.png

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

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

参考記事

5
3
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
3