VS CodeでFlutter DevToolsをブラウザで開く方法

Flutterプロジェクトを開発モードで作業していると、Flutter DevToolsを使う場面が多いですよね。
しかし、デフォルトではVS Code内部に新しいタブが生成され、画面の半分の幅を占めた状態でWidget Inspectorが作られます。

27インチモニターで左半分をブラウザ、右半分をVS Codeで使っているので、新しいタブが表示されるとコードを見られるスペースがとても狭くなり、毎回手動でブラウザで開くように操作する必要がありました。

ところが、.vscode/settings.jsonファイルを通じて、開発モード開始時にブラウザで開くように設定する方法を見つけたので共有します！公式ドキュメントでこのヒントを見つけたい方はリンクをクリックしてください。

まずcmd + shift + pでコマンドパレットを開きます。
このプロジェクトにのみ影響を与えたいので、Open Workspace Settings(JSON)を選択しました。
その後、JSON形式で以下のコードを追加してください。

{
  // 既存の設定に追加してください
  "dart.openDevTools": "always",
  "dart.devToolsBrowser": "chrome",
  "dart.devToolsLocation": {
    "default": "external"
  }
}

このコードを追加して開発モードを開始すると、Chromeブラウザで以下のような結果が表示されるはずです。

The purpose of life is the life of purpose.

— Robin Sharma