Coc.nvimを触ってみようアドベントカレンダー 21日目 – coc-flutter

Coc.nvimを触ってみよう Advent Calendar 2021 21日目です。

今回は coc-flutter です。

coc-flutter について

vimでFlutterをサポートする拡張です。「どんな風に？」という疑問についてはREADME.mdの最初にはられているgitアニメーションを見るのが早いかもしれません。

なお、Flutterでの開発そのものは膨大な内容となるので今回は割愛します。

coc-flutter

coc-flutter をインストールする

vimを起動した状態で以下のコマンドを実行します。

:CocInstall coc-flutter

そして、起動には前提としてFlutterのインストールが必要です。リソースがあるかどうかは以下のコマンドでわかります。

:CocList FlutterSDKs

なかったら以下の表示になります。

Flutterそのもののインストールは公式サイトから行います。なお、M1 Mac環境もサポート対象となっていますが、Rosetta2の導入とFlutter2.5以降にすることが前提です。以下のコマンドを実行しておきましょう。

sudo softwareupdate --install-rosetta --agree-to-license

Flutterのダウンロード及びパスを通しおえたら、次に以下記事を参考にコマンド一つ(switch-arch)でアーキテクチャ切り替えができるようにしておきます。

• みんなの M1 Mac における Homebrew のベストプラクティス は間違っている

i386に切り替えてflutter doctorを実行し、状況を確認します。

% switch-arch
% arch
i386
% flutter doctor

Mac環境で Xcode - develop for iOS and macOS の項目にエラーが出ている状態であれば、メッセージを元に新規インストールあるいは再インストールしておきましょう。CocoaPodも求められます。正常にセットアップが完了すると、flutter doctorにて以下の表示になります。

dartファイルを編集中のみに動作する拡張となっています。まずは適当なファイル名を指定の上vimを起動します。

vim test.dart

次に、FlutterSDKのパスが通っているか確認します。

:CocList FlutterSDKs

以下のようにリストが出てくれば設定完了です。

使ってみる

何もないところからdartファイルを編集してもプロジェクトとしては認知されません。まずは適当なプロジェクトを作っておきます。

% flutter create myapp
% cd myapp
% vim lib/main.dart

編集してみると補完が走ります。

READMEにもあるようにシミュレータもほしいところです。まずはXcodeのSimulatorを起動させます。

open -a Simulator

vimを開いてflutter dev serverを起動させます。

:CocCommand flutter.run

次にFlutterでSimulatorを出力先デバイスとして設定します。

:CocList FlutterDevices

今回は認知されているiPhone13を選択してEnterを押します。

最後に flutter.dev.openDevToolsProfiler を実行することでSimulater上にインストールされて完了です。自動でインストールされたアプリが開きます。

:CocCommand flutter.dev.openDevToolsProfiler

あとはdartファイルを書き換えて保存するたびにSimulater上で反映されるようになります。

あとがき

coc-flutter自体の操作する順番について触れられていないため、とりあえず色々と触ってみましたが、割と簡単に動かす事ができました。一番時間がかかったのはXCodeのインストールでした。

iPhoneのSimulatorだけではなくChromeを動作させている場合はChromeもDeviceの対象となります。ブラウザ版アプリが必要であればそちらに切り替えるべきでしょう。