LoginSignup
24
37

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@hirano00o(Yudai Hiranuma)inインフラ勉強会

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

Posted at

はじめに

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

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

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

目次

  1. WSL有効化の前に、InsiderProgramを開始
  2. WSL有効化
  3. Ubuntuのインストール
  4. Docker Desktop WSL 2 Tech Preview のインストール
  5. フォントのインストール
  6. Hyperの設定
  7. Ubuntuの初期構築
    8. コンフィグ系 - 参考
  8. Hyper問題点
  9. その他
    10. keypirinha
    11. Chrome拡張
    12. WindowsApp

WSL有効化の前に、InsiderProgramを開始

今回WSL2を利用したいので、InsiderProgramを有効化しておきます
設定 -> 更新とセキュリティ -> Windows Insider Program から「開始」を選択します
wsl003.png

途中出てくるInsiderの設定は、「ファスト」を選択します
wsl004.png

設定完了後、再起動します
再起動後は、先程の 更新とセキュリティ -> Windows Update から更新を確認し、アップデート&再起動します
wsl006.png

更新を確認してもInsider Previewのアップデートが出てこない場合は、フィードバックの設定が低い可能性があります
設定 -> プライバシー -> 診断&フィードバック -> 診断データを表示する をオンにします
そして再度Windows Updateの更新を確認してみてください
wsl005.png

WSL有効化

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

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

を選択し、OKを押して有効化します
Hyper-Vは、Dockerを使いたいので、ついでに有効化しておきます
wsl001.png
wsl002.png

WSL2を利用するため、PowershellからWSL2の有効化およびデフォルトにします
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

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

Ubuntuのインストール

Microsoft StoreからUbuntuを検索し、インストールします
wsl007.png

インストール後は一度起動し、ユーザ名とパスワードを設定しておきます
念の為、WSL2となっているか、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

インストール前に公式ドキュメントの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

起動後 :whale:を右クリックし、WSL 2 Tech Previewを選択、実行します
wsl009.png

フォントのインストール

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

Hyperの設定

Hyper™からWindows版をDownloadしてインストールします
起動後、左上の ≡ -> Edit -> Preferences で.hyper.jsが開き、ここでターミナルの設定をしていきます
自分の .hyper.js を公開しておきますが、まだまだ途上です
設定後は再起動か、左上の ≡ -> View -> Full Reload します

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

参考 : Hyperでイケてるターミナルをつかおう - Qiita

Ubuntuの初期構築

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

# パッケージアップデート, 日本語/ビルド系/絵文字インストール👻
$ 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
Installation | Yarn

Downloads - The Go Programming Language

pyenv/pyenv: Simple Python version management
Common build problems · pyenv/pyenv Wiki

コンフィグ系 - 参考

hirano00o/config
zshのzstyleでの補完時の挙動について - voidy21の日記
LS_COLORSの各項目の意味 - Qiita

[vim] syntasticでESLintを実行して編集しながらクソコードを駆逐する - Qiita
VimでReactの開発を楽々 - Qiita
maksimr/vim-jsbeautify: vim plugin which formated javascript files by js-beautify
Can I install YCM with vim-plug? · Issue #1751 · ycm-core/YouCompleteMe
Using Uncrustify with VIM - Stack Overflow

Hyper問題点

  1. たまに、vimでファイルを編集して閉じたときに、画面に編集していたファイルの内容が残る。
    "Clear" command not clear screen · Issue #2316 · zeit/hyper
  2. vimで日本語のファイルを編集するとき、カーソルを動かすと日本語がずれる。(上下にカーソルを動かすと整列される)
    qiita.gif

その他

keypirinha

Keypirinha — Keypirinha
MacのSpotlightやAlfredのような、ランチャーです
Python製らしく、外部パッケージもあり、自作もできるようです

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

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

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

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

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

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

Chrome拡張

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

WindowsApp

ついでに(ry

24
37
0

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
24
37

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?