Neovim | WebStorm | VScode를 통해 동일한 파일 작업 수행

이마


이 글은 JetBrains Advent Calendar 2021의 다섯째 날의 글이다.
제가 글을 쓰고 프로그램을 쓸 때 주요 편집자Neovim는 천천히 TypeScriptJavaScriptWebStorm였고 최근VSCode도 조금씩 사용하고 있습니다.
즉, 나는 가능한 한 메인 편집자인 Neovim의 버튼 바인딩에 다른 편집자를 준비하고 싶다.
하지만 너무 맞춤형으로 제작하면 유지보수 비용과 관리도 어려워지기 때문에 적은 설정으로 협조한다는 취지다.
따라서 가능한 한 파일을 여는 동작이 일치하도록 거기에 초점을 맞추어 필기를 남긴다.
편집을 좋아하는 분들에게 참고가 되었으면 좋겠습니다.

Neovim의 경우


나의 Neovim은 여기에 설정되어 있다.
hisasann/neovim: 🍜hisasann's neovim settings🍝
네오비엠의 설정은 나의 기본이고 다른 편집자도 이 설정에 맞췄다.
주로 사용되는 파일은 defx.nvim입니다.
Shougo/defx.nvim: The dark powered file explorer implementation for neovim/Vim8
iTerm2에 파일 폴더, defx를 추가합니다.nvim에서도 많은 작업을 할 겁니다.
또한, 유닛.vim처럼 사용하는 파일은 telescope.nvim입니다.
nvim-telescope/telescope.nvim: Find, Filter, Preview, Pick. All lua, all the time.
나는 파일을 별로 열지 않는다. 파일을 열면 자동으로 닫힌다고 설정한다.

화면 분할


s v

태그 이동


+h- 왼쪽 탭
+h- 오른쪽 탭

화면 분할 후 화면 이동


Ctrl+h- 왼쪽 화면
오른쪽 화면으로 가겠습니다.

파일 보기/숨기기


sf- 표시
q- 숨김

WebStorm


내 웹스토어 설정은 여기 있어.
dotfile/.ideavimrc at master · hisasann/dotfile
WebStorm은 오랜 기간 사용해온 편집 중 하나로 처음 사용했을 때 자바스크립트 전용 IDE 같은 것은 세상에 존재하지 않았다. 그런 상황에서 점프 기능과 인덱스가 뛰어나고 민첩한 동작이 매력적이었다.
지금은 확장이나 이런 건 잘 안 넣어요. 꼭 넣어야 해요ideavim. 이 확장이 있어서 웹스톰을 사용했다고 해도 과언이 아니에요.
JetBrains/ideavim: Vim emulation plugin for IDEs based on the IntelliJ Platform
특히 좋은 것은vim의 유명한 플러그인을 함께 설치해서 사용할 수 있다는 것이다.
그중에서도 지원NERDTree이 컸다.
NERDTree support · JetBrains/ideavim Wiki
사용할 수 있는 플러그인은 다음과 같습니다.
  • vim-easymotion
  • NERDTree
  • vim-surround
  • vim-multiple-cursors
  • vim-commentary
  • argtextobj.vim
  • vim-textobj-entire
  • ReplaceWithRegister
  • vim-exchange
  • vim-highlightedyank
  • vim-paragraph-motion
  • vim-indent-object
  • match.it
  • Emulated plugins · JetBrains/ideavim Wiki
    또한 가장 큰 매력.ideavimrc.vimrc과 같은 기법으로 설정 파일을 쓸 수 있기 때문에vim에 사용되는 설정은 큰 변동이 있을 수 있다.

    .ideavimrc


    필요한 최소한의 한도를 여기에 설정하다.
    이러한 설정은 WebStrom에서 실행됩니다.
    ""---------------------------------------------------------------------------
    " bundle settings {{{
    " webstorm のファイラーを起動
    Plug 'preservim/nerdtree'
    
    Plug 'tpope/vim-surround'
    
    " }}}
    
    "---------------------------------------------------------------------------
    " basic settings {{{
    set nocompatible            " 必ず最初に書く(vi互換コードを解除)
    set viminfo='20,<50,s10,h,! " YankRing用に!を追加
    set shellslash              " Windowsでディレクトリパスの区切り文字に / を使えるようにする
    set lazyredraw              " マクロなどを実行中は描画を中断
    set number        " 行番号を非表示
    set ruler        " ルーラーを表示 (noruler:非表示)
    set cmdheight=2      " コマンドラインの高さ (Windows用gvim使用時はgvimrcを編集すること)
    set laststatus=2    " 常にステータス行を表示 (詳細は:he laststatus)
    " via http://kadoppe.com/archives/2013/09/vimrc-2.html
    set lazyredraw
    set ttyfast
    
    " 折りたたみ関連
    set nofoldenable
    set foldmethod=indent
    set foldopen=all  " fold内に移動すれば自動で開く
    " set foldclose=all  " fold外に移動しfoldlevelより深ければ閉じる
    set foldlevel=1   " 折りたたみの具合
    set foldnestmax=2  " 最大折りたたみ深度$
    set foldcolumn=2  " 左側に折りたたみガイド表示$
    
    " via http://superuser.com/questions/622898/how-to-turn-off-the-bell-sound-in-intellij
    " WebStormのビープ音を消す方法
    set visualbell
    set noerrorbells
    " }}}
    
    "---------------------------------------------------------------------------
    " search settings {{{
    set ignorecase  " 大文字小文字無視
    set smartcase  " 大文字ではじめたら大文字小文字無視しない
    set wrapscan  " 最後まで検索したら先頭へ戻る
    "set nowrapscan  " 検索をファイルの先頭へループしない
    set hlsearch  " 検索文字をハイライト
    set incsearch  " インクリメンタルサーチ
    " }}}
    
    "---------------------------------------------------------------------------
    " tab settings {{{
    set autoindent
    set cindent    " C言語的なインデント
    set expandtab    " タブを空白文字に展開
    set tabstop=2   " タブ文字の幅を設定できます。デフォルトは8です。
    set softtabstop=2   " タブ文字を入力した際にタブ文字の代わりに挿入されるホワイトスペースの量を設定します。
    set shiftwidth=2    " >> 等のコマンドや自動インデントの際に使う1レベル分のインデント量を設定します。
    set shiftround
    set smarttab
    set nowrap
    
    " 保存時にtabをスペースに変換する
    autocmd BufWritePre * :%s/\t/  /ge
    " }}}
    
    "---------------------------------------------------------------------------
    " move settings {{{
    " deleteボタンが遠いんだ!
    nmap <C-H> <BS>
    
    " 0, 9で行頭、行末へ
    nmap 1 ^
    nmap 9 $
    noremap <Space>h  ^
    noremap <Space>l  $
    " }}}
    
    "---------------------------------------------------------------------------
    " Windows  {{{
    " Split window
    nmap ss :split<Return><C-w>w
    nmap sv :vsplit<Return><C-w>w
    " Move window
    nmap <Space> <C-w>w
    map s<left> <C-w>h
    map s<up> <C-w>k
    map s<down> <C-w>j
    map s<right> <C-w>l
    " }}}
    
    "---------------------------------------------------------------------------
    " insert mode settings {{{
    " 挿入モードからコマンドモードに戻るキーバインド
    imap <C-j> <esc>
    " insert mode でjjでesc
    inoremap jj <Esc>
    " }}}
    
    "---------------------------------------------------------------------------
    " edit settings {{{
    set showmatch      " 括弧の対応をハイライト
    set backspace=indent,eol,start
    set clipboard=unnamed
    set pastetoggle=<F12>
    set guioptions+=a
    
    " insertモードを抜けるとIMEオフ
    set noimdisable
    set iminsert=0 imsearch=0
    set noimcmdline
    inoremap <silent> <ESC> <ESC>:set iminsert=0<CR>
    
    " コンマの後に自動的にスペースを挿入
    inoremap , ,<Space>
    " XMLの閉タグを自動挿入
    augroup MyXML
      autocmd!
      autocmd Filetype xml inoremap <buffer> </ </<C-x><C-o>
    augroup END
    
    " 保存時に行末の空白を除去する
    autocmd BufWritePre * :%s/\s\+$//ge
    " }}}
    
    "---------------------------------------------------------------------------
    " other settings {{{
    " ;でコマンド入力( ;:を入れ替)
    noremap ; :
    
    " 行末までのヤンクにする
    nnoremap Y y$
    
    " 括弧入力後に←に移動
    imap {} {}<Left>
    imap [] []<Left>
    " imap () ()<Left>
    imap "" ""<Left>
    imap '' ''<Left>
    imap <> <><Left>
    
    " カーソル行をハイライト
    set cursorline
    " カレントウィンドウにのみ罫線を引く
    augroup cch
      autocmd! cch
      autocmd WinLeave * set nocursorline
      autocmd WinEnter,BufRead * set cursorline
    augroup END
    
    hi clear CursorLine
    hi CursorLine gui=underline
    highlight CursorLine ctermbg=black guibg=black
    
    " 全角スペースの表示
    highlight ZenkakuSpace cterm=underline ctermfg=lightblue guibg=darkgray
    match ZenkakuSpace / /
    
    " 挿入モード時、ステータスラインの色を変更a
    " via https://sites.google.com/site/fudist/Home/vim-nihongo-ban/vim-color
    let g:hi_insert = 'highlight StatusLine guifg=darkblue guibg=darkyellow gui=none ctermfg=blue ctermbg=yellow cterm=none'
    
    if has('syntax')
      augroup InsertHook
        autocmd!
        autocmd InsertEnter * call s:StatusLine('Enter')
        autocmd InsertLeave * call s:StatusLine('Leave')
      augroup END
    endif
    
    "<space>j, <space>kで画面送り
    noremap <Space>j <C-f>
    noremap <Space>k <C-b>
    
    " カーソル位置の単語をyankする
    nnoremap vy vawy
    
    "ビジュアルモード時vで行末まで選択
    vnoremap v $h
    
    " 最後に編集された位置に移動
    nnoremap gb '[
    
    "move tab
    nnoremap gh gT
    nnoremap gl gt
    
    " <,>による連続インデント
    vnoremap < <gv
    vnoremap > >gv
    
    autocmd FileType html setlocal includeexpr=substitute(v:fname,'^\\/','','') | setlocal path+=;/
    
    " <Space>q で強制終了
    nnoremap <Space>q :<C-u>q!<Return>
    
    " ESC*2 でハイライトやめる
    nnoremap <Esc><Esc> :<C-u>set nohlsearch<Return>
    
    " 0番レジスタを使いやすくした
    " via http://qiita.com/items/bd97a9b963dae40b63f5
    vnoremap <silent> <C-p> "0p
    
    " Ctrl + hjkl でウィンドウ間を移動
    nnoremap <C-h> <C-w>h
    nnoremap <C-j> <C-w>j
    nnoremap <C-k> <C-w>k
    nnoremap <C-l> <C-w>l
    
    " Shift + 矢印でウィンドウサイズを変更
    nnoremap <S-Left>  <C-w><<CR>
    nnoremap <S-Right> <C-w>><CR>
    nnoremap <S-Up>    <C-w>-<CR>
    nnoremap <S-Down>  <C-w>+<CR>
    
    " }}}
    
    "---------------------------------------------------------------------------
    " plugin settings {{{
    "---------------------------------------------------------------------------
    "
    " for preservim/nerdtree {{{
    " commands https://github.com/JetBrains/ideavim/wiki/NERDTree-support
    nnoremap sf :NERDTree<CR>
    nnoremap sk :NERDTreeToggle<CR>
    " }}}
    
    " }}}
    
    
    웹Storm의 NERDTree는 파일을 여는 동안 파일을 닫는 옵션을 사용할 수 없기 때문에 명령을 눌러서 닫을 수 있습니다.

    화면 분할


    s v

    태그 이동


    +h- 왼쪽 탭
    +h- 오른쪽 탭

    화면 분할 후 화면 이동


    Ctrl+h- 왼쪽 화면
    오른쪽 화면으로 가겠습니다.

    파일 보기/숨기기


    sf- 표시
    q- 숨김

    터미널 표시/숨기기


    Option+F12 - 터미널을 각도로 표시하고 WebStorm의 기본 키 바인딩
    Esc - 편집 창으로 돌아가기

    VScode의 경우


    내 VS코드는 여기에 설정되어 있습니다.
    dotfile/vscode at master · hisasann/dotfile
    사용하는 플러그인은 다음과 같습니다.
    VSCodeVim/Vim: Vim for Visual Studio Code
    VS코드에서 Neovim을 이동할 수 있는 확장이 있지만, 나는 사용하지 않았다.
    asvetliakov/vscode-neovim: VSCode Neovim Integration
    VSCode Neovim - Visual Studio Marketplace
    VScode의 Vim 플러그인은 입니다.vimrc 파일을 읽을 수 없기 때문에 VScode에서 사용할 키 바인딩을 설정합니다.
    여기 좀 아파요.

    화면 분할


    + s v

    화면 분할 후 화면 이동


    왼쪽 화면으로 돌아갑니다.
    오른쪽 화면으로 가겠습니다.

    파일 보기/숨기기


    Ctrl+Shift+E Explorer
    사이드바 표시/숨기기
    Ctrl + s Ctrl + k

    터미널 표시/숨기기


    Cmd + 2

    후기


    연말은 편집 설정을 수정하기에 가장 좋은 시기다.
    올해의 오점은 올해 안에 비교적 흔히 볼 수 있는 것이다.
    그럼 메리 크리스마스!🎅

    참고 문장


    NeoVim 사용자가 vscode에 정착하기 위해 하는 일 - 신의 노트

    좋은 웹페이지 즐겨찾기