VSCode for Dart and Flutter: A Complete Guide

需安装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.

Google Antigravity

谷歌推出的AI原生IDE，AI智能体协作开发

277

查看详情

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.

以上就是VSCode for Dart and Flutter: A Complete Guide的详细内容，更多请关注php中文网其它相关文章！