💡

Flutter開発を高速化するVSCode拡張機能を5つ紹介🎉

3 min read

Flutter海外勢の動画を見ていると、VSCodeを使っている人がやたら多い...!!
VSCode何がそんなに便利やねんと思いつつ調べていくと、拡張機能がかなり充実している様子。

知っているか知っていないかで
アプリ開発初期、UI構築時の開発スピードがかなり変わりそう🧐

情報をまとめておきます!

Flutter Tree

https://marketplace.visualstudio.com/items?itemName=marcelovelasquez.flutter-tree

これめちゃくちゃ便利です。
コードを書く前にUIの実装イメージが固まっているのが前提ですが、
わずか1行で複雑なレイアウトを一気に書けます。

Flutter Widget Snippets

https://marketplace.visualstudio.com/items?itemName=alexisvt.flutter-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

https://marketplace.visualstudio.com/items?itemName=Nash.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

https://marketplace.visualstudio.com/items?itemName=davidwoo.flutter-auto-import
importが必要なコードを書いた際に、自動でimport文を追記してくれる拡張機能。
この拡張のあるなしでVSCodeの書き心地が随分と楽になります。

VSCodeでFlutter書くなら必須の拡張機能!

Error Lens

https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

マーケットプレイスで探すといくつか出てくるので注意。
Alexander氏の作成した拡張の方が使いやすい。

エラーメッセージをインラインで出力してくれる拡張。

標準だとエラーは波線表示されますが、何がダメなのかいちいち確認するのは面倒ですよね。
インラインで表示してくれるので、パパっとコードを修正できるのは快適ですよ!

Flutter Color

https://marketplace.visualstudio.com/items?itemName=circlecodesolution.ccs-flutter-color

ARGBカラーコードに自動でカラーボックスを付けてくれる拡張機能。
ボックスにカーソルを合わせるとグリグリ動かせるので楽しい。

AndroidStudioは自動で表示されるんですが、VSCodeは標準でサポートされていないようなので、入れておくのがベターかな。

2021/03/20

Flutter-Auto-Importが便利すぎて追記しちゃいました。
おかげで5つの拡張と言いつつも、6つの拡張機能になっちゃったZE...

PR

Flutterと薬剤師っぽい話題を半々くらいでつぶやいてます。
ぼくと友達になってよ。

はじめてのアプリをリリースしました🎉
良かったら使ってみてくださいな~!

✅:薬剤師向け電卓アプリ - Phalc


https://apps.apple.com/us/app/phalc-薬剤師向け電卓アプリ/id1553088820
https://play.google.com/store/apps/details?id=hagakun.pharm_calc

Discussion

ログインするとコメントできます