俺の環境構築 #Vim

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

Windows Terminalの設定

みやすいようにFontやテーマをカスタマイズ。

{
  "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をインストール。

sudo apt install git-all

GitHubのSSHキーを作成・登録

ssh-keygen -t ed25519 -C "mymail@example.com"
eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519

GitHubの設定ページで公開鍵を登録。

ZSH

CLIはZSH派。oh-my-zshを入れて若干のカスタマイズを設定する。

sudo apt-get install zsh
wget https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh
sh install.sh

~/.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を公開してくれている人がいるのでありがたく使わせてもらう。

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っぽいバインドにカスタマイズ。

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を入れて、これも若干のカスタマイズを設定する。

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

~/.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はコメントアウトのキーバインド

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をインストール

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

.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

nvm install node
npm install -g yarn