VSCodeでDart/Flutterの開発環境を構築する
この記事では、VSCodeにDartとFlutterの拡張機能をインストールして、Dart/Flutterの開発環境を構築する手順について解説します。
この記事はこんな人にオススメ
- VSCodeでDart/Flutterの開発環境を構築したい人
- DartとFlutterの拡張機能について知りたい人
- Dart/Flutterのコード補完やデバッグ機能を使いたい人
- これからFlutterでのアプリ開発を始めたい人
事前準備
この記事の手順を実行するには、以下の2つが必要です。
- Flutter/Dart SDK: インストールがまだの場合は、HomebrewでFlutter/Dartをインストールするの記事を参照できます
- VSCode: インストールがまだの場合は、HomebrewでVSCodeをインストールするの記事を参照できます
必要な拡張機能
VSCodeでDart/Flutterの開発を行うには、以下の2つの拡張機能が必要です。
| 拡張機能 | ID | 説明 |
|---|---|---|
| Dart | Dart-Code.dart-code | Dartの言語サポート（構文ハイライト、コード補完、デバッグなど） |
| Flutter | Dart-Code.flutter | Flutterの開発サポート（ウィジェットの補完、Hot Reload、デバイス管理など） |
Flutter拡張機能の依存関係
Flutter拡張機能をインストールすると、Dart拡張機能も自動的にインストールされます。そのため、Flutter開発を行う場合はFlutter拡張機能のみをインストールすれば、Dart拡張機能も合わせて導入されます。
拡張機能のインストール
VSCodeからインストールする
以下の手順で拡張機能をインストールします。
- VSCodeのサイドメニューから「拡張機能」アイコン（四角が4つ並んだアイコン）をクリック
- 検索ボックスに
Flutterと入力 - 検索結果に表示される「Flutter」（Dart-Code製）をクリック
- 拡張機能の詳細画面で「インストール」をクリック
Flutter拡張機能のインストールが完了すると、Dart拡張機能も自動的にインストールされます。インストール後にVSCodeの再起動は不要で、すぐに機能を使用できます。
Webサイトからインストールする
拡張機能はdartcode.orgからもインストールできます。Webページの指示に従うと、VSCodeが起動して拡張機能のインストール画面が表示されます。
インストールされる機能
拡張機能のインストールが完了すると、以下の機能がVSCodeに追加されます。
| 機能 | 説明 |
|---|---|
| 構文ハイライト | Dartのコードがカラーリングされ、コードの構造が視覚的に把握しやすくなる |
| コード補完 | クラス名、メソッド名、プロパティなどの入力候補が自動で表示される |
| デバッグ | ブレークポイントの設定、ステップ実行、変数の確認などが可能 |
| コード分析 | リアルタイムでエラーや警告を検出し、エディタ上に表示する |
| リファクタリング | 変数名の変更やメソッドの抽出などのリファクタリング操作に対応 |
| Hot Reload | Flutterアプリの実行中にコード変更を即座に反映する（Flutter拡張機能） |
| デバイス管理 | 接続されているデバイスやエミュレータの一覧表示と選択が可能（Flutter拡張機能） |
まとめ
この記事では、VSCodeにDartとFlutterの拡張機能をインストールして開発環境を構築する手順について解説しました。
Flutter拡張機能をインストールするとDart拡張機能も自動的にインストールされ、構文ハイライト、コード補完、デバッグ、Hot Reloadなどの機能がVSCodeに追加されます。インストール後の再起動は不要で、すぐに開発を開始できます。
参考リンク: