俺の環境構築

自分なりの開発環境構築手順です。マシンがバグって構築しなおすことが頻発したので備忘録をまとめておく。
ちなみにOSはWindowsで開発環境自体はWSL2でUbuntuに構築している。

## Windows Terminalの設定
みやすいようにFontやテーマをカスタマイズ。

```json
{
  "guid": "{...}",
  "hidden": false,
  "name": "Ubuntu-20.04",
  "source": "Windows.Terminal.Wsl",
  "colorScheme": "Solarized Dark",
  "commandline": "wsl.exe ~ -d Ubuntu-20.04",
  "cursorShape": "filledBox",
  "fontFace": "Hack NF"
}
```

## git
gitをインストール。

```bash
sudo apt install git-all
```

GitHubのSSHキーを作成・登録

```bash
ssh-keygen -t ed25519 -C "mymail@example.com"
eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519
```
[GitHubの設定ページ](https://github.com/settings/keys)で公開鍵を登録。

## ZSH
CLIはZSH派。[oh-my-zsh](https://github.com/ohmyzsh/ohmyzsh)を入れて若干のカスタマイズを設定する。

```bash
sudo apt-get install zsh
wget https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh
sh install.sh
```
```zsh:~/.zshrc
bindkey -v
plugins=(git dokcer docker-compose)
ZSH_THEME="agnoster"
AGNOSTER_PROMPT_SEGMENTS=("prompt_dir" "prompt_git")
alias dcb='docker compose build'
alias dcu='docker compose up'
alias dcd='docker compose down'
alias dcr='docker compose run'
alias dce='docker compose exec'
alias dcrs='docker compose restart'
DEFAULT_USER=$USER
```

## tmux
最近はWindows Terminalのタブや画面分割でも十分な気もしているが、使い慣れているので一応入れておく。
これもいい感じのconfigを公開してくれている人がいるのでありがたく使わせてもらう。

```zsh
sudo apt install tmux
cd
git clone https://github.com/gpakosz/.tmux.git
ln -s -f .tmux/.tmux.conf
cp .tmux/.tmux.conf.local .
```
Vimっぽいバインドにカスタマイズ。

```conf
bind h select-pane -L
bind j select-pane -D
bind k select-pane -U
bind l select-pane -R

bind -r H resize-pane -L 5
bind -r J resize-pane -D 5
bind -r K resize-pane -U 5
bind -r L resize-pane -R 5

setw -g mode-keys vi
bind -T copy-mode-vi v send -X begin-selection
bind -T copy-mode-vi y send -X copy-selection
```

## VIM
エディタはVim。MacとWindows併用せざるを得ない時期があったのでOSに関係なくキーバインド統一したかった。
[awesome vimrc](https://github.com/amix/vimrc)を入れて、これも若干のカスタマイズを設定する。

```zsh
git clone --depth=1 https://github.com/amix/vimrc.git ~/.vim_runtime
sh ~/.vim_runtime/install_awesome_vimrc.sh
```

```vim:~/.vim_runtime/my_configs.vim
" 1 tab == 2 spaces
set shiftwidth=2
set tabstop=2

" show nerdtree on left hand side
let g:NERDTreeWinPos = "left"

" show absolute line numbers
set number

" run prettier on save
let g:prettier#autoformat = 1

syntax enable
set background=dark
let g:sonokai_enable_italic = 1
colorscheme solarized

au FileType javascript set foldlevelstart=99
au FileType javascript set nofoldenable
""""""""""""""""""""""""""""""
" => TypeScript section
"""""""""""""""""""""""""""""""
function! JavaScriptFold() 
    setl foldmethod=syntax
    setl foldlevelstart=1
    syn region foldBraces start=/{/ end=/}/ transparent fold keepend extend

    function! FoldText()
        return substitute(getline(v:foldstart), '{.*', '{...}', '')
    endfunction
    setl foldtext=FoldText()
endfunction

au FileType typescript call JavaScriptFold()
au FileType typescript setl fen
au FileType typescript setl nocindent
au FileType typescript set foldlevelstart=99
au FileType typescript set nofoldenable

au FileType typescript imap <C-t> console.log()<esc>i

au FileType typescript inoremap <buffer> $r return 

""""""""""""""""""""""""""""""
" => Vue section
"""""""""""""""""""""""""""""""
au FileType vue call JavaScriptFold()
au FileType vue setl fen
au FileType vue setl nocindent
au FileType vue set foldlevelstart=99
au FileType vue set nofoldenable

au FileType vue imap <C-t> console.log()<esc>i

au FileType vue inoremap <buffer> $r return 

""""""""""""""""""""""""""""""
" => React section
"""""""""""""""""""""""""""""""
au FileType typescriptreact call JavaScriptFold()
au FileType typescriptreact setl fen
au FileType typescriptreact setl nocindent
au FileType typescriptreact set foldlevelstart=99
au FileType typescriptreact set nofoldenable

au FileType typescriptreact imap <C-t> console.log()<esc>i

au FileType typescriptreact inoremap <buffer> $r return 
```

pluginをいくつか追加する。
cocはTypescriptのコード補完をVSCode並みに気持ちよくしてくれる。
vim-jsx-typescriptはTSXのシンタックスハイライト。
nerdcommenterはコメントアウトのキーバインド

```zsh
cd ~/.vim_runtime/my_plugins
git clone git@github.com:neoclide/coc.nvim.git
git clone git@github.com:peitalin/vim-jsx-typescript.git
git clone git@github.com:preservim/nerdcommenter.git
git clone git@github.com:posva/vim-vue.git
```

```
:CocInstall coc-tsserver
:CocInstall coc-vetur
```



## NVM
NVMでnodeをインストール

```zsh
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
```

```zsh:.zshrc
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
```

```zsh
nvm install node
npm install -g yarn
```