2019年の情報がなかったのでまとめました。
目標
- VimでTypeScript or JavaScriptのReactをVSCodeのように書きたい
完成形
必要なもの
NeoVim のインストール
今回はneovim dev版を使います。
Installing Neovim · neovim/neovim Wiki
# dev版で導入 (floating windowが使える)$ brew install--HEAD neovim
# version 確認$ nvim -v
NVIM v0.4.0-dev
Build type: Release
coc.nvimとは
coc.nvimは、vim8.0 / neovim のためのインテリセンスエンジン。
TypeScriptで作られており、言語ごとの機能拡張をプラグイン内のextentionでサポートする言語サーバクライアントです。
要は、VSCodeのような力をvim / neovim に与えるもの。
IDEに必要な言語解析機能を組み込みで実装するのではなく、言語サーバとして外部実装する Language Server Protocolが策定された頃から、VimのIDE化、超高機能化が囁かれてきましたが、とうとうTypeScript製でnpmを使用するプラグインが現れました。
まるでVSCodeみたい。 conquer of completion (補完の征服)と名付けられたのもすごいですね。
coc.nvimの導入
導入には vim 8.0 以降、または neovim 0.3.1 以降が必要です。更に vim/neovim上で nodeのサポートが必要。
まず、neovimのnodeサポートを整えます。
node
公式ではcurlを使ったワンライナーでのnodejsインストール手順が書かれていますが、nodeはversion管理システム経由で入れることにします。 使用するversion管理システムはnodebrew。
# nodebrewの導入$ brew isntall nodebrew
# nodebrew用のディレクトリの生成$ mkdir-p ~/.nodebrew/src
# v12のnode.jsを導入$ nodebrew install 12
$ nodebrew use 12
# neovimにnode.jsの環境を$ npm i -g neovim
nodeのパスを通すため、init.nvim に以下を記載。
let g:node_host_prog = system('echo -n $(which neovim-node-host)')
:checkhealthを行い、以下の表示がでれば neovimのnodejsサポートはOK。
## Node.js provider (optional)
- INFO: Node.js: v12.9.0
- INFO: Neovim node.js host: /usr/local/bin/neovim-node-host
- OK: Latest "neovim" npm/yarn package is installed: 4.5.0
coc.nvimの導入
coc.nvim はdein.nvim経由で導入。
coc.nvim はnpm製なので導入後にプラグインのディレクトリでnpm installを走らせる必要があります。あらかじめinstall.shが用意されているので、実行されるようbuildオプションを記載。
また、公式リポジトリに記載された設定例をcoc-options.vimとして取り込みます。 coc.nvim: Example vim configuration
[[plugins]]
repo = 'neoclide/coc.nvim'
build = './install.sh nightly'
hook_add = 'source ~/.config/nvim/coc-options.vim'
extensionsの導入
coc.nvimにはextensionsが用意されており、言語ごとに機能拡張できます。公式にあるように、coc.nvimの拡張はVSCodeの拡張からforkされています。
Using coc extensions · neoclide/coc.nvim Wiki
Reactに対応するため下記のextentionsを:CocInstallで導入。
- neoclide/coc-tsserver： Tsserver extension for coc.nvim
- TSServerを使用して、JavaScript/TypeScript/JSX/TSXに対応
- neoclide/coc-eslint： Eslint extension for coc.nvim
- ESLint対応
:CocInstall coc-tsserver coc-eslint
CocConfig
:CocConfigでcoc-settings.jsonが開きます。
ちなみに、coc-settings.jsonを開くと自動で:CocInstall coc-jsonが走ります。
設定として、TsserverをJavaScriptに適用するように、またESLintをTypeScript/TSXに適用するように変更します。
こちらの設定はVSCodeとほぼ同じですね。
{"tsserver.enableJavascript":true,"eslint.filetypes":["javascript","typescript","typescriptreact","javascriptreact","typescript.tsx"]}完成
これでVimでコード補完しつつReact(+TypeScript)を書けるようになりました。