Zenn
🐕

miseでFlutterバージョンを固定する：VSCodeとターミナルのバージョン不一致を解消

に公開
Flutter
VS Code
VS Code 拡張機能
VS Code Extension
mise
tech

背景

最近はFlutter開発をしています。その中でFlutterのバージョン管理について躓いたので、問題と解決方法をまとめておきます。

遭遇した問題

担当しているプロジェクトでは、miseでFlutterのバージョンを管理しています。Flutterのバージョンアップのタイミングで、ターミナルからは問題なくアップデートされているのに、VSCodeからの実行では古いバージョンのままという事象に遭遇しました。

原因は、VSCodeのsettings.jsonに、以下のようにバージョンを含むSdkへのパスが含まれており、こちらのパスが更新できていない事でした。

{
  "dart.flutterSdkPath": "~/.local/share/mise/installs/flutter/3.29.2-stable"
}

ちなみに上記は、ユーザーの設定として指定されていました。おそらく開発開始当初に指定したのだと思いますが、すっかり失念していました。問題に遭遇したタイミングでは、miseでバージョン指定していると思い込んでおり、VSCodeは別のところで設定されているとは思わず、理解するまでに時間がかかりました。

また、プロジェクトではSdkの指定はされておらず、これも気づくまでに時間がかかった要因のひとつでした。

解決方法

VSCodeでmiseと同じバージョンを使うには、.vscode/settings.jsonに設定を追加する必要があります。

最もシンプルな方法は、Flutter SDKのパスを直接指定することです。

{
  "dart.flutterSdkPath": "~/.local/share/mise/installs/flutter/3.35.2-stable"
}

しかし、この方法だとFlutterのバージョンを更新するたびにsettings.jsonも書き換える必要があります。せっかくmiseで一元管理しているのに、これでは二重管理になってしまいます。
また、私のような初学者が、一致しないバージョンによって混乱することもあるかもしれません。

そこで、dart.getFlutterSdkCommandという設定を使います。

{
  "dart.getFlutterSdkCommand": {
    "executable": "mise",
    "args": ["where", "flutter"]
  }
}

この設定により、VSCodeはmise where flutterコマンドを実行し、miseが管理しているFlutterのパスを動的に取得します。miseでバージョンを変更すれば、VSCodeも自動的に追従するため、miseだけでバージョン管理が完結します。

この指定方法は、今年の1月にマージされており、比較的新しい機能のようです。

注意点（追記）

設定を調整している中で、dart.getFlutterSdkCommandがうまく効かない事がありました。
原因はおそらく、ユーザー設定にdart.flutterSdkPathが残っていたことです。
基本的にはプロジェクトの設定がユーザー設定よりも優先されますが、dart.flutterSdkPathで明示的なパスが指定されている場合は、dart.getFlutterSdkCommandよりも優先されてしまうようです。
ユーザー設定のdart.flutterSdkPathを削除するとうまく機能しました。

公式ドキュメントには、明示的にdart.getFlutterSdkCommandとの関係について書かれているわけではないですが、dart.flutterSdkPathが優先されるという記載があります。

まとめ

dart.getFlutterSdkCommandを使うことで、ターミナルとVSCodeで同じFlutterバージョンが使われるようになり、環境の不一致による問題を防ぐことができます。チーム開発では、dart.getFlutterSdkCommandを指定した.vscode/settings.jsonをリポジトリにコミットしておくと良さそうです。また、READMEなどにユーザー設定のdart.flutterSdkPathを削除するように記載しておくのも親切で良いと思います。

参考

Discussion