Flutter開発を高速化するVSCode拡張機能を5つ紹介🎉
Flutter海外勢の動画を見ていると、VSCodeを使っている人がやたら多い...!!
VSCode何がそんなに便利やねんと思いつつ調べていくと、拡張機能がかなり充実している様子。
知っているか知っていないかで
アプリ開発初期、UI構築時の開発スピードがかなり変わりそう🧐
情報をまとめておきます！
Flutter Tree
これめちゃくちゃ便利です。
コードを書く前にUIの実装イメージが固まっているのが前提ですが、
わずか1行で複雑なレイアウトを一気に書けます。
Flutter Widget Snippets
Widgetに特化したSnippets！よく使うWidgetが爆速で入力できる
ColumnとかRowってよく使うけどchildrenまで書くの面倒だな～と思ってたのは僕だけ？
| 対応するWidget | 記法 | 特記 |
|---|---|---|
| Column | fcol | |
| Row | frow | |
| Container | fcont | |
| Text | ftxt | |
| SizedBox | fszb |
fszbhはheight, fszbwはwidthプロパティ付き |
| EdgeInsets | fedg |
fedgall , fedgonly, fedgesym, fedgesymh, fedgesymv
|
Awesome Flutter Snippets
FlutterのSnippetsと言ったら定番はこれ！って感じの有名なSnippets。
個人的にはFutureBuilderが一瞬で入力できるのがお気に入り。
@overrideでアノテーションが必要なinitStateもinitSで書けるので便利。
よく使うSnippets
| 対応するWidgetなど | 記法 |
| ---- | ---- | ---- |
| Stateless Widget | statelessW |
| Stateful Widget | statefulW |
| ListView.builder | listViewB|
| initState | inisS |
| material package| importM |
Flutter-Auto-Import
importが必要なコードを書いた際に、自動でimport文を追記してくれる拡張機能。
この拡張のあるなしでVSCodeの書き心地が随分と楽になります。
VSCodeでFlutter書くなら必須の拡張機能！
Error Lens
エラーメッセージをインラインで出力してくれる拡張。
標準だとエラーは波線表示されますが、何がダメなのかいちいち確認するのは面倒ですよね。
インラインで表示してくれるので、パパっとコードを修正できるのは快適ですよ！
Flutter Color
ARGBカラーコードに自動でカラーボックスを付けてくれる拡張機能。
ボックスにカーソルを合わせるとグリグリ動かせるので楽しい。
AndroidStudioは自動で表示されるんですが、VSCodeは標準でサポートされていないようなので、入れておくのがベターかな。
2021/03/20
Flutter-Auto-Importが便利すぎて追記しちゃいました。
おかげで5つの拡張と言いつつも、6つの拡張機能になっちゃったZE...
PR
Flutterと薬剤師っぽい話題を半々くらいでつぶやいてます。
ぼくと友達になってよ。
はじめてのアプリをリリースしました🎉
良かったら使ってみてくださいな～！
✅：薬剤師向け電卓アプリ - Phalc
Discussion