自分なりの開発環境構築手順です。マシンがバグって構築しなおすことが頻発したので備忘録をまとめておく。
ちなみに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