Skip to content

Comment utiliser Streamlit avec VSCode : guide étape par étape (mis à jour pour 2025)

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

Updated on

Prêt à booster votre workflow de développement Python ?
Streamlit + VSCode reste l’une des façons les plus rapides de créer des applications data — en particulier pour les ingénieurs, data scientists, analystes et praticiens du ML.

Cette version mise à jour (édition 2025) vous explique :

  • ✔ Comment configurer correctement Streamlit dans VSCode
  • ✔ Comment utiliser des environnements virtuels (bonne pratique)
  • ✔ Comment déboguer des applications Streamlit dans VSCode
  • ✔ Comment prévisualiser vos apps avec l’extension Stlite
  • ✔ Comment déployer des apps Streamlit avec des options d’hébergement modernes en 2025
  • ✔ Et comment enrichir votre workflow avec PyGWalker pour de la visualisation no-code

Allons-y.

Concepts de base : Streamlit + VSCode

Qu’est-ce que Streamlit ?

Streamlit est un framework Python open source pour créer des applications web interactives — sans avoir besoin de HTML, CSS ou JavaScript.
Il transforme des scripts Python en applications data partageables en quelques minutes.

Principaux avantages :

  • Aucune compétence front-end nécessaire
  • Rechargement automatique en temps réel
  • Widgets faciles (sliders, listes déroulantes, upload de fichiers, graphiques)
  • Très adapté à l’exploration de données, aux dashboards, aux démos ML

En 2025, Streamlit est devenu l’outil par défaut pour de nombreuses équipes data, remplaçant des dashboards ad hoc, widgets Jupyter et prototypes BI internes.

Pourquoi utiliser Streamlit dans VSCode ?

VSCode améliore considérablement l’expérience Streamlit :

1. 🔥 Développement rapide

Écrire le code → Sauvegarder → Actualisation automatique de l’app instantanément.

2. 🧩 Écosystème riche

Extension Python, intégration Git, outils d’IA type Copilot/Cursor, formatage, linting, et plus encore.

3. 🐞 Débogage de première classe

VSCode permet les breakpoints, l’inspection des variables et l’exécution pas à pas de votre logique Streamlit.

4. 🚀 Intégration fluide avec les outils modernes

Fonctionne avec les environnements virtuels, Conda, uv, Docker, SSH distant, dev containers, etc.

Limitations à garder en tête

Streamlit est puissant, mais :

  • Pas adapté à des frontends très personnalisés ou des applications multi-pages très complexes
  • Son design sans état rend la gestion d’état avancée plus délicate
  • UI moins flexible que les frameworks web complets (FastAPI + React, Django, etc.)

Pour 90 % des dashboards internes et outils ML, en revanche, c’est parfait.

Comment utiliser Streamlit dans VSCode (tutoriel 2025 étape par étape)

Voici le workflow moderne recommandé.

Étape 1 — Créer un environnement virtuel (bonne pratique)

Au lieu d’installer Streamlit globalement, faites ceci :

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

Ou si vous utilisez uv (très rapide) :

uv venv
source .venv/bin/activate

Étape 2 — Installer Streamlit

pip install streamlit

Étape 3 — Créer un fichier Python dans VSCode

Créez un fichier appelé example.py :

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

Étape 4 — Lancer Streamlit depuis le terminal VSCode

Ouvrez le terminal :

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

Puis exécutez :

streamlit run example.py

Votre navigateur s’ouvrira automatiquement sur :

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

Bonus : déboguer des apps Streamlit dans VSCode

Ajoutez un fichier .vscode/launch.json :

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

Vous pouvez maintenant déboguer avec breakpoints, exécution pas à pas et panneau de variables.

Créer une application de visualisation Streamlit avec PyGWalker (mis à jour)

PyGWalker (opens in a new tab) ajoute une interface façon Tableau à Streamlit avec presque aucun code.

Idéal pour :

  • L’exploration de données
  • Les prototypes de dashboard
  • Partager des résultats d’analyse

Exemple minimal :

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

Démo en ligne → https://pygwalkerapp-d0iztqkzcmr.streamlit.app/ (opens in a new tab)

Tutoriel vidéo par Sven (CodingIsFun) :

Extension VSCode : Stlite (infos mises à jour)

L’extension Stlite offre :

  • Coloration syntaxique
  • Snippets pour les fonctions Streamlit courantes
  • Panneau de prévisualisation intégré dans VSCode
  • Pas besoin d’ouvrir le navigateur pour des tests rapides

Comment l’utiliser :

  1. Ouvrir la Command Palette → Launch stlite preview
  2. Choisir un fichier .py
  3. La prévisualisation apparaît dans un panneau de l’éditeur VSCode

Limitations

  • Utilise une version WebAssembly de Streamlit
  • Certains composants se comportent différemment par rapport au backend Python complet
  • Nécessite le réseau pour les ressources WASM (mode hors-ligne limité)

Cela reste excellent pour du prototypage rapide.

Déploiement : comment déployer Streamlit

L’ancienne plateforme “Streamlit Sharing” est abandonnée.

Options de déploiement modernes :

✅ Streamlit Community Cloud (recommandé pour débuter)

Gratuit, rapide, simple.

✅ Railway.app

Déploiement en un clic avec builds automatiques.

✅ Render.com

Offre gratuite + autoscaling.

✅ HuggingFace Spaces

Parfait pour les démos ML.

✅ AWS / GCP / Azure

Pour la production — avec Docker + load balancing.

Tutoriel :
➡ /topics/Streamlit/deploy-streamlit-app

Foire aux questions

1. Comment arrêter Streamlit dans VSCode ?
Cliquez sur le bouton Stop dans le terminal VSCode ou utilisez Ctrl+C.

2. Comment ouvrir l’application ?
Allez sur : http://localhost:8501

3. Puis-je utiliser Streamlit dans Google Colab ?
Oui — installez Streamlit et utilisez pyngrok pour créer un tunnel.

4. Pourquoi utiliser des environnements virtuels ?
Ils isolent vos dépendances et évitent les conflits de versions.

5. Quelles sont les limitations courantes de Streamlit ?
Personnalisation UI limitée, design sans état, pas idéal pour de très grandes apps frontend.

6. À quoi sert Streamlit ?
Démos ML, dashboards, outils internes, exploration de données, apps interactives rapides.

Conclusion

Streamlit + VSCode est l’une des façons les plus rapides de créer des applications data en 2025.
Que vous exploriez des données, construisiez des dashboards ou déployiez des outils internes, ce workflow vous offre :

  • une itération rapide
  • un développement propre
  • un débogage puissant
  • des options de déploiement modernes

Ajoutez PyGWalker, Stlite et l’écosystème IA en constante évolution de VSCode — et vous obtenez un environnement complet pour développer des data products.