Flutter開発で便利なVSCode拡張機能&コマンド

VSCodeの拡張機能とかコマンドとか知ってるだけでかなり開発速度も変わってくるな〜意外と知られていないこともあるな〜と感じたので、自分がよく使ってるものを簡単にまとめてみます！
もし、こんな拡張便利！とかコマンドや設定便利！みたいなのあればぜひ教えてください！

拡張機能

Pubspec Assist (2021/08/15非推奨)

https://marketplace.visualstudio.com/items?itemName=jeroen-meijer.pubspec-assist

パッケージの追加をいい感じにやってくれます。(アルファベット順, ^付きバージョンで追加, パッケージ検索)

Run on Save

https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave

save時にお好きなコマンドを走らせてくれます。
自分はimport_sorterをsave時に走らせています。
import_sorterについては下記事が参考になります。
https://blog.dalt.me/2774

{
  "emeraldwalk.runonsave": {
    "commands": [
      {
        "match": ".dart$",
        "cmd": "flutter pub run import_sorter:main"
      },
    ]
  },
  "files.exclude": {
    "**/*.freezed.dart": true,
    "**/*.g.dart": true
  }
}

dart-import

https://marketplace.visualstudio.com/items?itemName=luanpotter.dart-import

importをいい感じに並べてくれたり、不要なimportを削除してくれます。最近は上述したimport_sorterを使っているので、あまり活躍していませんが、import_sorterは並び替えはしてくれるが、使われていないimportを消すことはしてくれないので、リファクタ等して、不要なimportが残ってる時にさくっとコマンド叩くので、まだ重宝してます。

Bracket Pair Colorizer 2 (unmaintained)

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

対応する(と)の色を揃えてくれます。

Flutterでは入れ子がめちゃめちゃ発生するので、(と)の対応をぱっと把握できるのは便利かなと。
(もうメンテされてないので、似たような拡張を使うのが良いかもです)

TabOut

https://marketplace.visualstudio.com/items?itemName=albert.TabOut

Tab out of quotes, brackets, etc

flutterでは,や)を多用するので、その際に,や)の右にカーソルをずらしたいってときにTabで移動できるのは個人的に結構便利かなと思ってます。(説明しづらい...)

Error Lens

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

エラーをいい感じに出力してくれます。(ちょっとリアルタイムすぎて鬱陶しい時もありますが...)

indent-rainbow

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

言わずもがなFlutterではインデントがとても大事なので、そのハイライトに使ってます。
自分は他にもtree構造をわかりやすくするextension?設定?を入れていますが、何か忘れました。
わかる方いたら教えてください...

Flutter Color

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

color boxを表示してくれるので、(個人開発だと特に)役に立つかなと思います。

その他extension

そこまで重宝してるわけではないものの、使っている(いた)extensionを羅列しておきます。

• https://marketplace.visualstudio.com/items?itemName=Nash.awesome-flutter-snippets
• https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview
• https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
• https://marketplace.visualstudio.com/items?itemName=marcelovelasquez.flutter-tree
• https://marketplace.visualstudio.com/items?itemName=gmlewis-vscode.flutter-stylizer
• https://marketplace.visualstudio.com/items?itemName=robert-brunhage.flutter-riverpod-snippets

その他Tips (基本含む)

Generated fileを非表示にする

.g.dartや.freezed.dartが大量にある状態は鬱陶しいので、非表示にしています。
.vscode/settings.jsonで下記を追記します。

"files.exclude": {
    "**/*.freezed.dart": true,
    "**/*.g.dart": true
  }

constをsave時に自動で付与する

language specific settings > dartで開いたsetttings.jsonに
下記を追加する

"[dart]": {
    "editor.codeActionsOnSave": {
      "source.fixAll": true
    }
  }

https://twitter.com/vandadnp/status/1490703527328550913?s=20&t=mOLWmwL38Q2sPOACGyenpg

precommit

vscode全然関係ないですが。設定しておくと便利かと思います。(そのうち他の記事に切り出します)
自分は、チーム開発の際は以下三つを設定しています。

• flutter-import-sorter
• flutter-analyze
• flutter-format

https://pre-commit.com/

repos:
- repo: https://github.com/fluttercommunity/import_sorter
  rev: "aeb26a791ea546506cc8cd2207b320b64a7ed6b5"
  hooks:
    - id: flutter-import-sorter

- repo: https://github.com/dluksza/flutter-analyze-pre-commit
  rev: "0bfdb7415bb2d02794a884bf2b763a92772001eb"
  hooks:
    - id: flutter-analyze

- repo: https://github.com/Cretezy/flutter-format-pre-commit
  rev: "4a1df675bb74dea371c17934933e257e46f8dd98"
  hooks:
    - id: flutter-format

コミットする際に下記のように自動で検査してくれ、かつ、失敗した際にはコミットも失敗し、自動で修正してくれます。

コマンド + Enter

新しい行を下に追加 & カーソルの移動をしてくれます。

コマンド + .

メソッドの切り出しとか、widgetの削除とか色々。

コマンド + Shift + B

build runner走らせる時によく使います。

Format on Save

vscodeの設定(コマンド + ,)から設定します。