見出し画像

NestJSをVimでも開発したい

rnishio

こんにちは
スペースマーケット西尾です。

スペースマーケットではバックエンドAPIについてはRuby on Rails, 及び Node.js (Express/NestJS/Typescript)を利用しています。
私は普段の開発ではRailsを触ることが多いのですが、スペースマーケットバックエンドの流れとしてRails -> Node.js に置き換えていきたいという思いがあり、最近はNode.jsで稼働するバックエンドAPIも増えつつあります。

開発エディタについては社内でもVSCodeが一番多いのですが、私は普段Railsの開発をしているときはVimを使っていて、慣れた環境でNestJSの開発ができないものかといろいろと試してみましたのでそれについて書いてみようと思います。

今回試すこと

今回は最低限次のことを試してみようと思います。
・メソッドやクラスの定義にジャンプ
・デバッグ

なお普段私がRailsの開発で使っている環境は以下になります。


「Tsuquyomi」プラグインでメソッドジャンプ

まずは、下記「Tsuquyomi」プラグインをHow To Installに従い導入していきます。

私はNeoBundle(Vimのプラグイン管理のプラグイン)を未だに使い続けているので次のように設定しました。(ついでに他のプラグインも導入しています)

.vimrc

""""""""" Node
NeoBundle 'Quramy/tsuquyomi'
NeoBundle 'leafgarland/typescript-vim'
NeoBundle 'pangloss/vim-javascript'
NeoBundle 'Townk/vim-autoclose'
NeoBundle "Shougo/unite-outline"

let g:tsuquyomi_completion_detail = 1
autocmd FileType typescript setlocal completeopt-=menu,preview
autocmd FileType typescript nmap <buffer> <Leader>t : <C-u>echo tsuquyomi#hint()<CR>
""""""""

上記設定後は:NeoBundleInstall を行った後で実際に Ctrl + ] で定義元にジャンプ。Ctrl + o で戻る ことができました。

画像1

また、コンパイルエラーとなっている箇所も保存時にQuickfixウィンドウに表示されるのでかなり便利です。

画像2

vimspectorでデバッグ

続いてデバッグをやっていきます。
これにはvimspectorというプラグインを利用しました。

こちらはdein (同じくVimのプラグイン管理のプラグイン)で入れています。(Neobundleやめてdeinに統一したいがごちゃごちゃしすぎて移行できてない...)

let g:vimspector_enable_mappings = 'HUMAN'
call dein#add('puremourning/vimspector')

次にプロジェクトのルートフォルダーに.vimspector.jsonを作成します。
今回は start:debug(nest start --debug --watch) と jest実行の2パターンの起動方式を設定します。

.vimspector.json

{
 "configurations": {
   "run": {
     "adapter": "vscode-node",
     "breakpoints": {
       "exception": {
         "all": "N",
         "uncaught": "N"
       }
     },
     "configuration": {
       "type": "node",
       "request": "launch",
       "name": "Launch",
       "port": 9229,
       "runtimeExecutable": "yarn",
       "cwd": "${workspaceFolder}",
       "runtimeArgs": ["start:debug"],
       "console": "integratedTerminal"
     }
   },
   "jest": {
     "adapter": "vscode-node",
     "breakpoints": {
       "exception": {
         "all": "N",
         "uncaught": "N"
       }
     },
     "configuration": {
       "request": "launch",
       "name": "Jest debugger",
       "type": "node",
       "console": "integratedTerminal",
       "program": "${workspaceRoot}/node_modules/.bin/jest",
       "skipFiles": ["*/<node_internals>/**/*.js", "node_modules/**/*.js"],
       "cwd": "${workspaceRoot}"
     }
   }
 }
}

設定が終わったら起動していきます。
まずは止めたい場所でF9を押してブレイクポイントを作ります。

画像3

次にF5で起動します。
設定を2つ行ったのでどっちで起動しますか? と出てきますが、2: runをここでは選択します。

画像4

実行後は該当箇所で止まるようになります。
あとは止まった場所で変数の中身がみられたり、止まった箇所から1行ずつ実行することも可能です。

画像5

最後に

今回はTsuquyomi及びVimspectorプラグインを使ってVimでNestJSプロジェクトのメソッドジャンプやデバッグを試してみました。
正直VSCodeで良いかもとは心の中で思うも、上記を入れたことで慣れたVim環境で開発できるようになったのは嬉しいものです。

なおVSCodeでのデバッグは弊社小見が記事を書いていますのでよかったらご覧ください。


いいなと思ったら応援しよう！