🎄

Neovim|WebStorm|VSCodeで同じようにファイル操作する

2021/12/05に公開

まえがき

この記事はJetBrains Advent Calendar 2021の5日目の記事です。

ぼくは文章を書いたりプログラムを書くときは Neovim をメインエディターにしていて、じっくりと TypeScriptJavaScript を書くときは WebStorm か、最近は VSCode も今更ながらちょっとずつ使っています。

つまりなるべくメインエディターの Neovim のキーバインドに他のエディターも揃えていきたいのです。

ただし、あまりカスタムしすぎるとメンテナンスコストや管理も大変になるので、少ない設定でそれっぽく合わせていくのをモットーにしています。

そこで ファイルを開く というオペレーションだけをなるべく揃えるようにしているので、そこにフォーカスしてメモを残しておきます。

エディター好きな方の何か参考になれば幸いです。

Neovimの場合

https://www.youtube.com/watch?v=B2DObq-edFA

ぼくの Neovim の設定はこちらです。

hisasann/neovim: 🍜hisasann's neovim settings🍝

Neovim の設定がぼくのベースになっていて、この設定に他のエディターもそれっぽく合わせにいっています。

メインで使っているファイラーは defx.nvim です。

Shougo/defx.nvim: The dark powered file explorer implementation for neovim/Vim8

iTerm2 上でファイル・フォルダを追加したりしますが、 defx.nvim 上でもかなり作業します。

また、 unite.vim のように使っているファイラーは telescope.nvim です。

nvim-telescope/telescope.nvim: Find, Filter, Preview, Pick. All lua, all the time.

ぼくはファイラーを開きっぱなしにはあまりせず、ファイルを開いたらファイラーが閉じてくれる設定にしています。

画面分割

s v

タブの移動

<Leader> + h - 左のタブへ

<Leader> + h - 右のタブへ

画面分割した画面の移動

Ctrl + h - 左の画面へ

Ctrl + l - 右の画面へ

ファイラーの表示・非表示

s f - 表示

q - 非表示

WebStormの場合

https://www.youtube.com/watch?v=5hg9PimJWE4

ぼくの WebStorm の設定はこちらです。

dotfile/.ideavimrc at master · hisasann/dotfile

WebStorm は長年愛用しているエディターのひとつで、使い始めたときは JavaScript 専用の IDE なんてものはまだ世の中になく、そんな中、定義位置にジャンプの機能やインデクシングがすばらしく素早い動作が魅力的でした。

今は拡張とかはあまり入れておらず、必ずいれているのが ideavim で、この拡張があるから WebStorm を使っていると言っても過言ではありません。

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>
" }}}

" }}}

WebStorm の NERDTree は、ファイルを開くと同時にファイラーを閉じるオプションが使えないので、自分でコマンドを叩いて閉じています。

画面分割

s v

タブの移動

<Leader> + h - 左のタブへ

<Leader> + h - 右のタブへ

画面分割した画面の移動

Ctrl + h - 左の画面へ

Ctrl + l - 右の画面へ

ファイラーの表示・非表示

s f - 表示

q - 非表示

ターミナルの表示・非表示

Option + F12 - ターミナルをトグル表示、WebStorm のデフォルトキーバインド

Esc - エディターペインに戻る

VSCodeの場合

https://www.youtube.com/watch?v=ChKdLoPa9_Y

ぼくの VSCode の設定はこちらです。

dotfile/vscode at master · hisasann/dotfile

使っているプラグインは以下です。

VSCodeVim/Vim: Vim for Visual Studio Code

VSCode 上で Neovim を動かす拡張もありますが、ぼくは使っていません。

asvetliakov/vscode-neovim: VSCode Neovim Integration

VSCode Neovim - Visual Studio Marketplace

VSCode の Vim プラグインは .vimrc 的なファイルを読み込むことができないので、 VSCode 用のキーバインドを設定しています。

ここが少々つらいところです。

画面分割

<Leader> + s v

画面分割した画面の移動

Ctrl + h 左の画面へ

Ctrl + l 右の画面へ

ファイラーの表示・非表示

Ctrl + Shift + E エクスプローラ

Cmd + b サイドバーの表示・非表示

Ctrl + s Ctrl + k

ターミナルの表示・非表示

Cmd + 2

あとがき

年末はエディターの設定を見直すには最高のタイミングです。

今年の汚れは今年のうちに的な感じです。

それではみなさま、良いクリスマスを!🎅

参考記事

NeoVimユーザーがvscodeにも定住するためにやったこと - かみのメモ

Discussion