需安装Dart与Flutter扩展、配置SDK路径、启用DevTools集成、设置launch.json调试配置,并通过新建Flutter项目验证环境。

If you are setting up Visual Studio Code for Dart and Flutter development, the process involves installing specific extensions, configuring SDK paths, and enabling essential tooling. Below are the steps to establish a fully functional Dart and Flutter coding environment in VSCode:
本文运行环境:MacBook Air,macOS Sequoia
一、Install the Dart and Flutter extensions
This step adds language support, syntax highlighting, code completion, and debugging capabilities for Dart and Flutter projects within VSCode.
1、Open VSCode and click on the Extensions icon in the left sidebar or press Cmd+Shift+X.
2、In the search bar, type Dart Code and install the extension published by Dart-Code.
3、Repeat the search with Flutter and install the official Flutter extension.
二、Configure the Dart and Flutter SDK paths
VSCode needs to locate the installed Dart and Flutter SDKs to provide accurate analysis, autocomplete, and command execution. Manual path configuration is required if auto-detection fails.
1、Open VSCode Settings using Cmd+,.
2、Search for dart.sdkPath and enter the full path to your dart-sdk/bin directory.
3、Search for flutter.sdkPath and enter the full path to your flutter directory root.
三、Enable Dart DevTools integration
Integrating DevTools allows direct access to performance profiling, widget inspection, and debugging tools from within VSCode without switching contexts.
1、Ensure the Dart Code extension is installed and reloaded.
2、Open a Flutter project folder in VSCode.
3、Press Cmd+Shift+P, type Dart: Open DevTools, and select it to launch the browser-based DevTools interface.
四、Set up launch.json for debugging
A custom launch configuration enables breakpoints, variable inspection, and hot reload control during Flutter app execution directly from VSCode.
1、Open the project’s lib/ folder in VSCode.
2、Go to the Run view via Cmd+Shift+D, then click create a launch.json file.
3、Select Flutter as the environment and confirm to generate the default configuration.
五、Verify setup with a new Flutter project
Creating and running a minimal Flutter project confirms that all components—SDK, extensions, and tooling—are correctly linked and operational.
1、Open the integrated terminal in VSCode using Ctrl+`.
2、Run flutter create my_app to generate a new project.
3、Navigate into the project with cd my_app, then run code . to reopen the folder in VSCode.
4、Press F5 or click the green play button in the Run view to start debugging on an attached device or emulator.










