Skip to content

如何在 VSCode 中使用 Streamlit：2025 全新分步指南

Olaf Källström
Name
Olaf Källström

Updated on

想要强化你的 Python 开发流程吗？
Streamlit + VSCode 依然是构建数据应用的高速组合——尤其适合工程师、数据科学家、数据分析师和机器学习从业者。

这篇 2025 年更新版指南将带你完成：

  • ✔ 如何在 VSCode 中正确配置 Streamlit
  • ✔ 如何使用虚拟环境（最佳实践）
  • ✔ 如何在 VSCode 内部调试 Streamlit 应用
  • ✔ 如何使用 Stlite 扩展预览应用
  • ✔ 如何通过 2025 年主流托管方式 部署 Streamlit 应用
  • ✔ 以及如何用 PyGWalker 提升工作流，实现低代码可视化

下面开始。

基础概念：Streamlit + VSCode

什么是 Streamlit？

Streamlit 是一个开源的 Python 框架，用来构建交互式 Web 应用——不需要掌握 HTML、CSS 或 JavaScript。
它可以在几分钟内把 Python 脚本变成可分享的数据应用。

主要优势：

  • 不需要前端开发基础
  • 实时热重载
  • 简单易用的组件（滑块、下拉选择、文件上传、图表等）
  • 非常适合数据探索、仪表盘、机器学习 Demo

截至 2025 年，Streamlit 已经成为许多数据团队的「默认」工具，用来替代临时仪表盘、Jupyter 组件以及内部 BI 原型。

为什么在 VSCode 中使用 Streamlit？

VSCode 能明显增强使用 Streamlit 的体验：

1. 🔥 快速开发

写代码 → 保存 → 应用自动刷新。

2. 🧩 丰富生态

Python 扩展、Git 集成、Copilot / Cursor 类 AI 工具、格式化、Lint 等一应俱全。

3. 🐞 一流调试体验

VSCode 支持断点、变量查看、单步执行等调试能力，用于排查 Streamlit 逻辑问题非常方便。

4. 🚀 与现代工具完美协同

可与虚拟环境、Conda、uv、Docker、远程 SSH、Dev Containers 等配合使用。

需要注意的限制

Streamlit 很强大，但也有边界：

  • 不适合做特别重的自定义前端或复杂多页面业务应用
  • 其无状态设计让复杂状态管理变得困难
  • UI 灵活度不如完整的 Web 框架（如 FastAPI + React、Django 等）

不过，对 90% 的内部仪表盘和机器学习工具来说，它已经绰绰有余。

2025 年在 VSCode 中使用 Streamlit 的完整流程

下面是当前推荐的现代工作流。

第 1 步 — 创建虚拟环境（最佳实践）

不要在全局环境中安装 Streamlit，推荐这样做：

python3 -m venv .venv
source .venv/bin/activate      # macOS / Linux
.venv\Scripts\activate         # Windows

或者使用 uv（极快）：

uv venv
source .venv/bin/activate

第 2 步 — 安装 Streamlit

pip install streamlit

第 3 步 — 在 VSCode 中创建 Python 文件

新建一个名为 example.py 的文件：

import streamlit as st
 
st.title("My First Streamlit App")
st.write("Hello, VSCode + Streamlit!")

第 4 步 — 在 VSCode 终端中运行 Streamlit

打开终端：

  • Windows / Linux: Ctrl + Shift + `
  • macOS: Cmd + J

然后执行：

streamlit run example.py

浏览器会自动打开：

http://localhost:8501 (opens in a new tab)

进阶：在 VSCode 中调试 Streamlit 应用

添加 .vscode/launch.json 文件：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Streamlit App",
      "type": "python",
      "request": "launch",
      "module": "streamlit",
      "args": ["run", "example.py"],
      "console": "integratedTerminal"
    }
  ]
}

这样就可以使用 断点、单步执行、变量面板 来调试 Streamlit 应用。

使用 PyGWalker 创建 Streamlit 可视化应用（更新版）

PyGWalker (opens in a new tab) 能在 Streamlit 中提供类似 Tableau 的分析界面，而且几乎不需要写代码。

非常适合：

  • 数据探索
  • 仪表盘原型
  • 分享分析结果

最小示例：

import streamlit as st
import pygwalker as pyg
import pandas as pd
 
df = pd.read_csv("your-data.csv")
pyg.walk(df, env="streamlit")

在线 Demo → https://pygwalkerapp-d0iztqkzcmr.streamlit.app/ (opens in a new tab)

Sven（CodingIsFun）的教学视频：

VSCode 扩展：Stlite（信息更新）

Stlite extension 提供：

  • Streamlit 代码高亮
  • 常用函数代码片段
  • VSCode 内置预览面板
  • 快速测试时无需打开浏览器

使用方式：

  1. 打开命令面板 → 选择 Launch stlite preview
  2. 选择一个 .py 文件
  3. 预览会出现在 VSCode 编辑器面板中

局限性

  • 使用的是基于 WebAssembly 的 Streamlit 版本
  • 部分组件行为与完整 Python 后端略有不同
  • 需要网络来加载 WASM 资源（离线模式有限制）

但对快速原型开发来说依然非常好用。

部署：如何部署 Streamlit 应用

早期的 “Streamlit Sharing” 已经下线。

当前主流部署方式包括：

✅ Streamlit Community Cloud（新手推荐）

免费、快速、配置简单。

✅ Railway.app

一键部署，自动构建。

✅ Render.com

有免费套餐，支持自动扩缩。

✅ HuggingFace Spaces

非常适合机器学习 Demo。

✅ AWS / GCP / Azure

适合生产级场景——通常配合 Docker + 负载均衡使用。

教程：
➡ /topics/Streamlit/deploy-streamlit-app

常见问题解答

1. 如何在 VSCode 中停止运行 Streamlit？
在 VSCode 终端中点击停止按钮，或者按 Ctrl+C。

2. 如何打开应用页面？
在浏览器访问：http://localhost:8501。

3. 可以在 Google Colab 中使用 Streamlit 吗？
可以——安装 Streamlit，并使用 pyngrok 建立到本地服务的隧道。

4. 为什么要使用虚拟环境？
虚拟环境可以隔离依赖，避免不同项目之间的版本冲突。

5. Streamlit 的常见限制有哪些？
UI 自定义能力有限、无状态设计导致复杂状态管理较难，不太适合特别大型的前端应用。

6. Streamlit 一般用来做什么？
机器学习 Demo、仪表盘、内部工具、数据探索、快速交互式应用等。

总结

在 2025 年，使用 Streamlit + VSCode 是构建数据应用的高效方式。
无论你是在做数据探索、搭建仪表盘，还是开发内部工具，这套工作流都能提供：

  • 快速迭代
  • 规范的开发环境
  • 强大的调试能力
  • 现代化的部署选择

再结合 PyGWalker、Stlite，以及 VSCode 不断进化的 AI 生态，你就拥有了一整套数据产品开发环境。