※ こちらは以下でも投稿した内容と同じになります。
はじめに
Flutter開発におけるエディターはVSCodeを使用している筆者ですが、学習初期の頃は拡張機能の意味やどの拡張機能を入れるべきかなどがわからず苦労しました。
VSCodeはカスタマイズ性が高く、拡張機能を入れていくことで文字通り機能を拡張することができます。
拡張機能を入れることが前提のエディターであり、必要な拡張機能を自分で調べて入れていく必要があります。
必要な拡張機能がわかり、入れることができれば断然便利なエディターとなります。
そんなこんなで実務経験１年が経過し、知見が溜まってきたのでこの機会におすすめの拡張機能を共有しておければと思い執筆しております。
記事の対象者
- VSCodeを使ってFlutter開発をしている方
- Flutter or VSCode初学者でおすすめの拡張を知りたい方
- 他の人がどんな拡張を入れてるか気になる方
記事を執筆時点での筆者の環境
[✓] Flutter (Channel stable, 3.27.1, on macOS 15.1 24B2082 darwin-arm64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.2)
[✓] VS Code (version 1.96.2)
前提
以下の拡張機能については基本の内容と捉え、言及しておりません。
- Dart
- Flutter
- Japanese Language Pack for VS Code
Flutter&Dart特有の拡張機能
Flutter Utility Snippets
Flutter Utility SnippetsはFlutterでよく使うスニペット集です。
スニペットとは、頻繁に使うコードのテンプレートを簡単に呼び出せる機能のことです。
上記の例ではFlutter関連のWidgetをfから始まるワードで呼び出しています。
入力：fsc -> fcol -> fce -> ft
スニペットの登録：fscaffold -> fcolumn -> fcenter -> ftext
いきなりで恐縮ですが、こちらは私が作った拡張機能です(´ω｀)
以前は他の方の作ったスニペット集を使っていたのですが、自分なりのものが作りたくなって作成しました。
上記のFlutter関連以外にはDart関連、Riverpod関連、Hooks関連、Freezed関連、テスト関連、コメント関連など私がよく使うものを登録しています。
尚、原型は以下を参考にしました。
どちらも有名なものなのでこちらもおすすめです。
Widget Wrapper
Flutter標準の拡張機能では対象のWidgetをさらにラップしたい場合に⌘ + .で任意のWidgetでラップすることができるようになっています。しかし、いくつか使用頻度が高いのに用意されていないWidgetもあります。
Widget Wrapperでは上記の標準では用意されていないWidgetでラップできるようになります。
上記の画像でいう緑枠内に書かれているWidgetたちがそれです。
こちらも手前味噌で恐縮ですが、私の作成した拡張機能です🙈
この拡張機能の参考にさせてもらったのはFlutter Plusです。
こちらはカスタマイズ性が高く、自分でラップするWidgetを登録できたりします。
また、独自のスニペットも利用できるようになります。
詳しくは紹介されている方の記事がありますのでそちらをご覧ください。
コードの品質向上関連
Code Spell Checker
クラス名や変数名、コメントなどのスペルチェックをしてくれます。
スペルミスをしていると青波線で指摘しれくれるのと、VSCodeの下の問題のところでも教えてくれます。
さらに問題の箇所で⌘ + .を押すと訂正用の保管も出してくれます。
また、プロジェクト独自のワードとして登録することもできるので、余計な指摘をされることもなくなります。
例：SUSHIとかFUZIYAMAとか
Error Lens
エラー箇所をコード上に表示してくれます。
わざわざエディターの問題タブを見なくてもさっと確認することができるようになります。
コーディングの補助
Better Comments
コメントの文字に装飾を入れることができます。
独自のルールを設けて、例えば TODOにはオレンジの文字色で表示する といったことができます。
これにより通常のコメントと、目立たさせたいコメントを視覚的に区別しやすくすることができます。
Bracket Lens
クラス、メソッドなどの末尾の} に対してどの終わりなのかを注釈を入れてくれます。
Flutterも標準でWidgetの末尾に注釈を入れてはくれますが、より細かな部分まで表示しれくれるようになります。
FlutterはWidgetでどんどんラップしていく都合上、ネストが深くなりがちなので地味にありがたい拡張機能です。
GitHub Copilot
コーディングを補助してくれるAIツールです。
例えばコメントでメソッドの処理内容を書いていくとコードをサジェストしてくれたり、
変数を宣言し始めると、クラスの内容を見てサジェストしてくれたりします。
なので、正直最初に紹介したFlutter Utility Snippetsの出番は少ないですw
ただ、注意したいのが全自動でコードを記述してくれるというよりは、プロジェクト内容を見ながら適時アシストしてくれる形です。
さらにいうとサジェスト内容が必ず自分の意図する内容というわけではありません。
私の場合はメソッドの処理内容をまずはコメントで書いてサジェストで出すようにしています。
特に配列の操作やfor文、while文の時などが助かっています。
また、変数名もしっかりつけるようにするとその意図を汲み取ってサジェストの精度も上がってきます。
あと、もう一つよく使うのはエラーが出ているコードに対して⌘ + .を押すと出てくる Copilotに説明させる です。
ここはChatGPTに貼り付けるよりも素早くエラー内容を確認できるので良いです。
ErrorLendsによる表示でパッとみてよくわからなかった場合はひとまずCopilotに聞いてみるとすぐに解決策を教えてくれて助かっています。
いずれにせよ、GitHub Copilotのおかげでコーディング速度は断然早くなるので、まずは無料版からでも試してみてはいかがでしょうか？
indent-rainbow
インデントの色を可視化して見やすくしてくれます。
こちらも視認性の向上に役立ちます。
Version Lens
パッケージの現在のバージョンと最新バージョンの有無を表示してくれるます。
また、パッケージのアップデートもワンクリックで行えるようになります。
Todo Tree
特定のアノテーションをつけたコメントに対してアクセスしやすいようににまとめて表示しれくれるようになります。
いわゆるブックマーク的にコメントを使えるようになります。
もともと登録されているTODOなどに加えて独自に設定することも可能です。
先ほど紹介したBetter Commentsと合わせてコメントをより使いやすくする方法を解説した記事を以前書いております。
こちらもぜひご覧になって見てください。
YAML
YAMLファイルの編集をサポートしてくれる拡張機能です。
YMALの構文チェック、補完機能、自動整形などを補助してくれます。
pubspec.yamlだけに限らず、Flutterではyamlファイルを扱う機会が多いので、
入れておくと重宝します。
その他便利機能
Ascii Tree Generator
ディレクトリ構造のツリーを簡単に作ってくれる拡張機能です。
プルリクや記事などの説明資料としてディレクトリツリーがあると見栄えもいいし、伝わりやすいので便利です。
CodeSnap
スクショにしたいコードを範囲で選択して右クリックし、実行するとPNG形式で書き出してくれる拡張機能です。
SNSや、発表資料などに載せる際に便利です。
Material Icon Theme
VSCodeのフォルダーやファイルのアイコンをマテリアルデザインに沿ったアイコンで表示してくれます。
これ無しだとだいぶあっさりした見た目なので、入れておくと視認性も良くなり目的のファイルも見つけやすくなります。
Git&GitHub関連
Git Graph
Gitのブランチを可視化してくれる拡張機能です。
主にブランチの現状把握、整理、ブランチ移動などを行います。
- リモートとローカルの差分があるか確認
- ダブルクリックで任意のブランチに移動
- 任意のブランチを右クリックしてリネーム
- 任意のブランチを右クリックして不要なブランチの削除
GitHub Pull Requests
プルリクエストをVSCode上で確認することができます。
私はブラウザのGitHubでコードレビューをするのが苦手でした。
どうにも全体像を掴みにくいというか、差分や意味を理解することがしづらかったのです。
しかし、この拡張機能に出会ってからは差分の確認や全体像の把握がしやすくなりました。
GitHubが公式で出しているだけあってコメントをつけることはもちろん、approveも出すことも可能です。
GitLens — Git supercharged
コード上でのコミット履歴
ファイルの変更履歴
gitに関する拡張機能です。
基本的には機能がたくさんありすぎて紹介しきれないですが、私が使っているのは主に以下です。
- そのコードがいつ変更されたのかの履歴をコード上で確認
- ファイル単位でいつどのように変更されたのかを確認
- 今回のブランチで変更されたコードの差分確認
詳しく紹介されている方の記事は以下となります。
終わりに
いかがでしたでしょうか？
この記事ではFlutterエンジニアにとって役立つVSCodeの拡張機能を17個紹介しました。
どれも筆者が実際に使い、便利さを実感したものばかりです。
VSCodeの拡張機能は、適切に活用することで開発効率やコードの品質を大きく向上させることができます。
ただし、拡張機能を入れすぎるとエディターが重くなったり、設定が複雑になったりする場合がありますので、必要なものを取捨選択して導入することをおすすめします。
私が今回紹介していないものでみなさんのおすすめの拡張機能がございましたら、コメントにて教えていただければ幸いです。
この記事が初学者の方や拡張機能でお困りの方のお力になれれば幸いです。