Macユーザー必見！Flutter開発の効率が劇的UP！VSCodeで使える必須小技5選

この記事は、株式会社スピードリンクジャパン Advent Calendar 2024 の9日目の記事です。

こんにちは！今回は、Flutterの開発で私がよく使用している便利な機能をいくつかご紹介します。これからFlutter開発を始める方や、すでに開発を行っている方でも、きっと役立つテクニックが見つかるはずです。

VSCodeでの開発をより効率的にするため、ぜひ試してみてください！

1. ウィジェットラップのショートカット

操作方法:

• ウィジェットを選択してCommand + .を押すと、「Wrap with Container」や「Wrap with Column」などのオプションが表示されます。

使いどころ:

ウィジェットを他のウィジェットでラップする作業が簡単になります。例えば、ColumnウィジェットをContainerで囲む場合などに便利です。

2. Flutter Outlineを活用

Flutter Outlineは、コードの構造をツリー形式で表示してくれる便利なサイドパネルです。

開き方:

1. VSCodeの左下にある「アウトライン」をクリック。
2. ウィジェット階層が可視化され、編集したいウィジェットをすぐに見つけられます。
   

3. スニペット（コード補完）の活用

VSCodeには、ショートカットで簡単にウィジェットテンプレートを生成するスニペット機能が用意されています。

例:

• StatelessWidget: stless → Tab
• StatefulWidget: stful → Tab

使いどころ:

よく使うウィジェットやメソッドを素早く生成でき、手入力の手間が減ります。

　　　　　　　　　　　　　　　　　　　↓

4. 自動インデントとフォーマット

設定方法：

VSCodeのsettings.jsonに以下を追加：

"editor.formatOnSave": true,
"editor.formatOnType": true,

使いどころ：

• 保存時や入力中にDartのコードが自動で整形され、常にきれいなコードを保てます。
• コードの整形を忘れる心配がなく、チーム開発でも統一されたフォーマットが維持できます。

5. 「Flutter: Save Screenshot」コマンドでエミュレータのスクリーンショットを取得

操作方法：

1. Command + Shift + P（Mac）または Ctrl + Shift + P（Windows）でコマンドパレットを開く。
2. 「Flutter: Save Screenshot」と入力して実行。

使いどころ：

• Flutterアプリの画面を簡単にスクリーンショットとして保存できます。
• UIの確認やデザインレビュー、チームメンバーとの共有に便利です。

まとめ

今回紹介した小技を活用することで、VSCodeでのFlutter開発がより快適になります。特にショートカットや補完機能をフル活用することで、時間を節約しながら効率的にコードを書いていけるでしょう。