雲のメモ帳

猫とクラウドと旅行が好きなインフラエンジニアです。 日々の調べたことや興味が持ったことをこのブログにアウトプットします。

VSCodeでDartのツリー式のコードガイドラインを表示する方法

これはなに?

VSCodeでFlutterの開発をする際のTips記事です。

コードガイド イメージ

以下のような形でブロック関係をツリーで表示してくれます。
Flutterで開発していると階層が深くなって混乱することが多いのでガイドを表示することで開発が楽になります。

設定方法

  1. VSCodeの[設定]から、「Flutter UI」と検索
  2. 「Dart: Preview Flutter Ui Guides」を有効化

上記設定すれば自動でガイドがでるようになります!

参考サイト

codereis.com