VimでFlutterの開発環境を整える

Google I/OでFlutter for webが発表されました。FlutterとはDart言語で書かれたiosやandroid向けにモバイルアプリケーションを作成できるフレームワークなのですが、今後はWEBと同時開発、同時リリースが可能になり、より一層開発現場で重宝される存在になるでしょう。

普段はReactやvueなどのフロントエンド技術を中心開発してる僕ですが、Flutterに興味を持ったので、これからコツコツとコードを書いていきたいと思います。今回はその前段階として、NeoVimにDartとFlutterの環境を整えてみます。

検証環境

MacOS

NVIM v0.3.4

dein

セットアップ

Flutterでvimを書くためのライブラリを調べてみました。とりあえずvimのライブラリは以下の2つがあれば、問題なく開発できそうです。

vimのシンタックスハイライト

dart-lang/dart-vim-plugin

vim上でFlutterのコマンドを扱うライブラリ

thosakwe/vim-flutter

こちらの2つをインストールしていきます。

deinを使ってる場合

dein.toml
[[plugins]]
repo = 'dart-lang/dart-vim-plugin'
[[plugins]]
repo = 'thosakwe/vim-flutter'

僕の場合、こんな感じでDartファイルでシンタックスハイライトが有効になりました。

vim-flutterを使ってみる

ハイライトが有効になりましたが、本当に便利なのはこのvim-flutterです。これはvim上でflutter runのコマンドが使えたりHot Reloadを使えたりできます。それでは、iosシュミレーターを開きます。

open -a Simulator

そしてvim上でflutter runしてみます。コマンドは下記の通りです。

:FlutterRun

するとビルドが始まります。

今度はHot Reloadをしてみましょう。

:FlutterHotReload

すると無事HotReloadされました。ターミナルにいちいち戻らずリロードできるのでかなり便利です。

便利なalias

最後にvim-flutterの公式に便利なvimのaliasの例が載っていました。これで、leader + frでHot Reloadをすることができます。vimでストレスフリーな開発が実現できそうですね。

nnoremap <leader>fa :FlutterRun<cr>
nnoremap <leader>fq :FlutterQuit<cr>
nnoremap <leader>fr :FlutterHotReload<cr>
nnoremap <leader>fR :FlutterHotRestart<cr>

最後に

Flutterの導入として、vimのセットアップをみていきました。今後のクロスプラットフォームとしてのFlutterに非常に期待していて、今後お仕事や案件で使えたらと楽しみにしています。