Windows機を購入したので開発環境作り(WSL2)

# はじめに
増税前にノートPCを刷新しようと、Thinkpad X395を購入し、先日ようやく届きました
OSはWindows10 Professionalです

1からWindowsを開発機としてセットアップしたので、その備忘録的な感じです

ターミナルは、Cmder等を簡単に試してみた結果、Hyperに決めました
Hyperをベースに、いつも利用している [.tmux.conf](https://github.com/hirano00o/config/blob/master/.tmux.conf) や [.zshrc](https://github.com/hirano00o/config/blob/master/.zshrc) 、 [.vimrc](https://github.com/hirano00o/config/blob/master/.vimrc) の設定を見直しました
MacでいうところのSpotlightやAlfredの代わりには、keypirinhaを利用しています

# 目次
1. [WSL有効化の前に、InsiderProgramを開始](#wsl有効化の前に、insiderprogramを開始)
2. [WSL有効化](#wsl有効化)
3. [Ubuntuのインストール](#ubuntuのインストール)
4. [Docker Desktop WSL 2 Tech Preview のインストール](#docker-desktop-wsl-2-tech-preview-のインストール)
5. [フォントのインストール](#フォントのインストール)
6. [Hyperの設定](#hyperの設定)
7. [Ubuntuの初期構築](#ubuntuの初期構築)
    8. [コンフィグ系 - 参考](#コンフィグ系---参考)
8. [Hyper問題点](#hyper問題点)
9. [その他](#その他)
    10. [keypirinha](#keypirinha)
    11. [Chrome拡張](#chrome拡張)
    12. [WindowsApp](#windowsapp)

# WSL有効化の前に、InsiderProgramを開始
今回WSL2を利用したいので、InsiderProgramを有効化しておきます
 設定 -> 更新とセキュリティ -> Windows Insider Program から「開始」を選択します
![wsl003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14266/104a24fa-21e0-69ee-66ba-cf41767f6c61.png)

途中出てくるInsiderの設定は、「ファスト」を選択します
![wsl004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14266/c3554024-7ab5-884b-2e77-78aa21371679.png)

設定完了後、再起動します
再起動後は、先程の 更新とセキュリティ -> Windows Update から更新を確認し、アップデート&再起動します
![wsl006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14266/a31857ef-59c1-b415-11be-edbc7b62a2b8.png)

更新を確認してもInsider Previewのアップデートが出てこない場合は、フィードバックの設定が低い可能性があります
 設定 -> プライバシー -> 診断&フィードバック -> 診断データを表示する をオンにします
そして再度Windows Updateの更新を確認してみてください
![wsl005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14266/a5497cda-52e9-970b-0570-5ed443e13f2c.png)

# WSL有効化
Winキーを押してメニューが出たところで、適当なキーを押すとアプリケーション等を検索できるウィンドウが出ます
「機能の有効化」と入力し、Windows機能を開き

- Hyper-V
- Windows Subsystem for Linux
- 仮想マシンプラットフォーム

を選択し、OKを押して有効化します
Hyper-Vは、Dockerを使いたいので、ついでに有効化しておきます
![wsl001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14266/0023d49e-a68f-06ab-2dd0-1820732aecce.png)
![wsl002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14266/54625c35-b955-f67b-68e3-b1c91dafab62.png)

WSL2を利用するため、PowershellからWSL2の有効化およびデフォルトにします
Powershellは 管理者として実行 します

```powershell:Powershell
PS C:\WINDOWS\system32> Enable-WindowsOptionalFeature -Online -FeatureName VirtualMachinePlatform
PS C:\WINDOWS\system32> Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
PS C:\WINDOWS\system32> wsl --set-default-version 2
```

[Install WSL 2 | Microsoft Docs](https://docs.microsoft.com/en-us/windows/wsl/wsl2-install)

一旦ここでも再起動しておきます

# Ubuntuのインストール
Microsoft StoreからUbuntuを検索し、インストールします
![wsl007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14266/d3ba72ae-22bb-d92c-ed08-9cd7eff4d8a7.png)

インストール後は一度起動し、ユーザ名とパスワードを設定しておきます
念の為、WSL2となっているか、Powershellから確認します

```powershell:Powershell
PS C:\WINDOWS\system32> wsl -l -v
  NAME      STATE           VERSION
* Ubuntu    Running         2
```
もしなっていなければ`wsl --set-version Ubuntu 2`でWSL2にできます

# Docker Desktop WSL 2 Tech Preview のインストール
公式に従ってインストールします
インストーラは、公式ページ中段のDownloadにリンクがあります
[Docker Desktop WSL 2 Tech Preview | Docker Documentation](https://docs.docker.com/docker-for-windows/wsl-tech-preview/)

インストール前に公式ドキュメントの`Prerequisites`を実行しておきます
既にWSLはv2の状態のはずなので、`wsl -s ubuntu 18.04`だけPowershellで実行しておきます

インストール後は手動で起動します
**注: 起動後に2.1.3へのアップデートダイアログが出ますが、Skip To Buildを選択します。アップデートしてしまうと `WSL 2 Tech Preview` が使えなくなります**
[WSL 2 Tech Preview Not Working with 2.1.3.0 (38275) · Issue #4734 · docker/for-win](https://github.com/docker/for-win/issues/4734)

起動後 :whale:を右クリックし、`WSL 2 Tech Preview`を選択、実行します
![wsl009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14266/85b2621d-9307-92cb-fa07-3165d973206c.png)

# フォントのインストール
探してみてこれがいいかなと思ったので利用させてもらっています
[【文字幅 半角3:全角5 も追加】Ricty を神フォントだと崇める僕が、フリーライセンスのプログラミングフォント「白源」を作った話 - Qiita](https://qiita.com/tawara_/items/374f3ca0a386fab8b305)

# Hyperの設定
[Hyper™](https://hyper.is/)からWindows版をDownloadしてインストールします
起動後、左上の ≡ -> Edit -> Preferences で.hyper.jsが開き、ここでターミナルの設定をしていきます
自分の [.hyper.js](https://gist.github.com/hirano00o/98dddcb9b0043d427debaa7d592c764e) を公開しておきますが、まだまだ途上です
設定後は再起動か、左上の ≡ -> View -> Full Reload します

プラグインとしては、下記を利用しています
tmuxを利用するので、ウィンドウ系のプラグインは使っていません

- [hyper-statusline - npm](https://www.npmjs.com/package/hyper-statusline)
- [hyperlinks - npm](https://www.npmjs.com/package/hyperlinks)
- [hyper-tab-icons-plus - npm](https://www.npmjs.com/package/hyper-tab-icons-plus)
- [hyper-material-theme - npm](https://www.npmjs.com/package/hyper-material-theme)
- [hyper-opacity - npm](https://www.npmjs.com/package/hyper-opacity)

参考 : [Hyperでイケてるターミナルをつかおう - Qiita](https://qiita.com/vimyum/items/44478a51ef3a6f49804f)

# Ubuntuの初期構築
ここからは、普通のMacやLinuxと同じ環境構築です
Dockerが使える以外は初期のUbuntuと同じなので、パッケージのアップデートから始めます

```bash
# パッケージアップデート, 日本語/ビルド系/絵文字インストール👻
$ sudo apt update && sudo apt upgrade
$ sudo apt install language-pack-ja
$ sudo apt install build-essential libssl-dev zlib1g-dev libbz2-dev libreadline-dev libsqlite3-dev llvm libncurses5-dev libncursesw5-dev xz-utils tk-dev libffi-dev liblzma-dev python-openssl
$ sudo apt install fonts-emojione fonts-noto-color-emoji

# gitのデフォルトエディタをvimにする
$ git config --global core.editor vim

# zsh インストール, デフォルトシェル設定
$ sudo apt install zsh
$ chsh -s /usr/bin/zsh
# zshの設定は個々人で自由に
# よければ参考に
# https://github.com/hirano00o/config/blob/master/.zshrc
# https://github.com/hirano00o/config/blob/master/.zshenv

# tmuxの設定
# よければ参考に
# https://github.com/hirano00o/config/blob/master/.tmux.conf

# nodejs, yarn インストール
$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
$ sudo apt-get install -y nodejs
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
$ sudo apt-get update && sudo apt-get install yarn

# 必要であればeslintインストール
$ npm init -y
$ sudo npm i -g eslint 
$ eslint --init

# golang インストール
$ wget https://dl.google.com/go/go1.13.3.linux-amd64.tar.gz
$ sudo tar -C /usr/local/ -zxf go1.13.3.linux-amd64.tar.gz
$ echo 'PATH=$PATH:/usr/local/go/bin' >> ~/.zshenv
$ echo 'GOPATH=~/go' >> ~/.zshenv
$ mkdir ~/go
$ source ~/.zshrc

# pyenv(,pip)インストール
# デフォルトがPython2なので、pyenvでPython3をデフォルトにする
$ git clone https://github.com/pyenv/pyenv.git ~/.pyenv
$ echo 'export PYENV_ROOT=$HOME/.pyenv' >> ~/.zshenv
$ echo 'export PATH=$PATH:$PYENV_ROOT/bin' >> ~/.zshenv
$ echo -e 'if command -v pyenv 1>/dev/null 2>&1; then\n  eval "$(pyenv init -)"\nfi' >> ~/.zshenv
$ exec "$SHELL"
$ export PYTHON_CONFIGURE_OPTS="--enable-shared"
$ pyenv install 3.8.0
$ pyenv global 3.8.0
$ pyenv rehash
## YouCompleteMe用
$ pip install --upgrade pip
$ pip install flake8 autopep8
$ sudo apt install build-essential cmake python3-dev
$ sudo ln -s $HOME/.pyenv/shims/python /usr/bin/python3.8

# vimの設定
# よければ参考に
# https://github.com/hirano00o/config/blob/master/.vimrc
# vim-plugを利用しているので、下記でvim-plugの取得、インストールができます
$ curl -fLo ~/.vim/autoload/plug.vim --create-dirs https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
$ vim +PlugInstall +qall
```

[パッケージマネージャを利用した Node.js のインストール | Node.js](https://nodejs.org/ja/download/package-manager/#debian-and-ubuntu-based-linux-distributions-enterprise-linux-fedora-and-snap-packages)
[Installation | Yarn](https://yarnpkg.com/lang/en/docs/install/#debian-stable)

[Downloads - The Go Programming Language](https://golang.org/dl/)

[pyenv/pyenv: Simple Python version management](https://github.com/pyenv/pyenv)
[Common build problems · pyenv/pyenv Wiki](https://github.com/pyenv/pyenv/wiki/Common-build-problems)

#### コンフィグ系 - 参考
[hirano00o/config](https://github.com/hirano00o/config)
[zshのzstyleでの補完時の挙動について - voidy21の日記](http://voidy21.hatenablog.jp/entry/20090902/1251918174)
[LS_COLORSの各項目の意味 - Qiita](https://qiita.com/aosho235/items/6e4737a1eca11c41da9b)

[[vim] syntasticでESLintを実行して編集しながらクソコードを駆逐する - Qiita](https://qiita.com/Sa2Knight/items/fd9900c56f12f04babcf)
[VimでReactの開発を楽々 - Qiita](https://qiita.com/park-jh/items/b353319efb1823c36c05)
[maksimr/vim-jsbeautify: vim plugin which formated javascript files by js-beautify](https://github.com/maksimr/vim-jsbeautify)
[Can I install YCM with vim-plug? · Issue #1751 · ycm-core/YouCompleteMe](https://github.com/ycm-core/YouCompleteMe/issues/1751)
[Using Uncrustify with VIM - Stack Overflow](https://stackoverflow.com/questions/12374200/using-uncrustify-with-vim/15513829#15513829)

# Hyper問題点
1. たまに、vimでファイルを編集して閉じたときに、画面に編集していたファイルの内容が残る。  
 ["Clear" command not clear screen · Issue #2316 · zeit/hyper](https://github.com/zeit/hyper/issues/2316)
2. vimで日本語のファイルを編集するとき、カーソルを動かすと日本語がずれる。(上下にカーソルを動かすと整列される)
![qiita.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14266/b5c2c2d5-82ca-ee22-b458-a3178ca80de7.gif)


# その他
## keypirinha
[Keypirinha — Keypirinha](https://keypirinha.com/index.html)
MacのSpotlightやAlfredのような、ランチャーです
Python製らしく、外部パッケージもあり、自作もできるようです

インストールVerとポータブルVerがありますが、公式はポータブルVerを推奨しています
私は、`C:\app`を作成し、その下に配置しています

起動後、タスクバーにアイコンが出るので、右クリックのメニューから`Configure Keypirinha`で設定が編集できます
左右に Notepad2 が起動しますが、左がデフォルト(read only)で右にユーザ設定を追記していきます
編集後は、`Reload Configuration`で反映できます
私は下記のような設定を追記しています

```shell:app\Keypirinha\portable\Profile\User\Keypirinha.ini
[app]
launch_at_startup = yes
hotkey_run = Ctrl+Space
[gui]
always_on_top = yes
hide_on_focus_lost = yes
retain_last_search = yes
escape_always_closes = yes

theme = DarkSpotlight
# Dark minimal theme
# t.me/z4ur5d

[theme/DarkSpotlight]
font_face = SF Pro Text, Helvetica, Tahoma, Arial, Segoe UI

font_small_size = 9
font_small_style = cleartype
font_snormal_size = 12
font_snormal_style = cleartype
font_normal_size = 14
font_normal_style = cleartype
font_large_size = 22
font_large_style = cleartype

mono_font_face = Fira Code, Consolas

color_background = #111
color_foreground = #fff
color_faded = #888

color_textbox_back = ${color_background}

color_listitem_back = ${color_background}
color_listitem_title = ${color_foreground}
color_listitem_desc = #555

color_listitem_selected_back = #116dd6
color_listitem_selected_title = ${color_foreground}
color_listitem_selected_desc = #599bd9

opacity_back = 92

layout = list_icon

satellite_pos = topleft
satellite_size = small
```
テーマはこちらから選択できます
[8. Theming — Keypirinha](https://keypirinha.com/theming.html#)

WebSearchやGoogleTranslate等デフォルトでインストールされているパッケージもありますが、物足りないので外部パッケージも入れています
[6. Third-Party Packages — Keypirinha](https://keypirinha.com/contributions.html)
この中からは、下記2つを利用しています

- MyIP   -> ip と打つだけで、ローカルIP、グローバルIPがわかります
- WinSys -> Windowsの各種設定へのショートカットです 例えば`background`で壁紙設定へ移れます

DLした`*.keypirinha-package`ファイルは、`C:\app\Keypirinha\portable\Profile\InstalledPackages`に入れるだけで利用できます

## Chrome拡張
ついでにChromeで利用している拡張機能を挙げておきます

- [cVim](https://chrome.google.com/webstore/detail/cvim/ihlenndgcmojhcghmfjfneahoeklbjjh)  
参考にどうぞ -> [cvimrc](https://gist.github.com/hirano00o/a8ff63c6032a4793ab6682fc4aae3d07)
- [ColorPick Eyedropper](https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg)
- [Bitwarden](https://chrome.google.com/webstore/detail/bitwarden-free-password-m/nngceckbapebfimnlniiiahkandclblb)
- [AutoPagerize](https://chrome.google.com/webstore/detail/autopagerize/igiofjhpmpihnifddepnpngfjhkfenbp)

## WindowsApp
ついでに(ry

- [Download Postman App](https://www.getpostman.com/downloads/)
- [Open Source Password Management Solutions | Bitwarden](https://bitwarden.com/)
- [Google ドライブをダウンロード](https://www.google.com/intl/ja_ALL/drive/download/)
- [「Explzh」エクスプローラー風の圧縮・解凍ソフト - 窓の杜](https://forest.watch.impress.co.jp/library/software/explzh/)
- [Windows | ダウンロード | Slack](https://slack.com/intl/ja-jp/downloads/windows)
- [Discord — ゲーマー向け音声テキストチャット](https://discordapp.com/)
- [Ctrl2cap - Windows Sysinternals | Microsoft Docs](https://docs.microsoft.com/en-us/sysinternals/downloads/ctrl2cap)  
 caps lockをctrlにするやつ. 管理者権限でctrl2cap.exe /installでインストールして再起動
- [ScreenToGif の評価・使い方 - フリーソフト100](https://freesoft-100.com/review/screentogif.html)
- [Google 日本語入力 – Google](https://www.google.co.jp/ime/)
- [karakaram/alt-ime-ahk](https://github.com/karakaram/alt-ime-ahk)  
主にUSキーボードで、スペースキー左右のAltでMacのように半角全角切替