0

0

vscode怎么执行dart程序 vscode配置flutter环境指南

看不見的法師

看不見的法師

发布时间:2025-07-10 20:35:01

|

397人浏览过

|

来源于php中文网

原创

要在 vscode 中运行 dart 程序和配置 flutter 开发环境,需按以下步骤操作:1. 安装 dart sdk 并验证版本;2. 安装 vscode 的 dart 插件并打开项目文件夹;3. 创建 dart 脚本并通过编辑器按钮或终端命令运行;4. 下载 flutter sdk 并配置环境变量;5. 安装 vscode 的 flutter 插件并重启编辑器;6. 通过命令面板创建 flutter 项目;7. 连接设备或启动模拟器后选择设备运行应用。以上步骤完成后即可高效开发

vscode怎么执行dart程序 vscode配置flutter环境指南

运行 Dart 程序和配置 Flutter 开发环境在 VSCode 上其实挺直接的,只要插件和基础环境搭好了,写代码就顺手很多。下面分两部分讲:一部分是关于怎么用 VSCode 执行 Dart 程序,另一部分是如何配置好 Flutter 的开发环境。

vscode怎么执行dart程序 vscode配置flutter环境指南

如何在 VSCode 中执行 Dart 程序

如果你只是想跑一个纯 Dart 脚本,比如写个命令行工具或者练习语法,那操作不复杂:

  • 先装好 Dart SDK:可以从官网下载安装包,安装完之后终端里敲 dart --version 能看到版本号才算成功。

    vscode怎么执行dart程序 vscode配置flutter环境指南
  • VSCode 安装 Dart 插件:搜索 “Dart” 插件,由 Dart 团队官方维护的那个,装上之后就能识别 .dart 文件了。

  • 打开项目文件夹:建议新建一个目录放你的 Dart 代码,然后用 VSCode 打开这个文件夹。

    vscode怎么执行dart程序 vscode配置flutter环境指南
  • 创建并运行脚本:比如写个 main.dart,里面写个打印语句:

    void main() {
      print('Hello, Dart!');
    }
  • 运行方式有两种

    • 在编辑器右上角有个“运行和调试”按钮(或按 Ctrl+Shift+D),点一下再点运行,它会自动执行 main() 函数。
    • 或者用终端执行命令:dart run main.dart

如果提示找不到命令,说明 Dart 没加到系统路径里,得回去检查安装步骤。


怎么在 VSCode 配置 Flutter 开发环境

Flutter 是基于 Dart 的框架,但多了设备模拟、热重载等功能,所以除了 Dart 插件,还需要额外装 Flutter 插件和 SDK。

千图设计室AI海报
千图设计室AI海报

千图网旗下的智能海报在线设计平台

下载

1. 安装 Flutter SDK

Flutter 官网 下载对应系统的压缩包,解压后把 flutter/bin 加入系统 PATH。验证是否成功,在终端输入:

flutter doctor

如果显示“command not found”,说明路径没设置对,需要回头查下环境变量。

2. 安装 VSCode 插件

除了前面说的 Dart 插件,还要装 Flutter 插件,也是在 VSCode 扩展商店里搜 “Flutter”,装那个官方出品的。

装完这两个插件之后,重启 VSCode。

3. 创建或打开 Flutter 项目

可以在 VSCode 里通过命令面板(Ctrl+Shift+P)输入 “Flutter: New Project” 来创建新项目,也可以手动用命令行创建然后用 VSCode 打开。

4. 运行 Flutter 应用

确保你有连接真机或者开了模拟器。如果没有 Android 设备,可以先用 flutter emulators 启动一个模拟器。

然后回到 VSCode,点击右下角的状态栏,选择你要运行的设备,再点右上角的运行按钮,就会开始编译并启动 App。

热重载功能也很方便,改完代码保存后,点击终端里的 “r” 键就能快速刷新界面。


基本上就这些。前期可能会遇到一些路径问题或者插件加载失败的情况,多数时候重启 VSCode 或者重新加载插件能解决。配置一次之后,后面开发效率会高很多。

相关专题

更多
vscode
vscode

VS Code(Visual Studio Code)是一款免费、开源的跨平台代码编辑器,由微软开发和维护。它被广泛用于软件开发和编程,支持多种编程语言和框架。VS Code 同时提供了丰富的功能和扩展性,使开发者可以高效地编写、编辑和调试代码。

577

2023.06.30

vscode怎么运行代码
vscode怎么运行代码

vscode是一个运行于MacOS X、Windows和Linux之上的,针对于编写现代Web和云应用的跨平台源代码编辑器;vscode免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

219

2023.07.21

vscode使用的框架介绍
vscode使用的框架介绍

VSCode是一款跨平台代码编辑器,它基于Electron框架和Monaco Editor构建。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

384

2024.03.14

vscode一般用来写什么语言
vscode一般用来写什么语言

VSCode是一款功能强大的代码编辑器,支持多种编程语言和文件格式。它内置对 JavaScript、Python、Java、C++、TypeScript、HTML/CSS、Go 等语言的支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

373

2024.03.14

vscode可以写什么语言
vscode可以写什么语言

vscode是一款强大的代码编辑器,支持多种编程语言的开发。通过安装扩展,可以为 JavaScript/TypeScript、Python、Java、C#、PHP、Go、Ruby、Rust、HTML/CSS 等语言提供智能代码补全、调试和格式化等功能。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

542

2024.03.15

vscode中文设置方法
vscode中文设置方法

方法一:在设置页面中,搜索“locale”,并选择“zh-cn”。方法二:按“Ctrl Shift P”快捷键,输入“Configure Display Language”,将语言修改为“zh-cn”。如果上述方法无效,可考虑安装中文插件。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

540

2024.03.15

vscode用途介绍
vscode用途介绍

Visual Studio Code(VSCode)是一款由 Microsoft 开发的多功能文本编辑器,适用于各种编程语言。作为一款开源软件,VSCode 拥有代码高亮、自动补全、调试、Git 集成等强大功能,成为程序员不可或缺的工具。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

444

2024.03.15

vscode和visualstudio的区别
vscode和visualstudio的区别

Visual Studio是一款功能强大的集成开发环境(IDE),适用于专业开发人员进行复杂项目的构建。而VSCode则是一款轻量级的代码编辑器,更适合各种规模的项目开发。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

502

2024.03.15

php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

65

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
go语言零基础开发内容管理系统
go语言零基础开发内容管理系统

共34课时 | 2.5万人学习

第二十三期_前端开发
第二十三期_前端开发

共98课时 | 7.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号