Tutoriel Cline pour débutants : installation, première tâche, Plan/Act, règles et MCP
Un tutoriel Cline pas à pas avec 15 captures vérifiées : installez l'extension VS Code, livrez une vraie application avec un modèle gratuit, puis maîtrisez les modes Plan et Act, les règles et les serveurs MCP.
L'essentiel
- Cline est un agent de codage IA gratuit et open source dans VS Code : installez-le depuis le Marketplace des extensions, connectez-vous avec Google ou GitHub et démarrez sans clé API.
- Le niveau Absolutely Free tourne sur des modèles hébergés comme DeepSeek V4 Flash (1M de contexte) et GLM-5.3-Flash ; ce parcours livre une calculatrice IMC fonctionnelle en 15 étapes.
- Le mode Plan élabore la stratégie avec un modèle de raisonnement, le mode Act code avec un modèle rapide — toute l'analyse Plan de la démo a coûté 0,0145 $.
- Passez au niveau supérieur avec votre clé Gemini, des règles globales et d'espace de travail, et des serveurs MCP comme GitHub et Context7 — les trois piliers d'une configuration Cline idéale.
I Found 2 Ways to Use Cline for FREE (Best Free AI Coding Agent)
Vidéo du parcours :HMA WebCode5:26
Ideal Setup for Cline
Source des faits :Cline3:47
Les captures du parcours proviennent de la démo de configuration gratuite de HMA WebCode ; les captures des réglages Plan/Act, des règles et du marketplace MCP proviennent des vidéos courtes de la chaîne officielle Cline, qui servent aussi de source pour le comportement des modes, la portée des règles et la configuration à trois piliers.
Les captures appartiennent à leurs chaînes respectives et sont utilisées avec attribution et liens profonds ; chaque description d'étape est de notre propre rédaction.
Le parcours Cline en 15 étapes
Installer Cline et débloquer l'offre gratuite
- 1
Installer l'extension Cline dans VS Code
Ouvrez la vue Extensions de VS Code, cherchez Cline et cliquez sur Install sur la fiche de l'agent de codage autonome publiée par Cline Bot. Une fois terminé, l'icône du robot Cline apparaît dans la barre d'activité — cliquez dessus pour ouvrir le panneau de l'agent à côté de l'éditeur.
La fiche Cline dans le Marketplace d'extensions de VS Code, prête à installer.Voir à 0:24 - 2
Choisir comment utiliser Cline
À la première ouverture du panneau, Cline demande comment vous souhaitez l'utiliser et propose quatre voies : Absolutely Free (modèles gratuits hébergés), ClinePlans (abonnement payant pour modèles à poids ouverts), Frontier Model (paiement à l'usage via la facturation Cline) et Bring my own API key. Les débutants commenceront par Absolutely Free — sans clé API ni carte bancaire.
L'écran de premier démarrage de Cline avec les quatre options.Voir à 0:34 - 3
Se connecter et accéder à l'offre gratuite
Sélectionnez Absolutely Free, cliquez sur Log in to Cline et connectez-vous avec votre compte Google ou GitHub — une dizaine de secondes, sans moyen de paiement demandé. Vous arrivez sur l'écran du fournisseur avec Cline Usage-Billing sélectionné, qui alimente les modèles gratuits.
Après connexion, Cline affiche le fournisseur Usage-Billing et ses onglets de modèles.Voir à 1:46 - 4
Choisir un modèle gratuit et un effort de raisonnement
Ouvrez le sélecteur de modèles et passez à l'onglet Free : DeepSeek V4 Flash (1M de contexte), GLM-5.3-Flash, LongCat 2.0 et Laguna S 2.1 portent tous la mention FREE. Prenez DeepSeek V4 Flash pour un travail multi-fichiers rapide et laissez Reasoning Effort sur Medium — Low va plus vite, High réfléchit plus profondément mais consomme plus de tokens.
L'ID de modèle deepseek/deepseek-v4-flash sélectionné, Reasoning Effort sur Medium.Voir à 2:12
Exécuter votre première tâche de bout en bout
- 5
Ouvrir une zone de tâche vide
Créez ou ouvrez un dossier de projet dans VS Code, puis cliquez sur l'icône Cline. Le panel vous accueille avec une simple question : ce champ est le point de départ de chaque tâche. La ligne Auto-approve et le bascule Plan/Act se trouvent en bas du panneau.
Le panneau de tâches de Cline prêt pour le premier prompt, avec Plan/Act en coin.Voir à 2:36 - 6
Envoyer votre première tâche
Tapez un objectif concret dans la zone de tâche, par exemple : crée une application web moderne de calculatrice IMC en HTML, CSS et JavaScript où l'utilisateur saisit sa taille en centimètres et son poids en kilogrammes et où l'app affiche l'IMC avec une étiquette de catégorie. Des entrées, sorties et consignes de design précises donnent de bien meilleurs résultats qu'une phrase vague.
Le prompt de la calculatrice IMC saisi dans la zone de tâche de Cline.Voir à 2:58 - 7
Approuver chaque action — ou en auto
Cline avance étape par étape : il veut exécuter une commande, créer un fichier ou en modifier un autre, et montre un diff de chaque changement avant de l'appliquer. Approuvez action par action, ou activez Auto-approve pour Read, Edit et Commands afin qu'il déroule sa liste seul — les checkpoints rendent chaque étape réversible de toute façon.
Cline demande l'approbation de création d'index.html, avec le diff CSS affiché.Voir à 3:06 - 8
Ouvrir l'application terminée
En quelques minutes la tâche se termine avec un résumé et une entrée BMI Calculation Checkpoint. Ouvrez le index.html généré avec Live Server ou n'importe quel serveur statique et testez : 175 centimètres et 70 kilogrammes donnent un IMC de 22,9 — Normal. Une application complète et fonctionnelle sans écrire une seule ligne.
La calculatrice IMC terminée dans le navigateur à côté du résumé de Cline dans VS Code.Voir à 3:17
Les modes Plan et Act sans tokens gaspillés
- 9
Découvrir les modes Plan et Act
Le bascule en bas du panneau alterne entre Plan et Act. En mode Plan, Cline n'enquête que : il lit les fichiers, pose des questions et propose un plan d'implémentation. La fenêtre de réglages porte des onglets du même nom, pour assigner un modèle différent à chaque mode — un bon raisonneur pour Plan, un codeur rapide pour Act.
Réglages de Cline avec les onglets Plan Mode et Act Mode pour un modèle par mode.Voir à 0:48 - 10
Laisser le mode Plan réfléchir avant de coder
Les modèles de raisonnement excellent en mode Plan car décomposer une tâche est de l'analyse, pas de la frappe. Comme rien n'est encore écrit, l'enquête complète est bon marché — l'analyse des violations DRY de la démo a coûté 0,0145 $. Répondez aux questions de Cline pendant qu'il planifie ; chaque correction ici évite des réécritures ensuite.
Une carte de tâche en mode Plan avec l'analyse, les compteurs de tokens et 0,0145 $ de coût API.Voir à 1:10 - 11
Basculer en mode Act pour écrire le code
Quand le plan vous convient, passez en Act — le plan est validé et Cline commence à modifier les fichiers. Les modèles de code sont moins chers et plus rapides pour cette partie, et c'est exactement ce que la séparation des modes économise. Sur l'écran de reprise, Cline affiche le raccourci : Win+Shift+A alterne entre les modes.
Réglages avec l'onglet Act Mode sélectionné et un modèle de code pour l'exécution.Voir à 1:28
Votre clé, vos règles et le marketplace MCP
- 12
Ou apporter votre propre clé gratuite
Vous préférez votre propre quota au pool gratuit partagé de Cline ? Choisissez Bring my own API key, puis Google Gemini, et cliquez sur Get API key dans Google AI Studio — l'offre gratuite ne demande qu'un compte Google. Collez la clé dans le champ API key de Cline, choisissez un modèle Gemini, enregistrez : vous tournez sur votre propre quota.
La boîte de dialogue Create API key de Google AI Studio qui génère la clé Gemini gratuite.Voir à 3:54 - 13
Apprendre vos standards à Cline avec les règles
Les règles sont des instructions persistantes que Cline lit à chaque tâche. Ouvrez l'onglet Rules dans les réglages du panneau : les règles globales s'appliquent à tous les projets de votre machine, tandis que les règles d'espace de travail vivent dans le dépôt courant sous forme de fichiers .clinerules que vous pouvez committer et partager. Idéal pour principes de code, sécurité, documentation et style.
L'onglet Rules dans les réglages de Cline avec les sections Global Rules et Workspace Rules.Voir à 1:06 - 14
Écrire des règles qu'un modèle suit vraiment
Les règles vagues se retournent contre vous — « optimise le code quand c'est possible » laisse à Cline une marge pour vous ignorer. Écrivez des déclencheurs mesurables : optimise le code quand les tests unitaires dépassent 100 millisecondes, applique SOLID quand tu utilises des classes, ajoute des commentaires en ligne quand le code fait des suppositions. Traitez les règles comme un document vivant et éliminez les contradictions.
Un fichier de règles avec trois règles concrètes et mesurables appliquées à chaque tâche.Voir à 1:45 - 15
Étendre Cline avec des serveurs MCP
L'icône MCP Marketplace du panneau ouvre des serveurs en un clic qui ajoutent des capacités à Cline : GitHub pour les opérations de dépôt, Context7 pour la documentation à jour des bibliothèques, Perplexity et Sequential Thinking pour la recherche et la planification. Installez un serveur, approuvez ses outils, et Cline pourra l'appeler en pleine tâche — le troisième pilier de la configuration idéale.
Le marketplace MCP Servers de Cline avec la carte du serveur GitHub et son bouton Install.Voir à 2:44