MS_DartFlutterForVSCode

Dart・Flutter for Visual Studio Code

• 戻る（Visual Studio Code）
  • CSharp for Visual Studio Code
  • Python for Visual Studio Code
  • Dart・Flutter for Visual Studio Code

概要

• Visual Studio Code の Dart・Flutter 拡張機能
• コード補完などの他、デバッグに関する機能などがある。

詳細

Flutterのファースト・ステップ２（DNET_FlutterFirstStep2.md）

補足（拡張機能の構成と主要機能）: 本文が参照リンクのみのため、
押さえどころを補う。

【入れるのは 2 つ（実質 1 つ）】★
   ・【Dart】拡張（Dart-Code.dart-code）
       言語サーバ、補完、デバッグ、フォーマット
   ・【Flutter】拡張（Dart-Code.flutter）
       → 【Dart 拡張を自動的に一緒に入れる】ため、
         Flutter をやるなら Flutter だけ入れればよい ★

   ※ どちらも作者は Danny Tuppeny 氏（Google が公式に採用）

【よく使う機能】
 ・【Hot Reload】★
     保存するだけで実行中のアプリに変更が反映される
     （状態を保ったまま UI が差し替わる）
     → Flutter の生産性の中核
 ・【Hot Restart】
     状態を捨てて再起動（Ctrl+F5 相当）
 ・【Widget Inspector】
     実行中の Widget ツリーを可視化
     → レイアウト崩れの原因追跡に必須
 ・【コマンド パレット】（Ctrl+Shift+P）
     Flutter: New Project
     Flutter: Select Device      ← 実機/エミュレータの切替 ★
     Flutter: Run Flutter Doctor ← 環境不備の診断 ★
 ・【リファクタリング補助】
     Widget を Column/Row/Padding で包む、
     Widget を抽出する等が Quick Fix（Ctrl+.）から行える ★
     → ネストが深くなりがちな Flutter では効果が大きい

【最初に躓く点】
 ① 【flutter doctor が通らない】
     Android SDK / Android Studio のライセンス未同意
     → flutter doctor --android-licenses
 ② 【デバイスが見つからない】
     Windows デスクトップ ターゲットなら
     「デスクトップ C++ 開発」ワークロードが要る
 ③ 【VS Code が Flutter SDK を見つけない】
     PATH に flutter/bin を通すか、
     設定 dart.flutterSdkPath を指定する

【VS Code と Android Studio のどちらを使うか】★
   ・VS Code       … 軽い。日常のコーディングはこちらが快適 ★
   ・Android Studio… エミュレータ管理、
                     Gradle まわりのトラブル対応に強い
   → 【両方入れて併用する】のが実務では一般的

参考

Microsoft Docs

• Windows11のVSCodeでUbuntu(WSL2)のJupyterに接続する - おもちゃバコ
  https://lambda00.hatenablog.com/entry/2025/08/02/174557

• WSL上のJupyter NotebookをWindowsのVSCodeから利用する完全ガイド #Ubuntu - Qiita
  https://qiita.com/itlegacy/items/881ca168e428695c7518

• Visual Studio Code を使用して Python 初心者向けの開発環境をセットアップする - Learn
  https://docs.microsoft.com/ja-jp/learn/modules/python-install-vscode/

移行メモ（内容の不整合）: 上記「参考」の 3 件は
いずれも Jupyter / Python に関するもので、
本ページの主題（Dart・Flutter）とは無関係である
（Python for Visual Studio Code からの
コピー時の混入と思われる）。
移行元の記述をそのまま残したが、
Dart・Flutter の情報としては参照しないこと。
併せて、見出しが「Microsoft Docs」でありながら
個人ブログ・Qiita が含まれている点も移行元のままである。

補足（本来参照すべき一次情報）: 上記の不整合を補うため、
Dart・Flutter 拡張の公式情報を挙げておく。

• Flutter 公式 > Set up an editor（VS Code）
  https://docs.flutter.dev/get-started/editor
• Dart-Code（拡張機能のドキュメント）
  https://dartcode.org/
• Visual Studio Marketplace > Flutter
  https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

---

Tags: 移行, プログラミング, ツール類