NeoVim을 Visual Studio Code처럼 만들어보자

VimをVSCodeライクにする - Qiita

本記事は Classi Advent Calendar 2020 14日目の記事です。 こんにちは。今年Classiに新卒入社した@youichiroです。 皆さんはエディタは何を使っていますか？ 自分は普段VSCodeを使って開発を行なっていますが、vimをVSCodeのように使いたいと思いました。 ということで、vimをカスタマイズして見た目や機能をVSCodeライクにしていきます。 vimの初期状態(何も設定していない状態)から、以下の変更を加えていきます プラグインを管理する (vim-plug) ステータスバーを表示する (vim-airline) カラースキームをVSCodeライクにする (vim-code-dark) ファイルツリーを表示する (fern.vim) gitの差分を表示する (vim-gitgutter) ファイル検索する (fzf.vim) VSCodeには拡張機能をインストール・管理する仕組みがありますが、vimでも vim-plugを使ってvimプラグインを管理することができます 次のコマンドを実行してインストールします vimの設定ファイルである~/.vimrc に以下の記述を追加します plug#begin()と plug#end()の間にインストールしたいプラグインを記述し、vim上で:PlugInstallコマンドを実行するとそのプラグインがインストールされます プラグインを削除したい場合は、.vimrcから記述を削除して:PlugClean コマンドを実行します 初期のステータスバーは簡素すぎるので、いい感じのステータスバーを表示するために vim-airline をインストールします タブラインも表示するために、.vimrcに次の設定を追加します ステータスラインとタブラインの余計な項目を除きたかったので、以下の設定を追加しました 例えば右下の表示項目を行数のみにしています ステータスラインの設定については vim-airlineの使い方と設定方法。Vimのステータスバーを最強に！ 、タブラインの設定については Best airline settings が参考になりました vimの色の付け方をVSCodeライクにするために、 vim-code-dark をダウンロードします .vimrcに次の設定を追加すると、VSCodeライクのカラースキームが適用されます vim-airline も同じカラースキームのテーマを適用するために、プラグインをインストールし、テーマを指定します vimのファイルツリーを表示するためのプラグインは NERDTreeが有名ですが、それよりもパフォーマンスが良いらしい fern.vimを使いました 2020秋 Vim のファイラー系プラグイン比較 にプラグインの比較がまとめられています :Fern .

https://qiita.com/youichiro/items/b4748b3e96106d25c5bc

이 글은 Qiita에 업로드 된 VimをVSCodeライクにする의 번역 요약본에 해당합니다. 다만 Vim이 아닌 NeoVim을 사용하고 있는데, 이는 Copliot을 사용하기 위함입니다.

NeoVim의 설치

Home - Neovim

vim out of the box

https://neovim.io/

NeoVim 메인 페이지

Installing Neovim · neovim/neovim Wiki

You can install Neovim from download, package, or source in just a few seconds. To start Neovim, run nvim (not neovim). Before upgrading to a new version, check Following HEAD. For config (vimrc) see the FAQ. Downloads are available on the Releases page. Packages are listed below.

https://github.com/neovim/neovim/wiki/Installing-Neovim

Installing Neovim 페이지

우선 Installing Neovim 페이지를 확인 후 OS에 맞는 설치방법을 참고하여 NeoVim을 설치합니다. Neovim을 사용하는 이유는 앞서 언급했듯 Copilot을 사용하기 위해서입니다. 만약 Copliot이 필요 없는 경우에는, Neovim을 설치하지 않아도 상관없습니다.

vim-plug를 설치하여 플러그인 관리를 하자

$ curl -fLo ~/.vim/autoload/plug.vim --create-dirs \
    https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

https://github.com/junegunn/vim-plug

Vim에는 여러 플러그인이 존재하며, vim-plug를 사용하여 플러그인을 관리할 수 있습니다. 아래의 커맨드를 실행해서 인스톨합니다. 홈 디렉토리에 설치하므로 sudo권한은 필요하지 않습니다. 정상적으로 설치됐다면 vim에 :PlugInstall 명령어가 추가됩니다.

정상적으로 vim-plug가 설치됐는지 확인하려면, vim을 입력하고 :Plug를 입력한 뒤 Tab을 눌러봅시다. 정상적으로 설치된 경우, 다음과 같은 화면을 볼 수 있습니다.

:PlugInstall 명령어가 추가됐다

~/.config/nvim/init.vim 혹은 ~/.vimrc 파일을 열어서 다음과 같이 plug#begin()과 plug#end() 사이에 설치하고싶은 플러그인을 입력하고, vim에서 :PlugInstall 커멘드를 실행하면 플러그인이 설치됩니다.

스테이터스 바를 표시하자

https://github.com/vim-airline/vim-airline

기본 스테이터스바는 너무 단순하므로, 여러가지 상태를 표시해주기 위해 vim-airline을 설치합니다.

call plug#begin()
"" 스테이터스 바
	Plug 'vim-airline/vim-airline'
	Plug 'vim-airline/vim-airline-themes'
call plug#end()

스테이터스 바와 탭 라인에 표시되는 항목을 변경하기 위해, 아래와 같은 설정을 추가해줍니다. 스테이터스 바 설정은 vim-airlineの使い方と設定方法。Vimのステータスバーを最強に！을, 탭 라인 설정은 Best airline settings을 참조해서 작성됐습니다.

"" 스테이터스 바에 표시되는 항목을 변경한다
let g:airline#extensions#default#layout = [
  \ [ 'a', 'b', 'c' ],
  \ ['z']
  \ ]
let g:airline_section_c = '%t %M'
let g:airline_section_z = get(g:, 'airline_linecolumn_prefix', '').'%3l:%-2v'
"" 변경사항이 없으면 diff의 라인 넘버를 표시하지 않는다
let g:airline#extensions#hunks#non_zero_only = 1 

"" 탭 라인 표시를 변경한다
let g:airline#extensions#tabline#fnamemod = ':t'
let g:airline#extensions#tabline#show_buffers = 1
let g:airline#extensions#tabline#show_splits = 0
let g:airline#extensions#tabline#show_tabs = 1
let g:airline#extensions#tabline#show_tab_nr = 0
let g:airline#extensions#tabline#show_tab_type = 1
let g:airline#extensions#tabline#show_close_button = 0
let g:airline#extensions#tabline#enabled = 1

컬러 스키마(Color scheme)을 Visual Sutdio Code처럼 만들자

vim의 색상을 Visual Studio Code처럼 변경하기 위해, vim-code-dark를 다운로드합니다.

https://github.com/tomasiser/vim-code-dark

$ git clone https://github.com/tomasiser/vim-code-dark.git ~/.vim/bundle/vim-code-dark.git
$ ln -s ~/.vim/bundle/vim-code-dark.git/colors/codedark.vim ~/.vim/colors/codedark.vim

그리고 init.vim에 다음과 같이 colorscheme 설정을 추가하여, 색상을 VSCode처럼 적용합니다.

colorscheme codedark

vim-airline에도 동일한 컬러 스키마를 가진 테마를 적용하기 위해, 플러그인을 설치해서 테마를 설정합니다.

Plug 'tomasiser/vim-code-dark'

let g:airline_theme = 'codedark'

파일 트리를 표시하자

vim에서 파일 트리를 표시하기 위한 플러그인으로는 NERDTree가 유명하지만, 퍼포먼스 측면에서 더 나은 fern.vim을 사용합니다. 퍼포먼스에 대해서는 2020秋 Vim のファイラー系プラグイン比較에 잘 비교되어있으므로 참고해주세요.

https://github.com/lambdalisue/fern.vim

Plug 'lambdalisue/fern.vim'

:Fern . 을 입력하면 파일트리를 표시하고, :Fern . -drawer을 입력하면 사이드바처럼 좌측에 파일트리를 표시합니다. 추가적으로 여러가지 옵션이 존재하는데, 매번 입력하기는 번거로우므로 Ctrl+n을 입력해서 파일 트리를 열고 닫을 수 있도록 설정하도록 합니다.

""Ctrl+n을 입력해서 파일 트리를 토글한다
nnoremap <C-n> :Fern . -reveal=% -drawer -toggle -width=40<CR>

-reveal=%는 현재 열려있는 파일을 포커스하는 옵션이며, -toggle는 표시/숨김을 전환하는 옵션입니다. -width는 가로폭을 설정합니다.

파일 트리에서 파일을 생성하거나 삭제하는 것과 같은 조작도 가능합니다. 자세한 것은 아래의 표를 참조하도록 합시다.

커멘드	설명
j, k	위/아래로 이동한다
l	폴더나 파일을 연다
h	폴더를 닫는다
e	파일을 연다
E	세로 분할하여 파일을 연다
t	새 탭으로 파일을 연다
Ctrl+m	폴더를 연다(자식 폴더로 이동)
Ctrl+h	부모 폴더로 이동한다
N	새로운 파일을 작성한다
K	새로운 디렉터리를 작성한다
D	파일을 삭제한다
m	파일을 이동한다
R	파일명을 변경한다
-	파일을 선택한다
C	파일을 복사한다
P	붙여넣기한다
M	파일 잘라내기
y	파일 경로를 복사한다
z	파일명에 맞춰 윈도우 폭 넓히기
!	숨긴 파일을 표시/숨기기

파일 트리에 Git 변경 사항을 표시하자

fern-git-status.vim을 설치하면 파일 트리에 git 변경 사항이 표시됩니다.

https://github.com/lambdalisue/fern-git-status.vim

파일 트리에 파일 아이콘을 표시하자

아이콘을 표시하기 위해서는 Nerd Fonts를 설치해야 합니다. Nerd Fonts 페이지를 살펴보면 여러개의 폰트가 있는데, 이 글에서는 작성자가 VSCode에서 사용하고 있는 font-menlo-extra 폰트를 설치하여 적용하도록 합니다.

https://github.com/ryanoasis/nerd-fonts

font-menlo-extra/Menlo-Regular-Normal.ttf at master · yumitsu/font-menlo-extra

Menlo Regular font, with added goodness like Powerline and FontAwesome. - font-menlo-extra/Menlo-Regular-Normal.ttf at master · yumitsu/font-menlo-extra

https://github.com/yumitsu/font-menlo-extra/blob/master/Menlo-Regular-Normal.ttf

macOS의 iTerm2를 기준으로 다음과 같이 설치된 Menlo Nerd Font를 적용해줍니다. 이제 nerdfont.vim과 fern-renderer-nerdfont.vim 플러그인을 설치하도록 합시다.

그리고 g:fern#renderer 값을 nerdfont로 설정해주면 파일 트리에 아이콘이 표시됩니다.

Plug 'lambdalisue/nerdfont.vim'
Plug 'lambdalisue/fern-renderer-nerdfont.vim'

let g:fern#renderer = 'nerdfont'

파일 트리에 표시되는 파일 아이콘에 색을 입혀보자

파일 트리에 아이콘이 표시되기는 하지만, 모든 파일이 동일하게 표시되므로 한 눈에 들어오지 않습니다. 색을 변경하기 위해 glyph-palette.vim을 설치한 뒤, 설정을 추가합시다.

Plug 'lambdalisue/glyph-palette.vim'

augroup my-glyph-palette
  autocmd! *
  autocmd FileType fern call glyph_palette#apply()
  autocmd FileType nerdtree,startify call glyph_palette#apply()
augroup END

Git 코드 변경 상태를 표시해보자

VSCode에서 변경사항이 있는 행에 심볼이 표시되어, 수정 이력이 있는지 확인할 수 있습니다. Vim에서도 vim-gitgutter 플러그인을 설치하면, 이렇게 수정 이력이 있는지 확인할 수 있습니다. 다음과 같이 vim-gitgutter를 설치해봅시다.

Plug 'airblade/vim-gitgutter'

심볼을 표시하는 것 뿐만 아니라, 변경이 있는 위치로 이동한다던지 변경 사항을 강조 표시하는 것도 가능합니다. 아래와 같이 설정과 키 매핑을 추가합시다.

" git조작
" g[를 눌러 이전 변경으로 이동합니다.
nnoremap g[ :GitGutterPrevHunk<CR>
" g]를 눌러 다음 변경으로 이동합니다.
nnoremap g] :GitGutterNextHunk<CR>
" gh를 눌러 변경내역(diff)에 하이라이트 표시합니다.
nnoremap gh :GitGutterLineHighlightsToggle<CR>
" gp를 눌러 커서가 있는 행에 변경내역(diff)을 표시합니다.
nnoremap gp :GitGutterPreviewHunk<CR>
" 심볼의 색을 변경합니다.
highlight GitGutterAdd ctermfg=green
highlight GitGutterChange ctermfg=blue
highlight GitGutterDelete ctermfg=red

"" 반영 시간을 줄입니다 (기본값은 4000ms)
set updatetime=250

그밖에도 vim-fugitive을 설치하여 git과 관련된 동작을 설정하거나, vim-rhubarb를 설치하여 대상 파일/행을 깃허브에 연다거나 하는 동작을 수행할 수 있습니다.

https://github.com/tpope/vim-fugitive

https://github.com/tpope/vim-rhubarb

파일을 검색하자

VSCode에서 파일명으로 파일을 검색할때는 Command+p, 문자열로 파일을 검색할때는 Command+Shift+f를 사용합니다. Vim에서도 이렇게 키 맵핑이 가능합니다. fzf.vim을 설치해서 편리하게 검색 기능을 사용해봅시다.

https://github.com/junegunn/fzf.vim

Plug 'junegunn/fzf', { 'do': { -> fzf#install() } }
Plug 'junegunn/fzf.vim'

그리고 bat과 ripgrep을 설치합니다. macOS에서는 다음과 같이 brew를 통해 설치할 수 있습니다. 그 외의 OS에서 설치하는 방법은 각각의 깃허브를 참고하도록 합시다.

$ brew install bat
$ brew install ripgrep

https://github.com/sharkdp/bat

https://github.com/BurntSushi/ripgrep

fzf.vim에서 확인할 수 있듯, :GFiles로 Git 관련된 파일의 이름으로 검색이 가능하며, :Rg로 파일 내용으로 검색이 가능해졌습니다. 사용하기 쉽게 아래와 같이 키 매핑 설정을 추가해줍니다. 설정을 추가하면 Ctrl+p를 누르면 검색 미리보기가 표시되며, 파일명으로 검색이 가능해집니다. 그리고 Ctrl+g를 눌러서 파일 내용으로 검색이 가능해집니다.

"" fzf.vim
" Ctrl+p로 파일명을 검색합니다.
" git管理されていれば:GFiles、そうでなければ:Filesを実行する
fun! FzfOmniFiles()
  let is_git = system('git status')
  if v:shell_error
    :Files
  else
    :GFiles
  endif
endfun
nnoremap <C-p> :call FzfOmniFiles()<CR>

" Ctrl+g로 파일 내용을 검색합니다.
" <S-?>でプレビューを表示/非表示する
command! -bang -nargs=* Rg
\ call fzf#vim#grep(
\ 'rg --column --line-number --hidden --ignore-case --no-heading --color=always '.shellescape(<q-args>), 1,
\ <bang>0 ? fzf#vim#with_preview({'options': '--delimiter : --nth 3..'}, 'up:60%')
\ : fzf#vim#with_preview({'options': '--exact --delimiter : --nth 3..'}, 'right:50%:hidden', '?'),
\ <bang>0)
nnoremap <C-g> :Rg<CR>

" fr로, 커서가 위치한 단어로 파일을 검색합니다
nnoremap fr vawy:Rg <C-R>"<CR>
" fr로, 선택한 단어로 파일을 검색합니다
xnoremap fr y:Rg <C-R>"<CR>

" fb로 버퍼 검색을 엽니다
nnoremap fb :Buffers<CR>
" fp로 버퍼에 있는 검색결과 중 이전 파일을 엽니다
nnoremap fp :Buffers<CR><CR>
" fl로 열려있는 파일의 내용에서 검색합니다
nnoremap fl :BLines<CR>
" fm로 마크 검색을 엽니다
nnoremap fm :Marks<CR>
" fh로 파일 열람 기록 검색을 엽니다
nnoremap fh :History<CR>
" fc로 커밋 이력 검색을 엽니다
nnoremap fc :Commits<CR>

검색한 파일을 선택한 상태에서, 다음의 키로 파일을 열 수 있습니다.

키	동작
Enter	현재 윈도우에서 열기
Ctrl+v	창을 수직 분할해서 열기
Ctrl+x	창을 수평 분할해서 열기
Ctrl+t	새로운 탭에서 열기

끝!

이것으로 설정이 완료됐습니다. 완성된 .vimrc/init.vim파일은 youichiro/vscode-like-vimrc에서 확인하실 수 있습니다.

vscode-like-vimrc/.vimrc at master · youichiro/vscode-like-vimrc

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

https://github.com/youichiro/vscode-like-vimrc/blob/master/.vimrc

Uploaded by N2T