Récemment, l'outil de programmation Cursor est en plein essor, attirant l'attention de nombreux développeurs. Cependant, bien que Cursor soit puissant, son prix élevé dissuade de nombreux développeurs individuels et petites équipes ; de plus, des outils similaires à Cursor sont basés sur des grands modèles cloud, ce qui pousse ceux qui accordent de l'importance à la confidentialité à préférer des solutions basées sur des modèles locaux. Pour ces raisons, cet article présente aux utilisateurs de Mac (il est préférable que votre ordinateur soit bien configuré, idéalement avec une puce de la série M) une solution open-source locale basée sur VS Code, le plugin Continue et Ollama Qwen2.5-Coder, vous permettant de profiter des puissantes fonctionnalités d'un assistant de programmation IA à moindre coût.

Environnement système

macOS Sonoma 14.6.1
VSCode 1.93.1
Continue 0.8.52
Ollama 0.3.11

1. Téléchargement & configuration de VS Code

Présentation de VS Code
Visual Studio Code est un éditeur de code source léger mais puissant, qui fonctionne sur votre bureau et prend en charge les systèmes Windows, macOS et Linux. Il intègre la prise en charge de JavaScript, TypeScript et Node.js, et dispose d'un riche écosystème d'extensions pour prendre en charge d'autres langages et environnements d'exécution (comme C++, C#, Java, Python, PHP, Go, .NET).

VS Code peut être téléchargé depuis son site officiel[3].
Lien de téléchargement :
https://code.visualstudio.com/

Configuration de l'environnement VS Code+CLang
Ici, j'utilise C++ pour la démonstration, et j'ai configuré l'environnement VSCode+CLang en suivant le tutoriel officiel ci-dessous :
https://code.visualstudio.com/docs/cpp/config-clang-mac

Par exemple, j'ai installé le pack d'extensions C/C++ qui regroupe tous les plugins liés à C++.
Le tutoriel d'installation et de configuration est disponible ici :
https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools-extension-pack

Bien sûr, vous pouvez configurer l'environnement pour n'importe quel langage dont vous avez besoin, mais ce n'est pas le sujet principal de cet article, donc je ne m'étendrai pas là-dessus.

2. Téléchargement & configuration d'Ollama + Qwen2.5 Coder

2.1 Présentation d'Ollama

Ollama est un projet open-source visant à simplifier le déploiement et l'utilisation locale de grands modèles de langage[4]. Ses principales caractéristiques incluent :

• Prise en charge de plusieurs modèles d'IA open-source populaires, tels que Llama 2, CodeLlama et Qwen.
• Interface en ligne de commande simple pour faciliter le téléchargement, l'exécution et la gestion des modèles.
• Prise en charge des modèles personnalisés et ajustement des paramètres pour répondre à des besoins spécifiques.
• Optimisation des performances locales, permettant l'exécution fluide de grands modèles de langage sur des ordinateurs personnels.
• API disponible pour une intégration facile avec d'autres applications.

Site de présentation :
https://ollama.com/

2.2 Présentation de Qwen2.5-Coder

Qwen2.5-Coder est un assistant de programmation IA avancé développé par l'équipe Tongyi Qianwen, disponible en trois tailles de modèles : 1.5B, 7B et bientôt 32B. Il prend en charge une longueur de contexte de 128K tokens et 92 langages de programmation, et améliore considérablement les capacités de génération, d'inférence et de correction de code grâce à un ensemble de données d'entraînement massif de 5.5T tokens. La version 7B surpasse les modèles de plus grande taille dans plusieurs évaluations, en faisant l'un des modèles de base de code les plus puissants actuellement. Qwen2.5-Coder excelle non seulement en programmation, mais conserve également d'excellentes capacités mathématiques et générales. La version Qwen2.5-Coder-Instruct, ajustée par des instructions, renforce encore les capacités de programmation multilingue et de suivi d'instructions complexes. Sous licence Apache 2.0, il vise à accélérer l'application et l'innovation dans le domaine de l'intelligence du code.[1]

C'est ce modèle que nous souhaitons exécuter localement, et dans cet article, nous utiliserons Qwen2.5-Coder-Instruct pour des exemples.
Page de présentation du modèle :
https://qwenlm.github.io/blog/qwen2.5-coder/

D'après la présentation, nous pouvons voir qu'il surpasse la plupart des modèles open-source :

Vous pouvez également l'essayer directement sur Hugging Face :
https://huggingface.co/spaces/Qwen/Qwen2.5-Coder-7B-Instruct

2.3 Installation d'Ollama

Pour Ollama, les utilisateurs de Mac peuvent visiter le site officiel pour télécharger et installer :
https://ollama.com/

Double-cliquez sur l'application Qllama.app décompressée et suivez les étapes pour installer l'outil en ligne de commande ollama :

2.4 Configuration d'Ollama et des modèles Qwen2.5-Coder-Instruct

Modèle pour la fonction Chat : Qwen2.5-Coder-Instruct 7B
Ce modèle est disponible sur la page suivante :
https://ollama.com/library/qwen2.5-coder

Ouvrez le terminal et exécutez la commande suivante pour télécharger les modèles Qwen2.5-Coder-Instruct 7B et 1.5B. Au moment de la publication de cet article, seul le modèle 7B est disponible, mais des modèles plus puissants seront disponibles ultérieurement :

Tout d'abord, téléchargez un modèle 7B pour les dialogues de la fenêtre Chat. Ce modèle est relativement lent, mais contrairement aux modèles de plusieurs dizaines ou centaines de B, la plupart des ordinateurs peuvent encore le faire fonctionner :

ollama pull qwen2.5-coder:7b-instruct

Ensuite, un fichier de 4.7G sera téléchargé, ce qui prendra un certain temps. Si tout se passe bien, vous verrez un écran similaire :

Modèle pour la fonction Autocomplete : StarCode2 3B
Pour l'Autocomplete, le modèle recommandé est StarCode2 3B. D'après les tests, ce modèle est plus grand et donc plus lent, mais il est plus performant. Si votre ordinateur est bien configuré, vous pouvez installer celui-ci :
Lien : https://ollama.com/library/starcoder2

Téléchargez le modèle :

ollama pull starcoder2:3b

Si ce modèle est trop lourd, vous pouvez utiliser un modèle plus petit, DeepSeek Coder 1.3B :

ollama pull deepseek-coder:1.3b-base

En résumé, comme l'Autocomplete nécessite un fonctionnement plus fréquent et rapide, mais n'a pas besoin de traiter des entrées complexes comme le Chat, il est préférable d'utiliser un modèle petit et rapide pour un meilleur compromis entre performance et consommation d'énergie.

Modèle pour la fonction Embedding : Nomic Embed Text
Pour la fonction Embedding, le modèle recommandé est Nomic Embed Text, qui est très petit :
Lien : https://ollama.com/library/nomic-embed-text

Téléchargez le modèle :

ollama pull nomic-embed-text

Si vous avez besoin de fermer le processus Qllama, vous pouvez utiliser la commande suivante :

 pkill ollama

2.5 Configuration d'OpenWebUI pour tester les modèles Ollama (optionnel)

Vous pouvez également configurer une interface de chat similaire à OpenAI ChatGPT, qui permet de basculer automatiquement entre ces modèles pour les tester. OpenWebUI est une application Web officiellement supportée par Ollama, et il est recommandé d'utiliser Docker pour l'installer :

docker run -d -p 3000:8080 --add-host=host.docker.internal:host-gateway -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:main

Ensuite, ouvrez la page Web : http://localhost:3000/ pour l'utiliser

Démonstration des fonctionnalités :

Page de référence : https://openwebui.com/

3. Installation & configuration du plugin Continue

Une fois les modèles Ollama et Qwen2.5 Coder installés, installez le plugin Continue dans VS Code. Ouvrez VS Code, utilisez le raccourci Cmd+Shift+X pour accéder au marché des extensions, recherchez et installez le plugin "Continue".

3.1 Présentation du plugin Continue

Continue est un puissant plugin pour VS Code, conçu pour intégrer de manière transparente un assistant de programmation IA dans votre flux de travail de développement[2]. Ses principales caractéristiques incluent :

• Prise en charge de plusieurs modèles d'IA, y compris des modèles locaux et des services cloud.
• Fonctionnalités de complétion de code, d'explication, de refactorisation et de génération.
• Capacité à comprendre le contexte de votre code et de vos commentaires pour fournir des suggestions plus précises.
• Prise en charge des invites et des flux de travail personnalisés pour répondre à différents besoins de programmation.
• Fonctionnalités de protection de la vie privée, permettant l'exécution locale des modèles d'IA pour protéger la sécurité de votre code.

3.2 Installation du plugin Continue

Pour installer le plugin Continue dans Visual Studio Code, suivez les étapes ci-dessous :

1. Ouvrez Visual Studio Code : Lancez votre éditeur Visual Studio Code.
2. Accédez au marché des extensions : Dans la barre d'activités à gauche, cliquez sur l'icône des extensions (généralement un carré), ou utilisez le raccourci Ctrl+Shift+X.
3. Recherchez le plugin Continue : Dans la barre de recherche du marché des extensions, tapez "Continue", puis appuyez sur Entrée.
4. Installez le plugin : Dans les résultats de recherche, trouvez le plugin Continue et cliquez sur le bouton "Installer".
5. Configurez le plugin : Une fois l'installation terminée, vous devrez peut-être effectuer quelques configurations selon vos besoins. Vous pouvez consulter la documentation officielle de Continue pour des instructions détaillées.
6. Redémarrez VS Code : Pour vous assurer que le plugin fonctionne correctement, il est recommandé de redémarrer Visual Studio Code.

Après le redémarrage, utilisez le raccourci Cmd+L pour ouvrir la boîte de dialogue, et il est recommandé de la déplacer vers la barre latérale droite :

Ici, vous pouvez utiliser un compte de test gratuit, avec 50 utilisations du grand modèle Claude Sonnet 3.5. Cependant, dans cet article, nous nous concentrerons sur la configuration du modèle local Qwen2.5 Coder.

Grâce à ces étapes, vous pouvez installer avec succès le plugin Continue dans Visual Studio Code et commencer à l'utiliser pour améliorer votre expérience de développement.

3.3 Configuration du plugin Continue avec les modèles Ollama + Qwen2.5 Coder

Ensuite, dans VS Code dans la configuration du plugin Continue utilise ce modèle.

Configurer le modèle de fonctionnalité Chat

La partie Chat du modèle nécessite simplement de cliquer sur le menu de sélection du modèle dans la fenêtre de chat et d'ajouter le modèle :

Ajoutez d'abord le modèle :

Lors de l'ajout, sélectionnez Ollama et choisissez Autodetect, il détectera automatiquement le modèle local que vous avez déjà installé.

Si tout est en ordre, vous verrez ces deux modèles dans la liste. Ici, nous définissons le modèle 7B comme modèle local pour l'utilisation du Chat :

Si vous rencontrez des problèmes de coupure lors de la génération de longs codes, vous pouvez éditer le fichier config.json et modifier cette section (ajoutez le paramètre maxTokens, par défaut à 600) :

    {
      "title": "Qwen2.5 Coder 7B Instruct",
      "provider": "ollama",
      "model": "qwen2.5-coder:7b-instruct",
      "completionOptions": {
        "maxTokens": 2048
      },
      "useLegacyCompletionsEndpoint": false
    },

Configurer le modèle de fonctionnalité Autocomplete

Si vous utilisez StarCode2 3B, vous pouvez modifier la configuration comme suit :

  "tabAutocompleteModel": {
    "title": "StarCode2 3B",
    "provider": "ollama",
    "model": "starcoder2:3b"
  },

Si vous utilisez DeepSeek Coder 1.3B, vous pouvez modifier la configuration comme suit :

  "tabAutocompleteModel": {
    "title": "DeepSeek Coder 1.3B",
    "provider": "ollama",
    "model": "deepseek-coder:1.3b-base"
  },

Les modèles ci-dessus se comportent différemment selon les langages de programmation. Le modèle recommandé est StarCode2 3B, mais si votre ordinateur est moins performant, vous pouvez envisager d'utiliser DeepSeek Coder 1.3B.

PS : Bien que Qwen2.5 Coder propose également un petit modèle 1.5B, il n'est pas recommandé officiellement car il n'est pas optimisé pour les tâches d'autocomplétion. Vous pouvez l'essayer par vous-même, mais si vous l'utilisez, vous pourriez rencontrer l'avertissement suivant :

Configurer le modèle de fonctionnalité Embedding

Continue est livré avec un fournisseur de contexte intégré @codebase, qui vous permet de récupérer automatiquement les extraits de code les plus pertinents de votre codebase. Supposons que vous ayez déjà configuré un modèle de chat (par exemple, Codestral, Llama 3), grâce aux embeddings d'Ollama et LanceDB, vous pouvez garder toute l'expérience en local. À ce jour, il est recommandé d'utiliser nomic-embed-text embeddings.

Le modèle recommandé pour cette partie est Nomic Embed Text, et vous pouvez le configurer comme suit :

  "embeddingsProvider": {
    "provider": "ollama",
    "model": "nomic-embed-text"
  },

4. Utiliser Continue pour la programmation assistée par IA

Le plugin Continue propose plusieurs fonctionnalités de programmation assistée par IA, voici quelques méthodes courantes [2] :

4.1 Fonctionnalité Chat

Référence : https://docs.continue.dev/chat/how-to-use-it

Dans le chat à droite, vous pouvez poser des questions librement, par exemple si vous ne savez pas comment utiliser une fonction. En tant qu'assistant de programmation, Continue est particulièrement utile car il permet de poser des questions en utilisant le code comme contexte. Par exemple :

Sélectionner un extrait de code comme contexte pour poser une question

Sélectionnez un extrait de code, puis utilisez le raccourci Cmd + L pour l'ajouter à la fenêtre de chat et poser votre question :

Utiliser @ pour référencer le contexte

Une autre méthode courante consiste à utiliser une série de balises @ pour référencer le contexte dans la fenêtre de chat, par exemple @un_nom_de_fonction, @un_fichier, @codebase pour l'ensemble du projet, etc. :

Continue.dev propose de nombreuses balises de référence courantes, telles que :

• Fichier actif actuel

  Lorsque vous envoyez une requête, appuyez sur Cmd/Ctrl + Option + Enter pour inclure le fichier actuellement ouvert comme contexte.

• Fichier spécifique

  Entrez @files et sélectionnez un fichier pour inclure un fichier spécifique de l'espace de travail comme contexte.

• Dossier spécifique

  Entrez @directory et sélectionnez un répertoire pour inclure un dossier spécifique de l'espace de travail comme contexte.

• Codebase entier

  Entrez @codebase pour inclure l'ensemble de la codebase comme contexte.

• Site de documentation

  Entrez @docs et sélectionnez un site de documentation pour inclure un site de documentation spécifique comme contexte.

• Contenu du terminal

  Entrez @terminal pour inclure le contenu du terminal de l'IDE comme contexte.

• Différences Git

  Entrez @diff pour inclure toutes les modifications de la branche actuelle comme contexte.

• Autres contextes

  Continue.dev propose également d'autres fournisseurs de contexte intégrés et permet de créer des fournisseurs de contexte personnalisés.

Voici quelques explications plus détaillées :
https://docs.continue.dev/chat/context-selection

Démonstration d'utilisation :

4.2 Fonctionnalité d'autocomplétion avec Tab

La fonctionnalité d'autocomplétion de Continue.dev peut fournir des suggestions de code en ligne pendant que vous tapez. Voici comment utiliser cette fonctionnalité en détail :

Activer la fonctionnalité d'autocomplétion

Pour activer l'autocomplétion, vous pouvez :

• Cliquez sur le bouton "Continue" dans la barre d'état en bas à droite de l'IDE
• Ou assurez-vous que l'option Enable Tab Autocomplete est cochée dans les paramètres de l'IDE

Utiliser la fonctionnalité d'autocomplétion

• Accepter la suggestion complète

  Lorsque la suggestion apparaît, appuyez sur la touche Tab pour accepter la suggestion entière.

• Rejeter la suggestion

  Si vous ne souhaitez pas utiliser la suggestion actuelle, appuyez sur la touche Esc pour la rejeter.

• Accepter partiellement la suggestion

  Si vous souhaitez n'accepter qu'une partie de la suggestion, vous pouvez utiliser un contrôle plus fin :

  • Appuyez sur Cmd (Mac) ou Ctrl (Windows/Linux) + la flèche droite (→)
  • Cela vous permet d'accepter la suggestion mot par mot

Avec ces simples actions, vous pouvez tirer pleinement parti de la fonctionnalité d'autocomplétion de Continue.dev pour améliorer votre efficacité de codage. Selon vos besoins, acceptez, rejetez ou acceptez partiellement les suggestions de code.

Démonstration d'utilisation :

4.3 Édition de code

Présentation de la fonctionnalité Edit

La fonctionnalité Edit est un outil pratique fourni par Continue.dev qui vous permet de modifier directement le code dans le fichier actuel. Il vous suffit de surligner le bloc de code que vous souhaitez modifier, de décrire les changements que vous souhaitez apporter, et le système générera une différence (diff) en ligne que vous pourrez accepter ou rejeter.

La fonctionnalité Edit est particulièrement adaptée pour effectuer des modifications de code petites et rapides, telles que :

• Écrire des commentaires
• Générer des tests unitaires
• Refactoriser une fonction ou une méthode

Utilisation de la fonctionnalité Edit

Voici les étapes courantes :

• Surligner le code et activer la fonctionnalité Edit

  Tout d'abord, surlignez le bloc de code que vous souhaitez modifier. Ensuite, appuyez sur Cmd (Mac) ou Ctrl (Windows/Linux) + I pour activer la zone de saisie Edit.

• Décrire les modifications du code

  Dans la zone de saisie, décrivez brièvement les modifications que vous souhaitez apporter au code surligné. Pour la fonctionnalité Edit, une bonne invite doit être relativement courte et précise. Si vous avez besoin d'effectuer une tâche plus longue et plus complexe, il est recommandé d'utiliser la fonctionnalité Chat.

• Accepter ou refuser les modifications

  Le système générera des différences en ligne dans le texte surligné. Vous pouvez naviguer et traiter ces suggestions de modifications de la manière suivante :

  • Accepter une modification : Cmd/Ctrl + Option + Y
  • Refuser une modification : Cmd/Ctrl + Option + N
  • Accepter toutes les modifications : Cmd/Ctrl + Shift + Enter
  • Refuser toutes les modifications : Cmd/Ctrl + Shift + Delete

  Si vous souhaitez demander de nouvelles suggestions pour le même code surligné, il vous suffit d'utiliser à nouveau Cmd/Ctrl + I pour relancer l'invite du modèle.

Prenons un exemple de génération de code de test, nous pouvons surligner ce code, puis cliquer sur Cmd + I et entrer Generate Unit test dans la boîte de dialogue.

Après un court instant, un code de test unitaire sera généré automatiquement (bien sûr, cette génération est assez basique, vous pouvez ajouter plus d'instructions pour que le modèle génère un code plus complet).

4.4 Fonctionnalité Actions

La fonctionnalité Action offre une grande commodité aux développeurs. Action permet aux utilisateurs d'exécuter rapidement des tâches prédéfinies, augmentant considérablement l'efficacité du codage.

Le plugin Continue propose plusieurs Actions prédéfinies utiles, telles que :

• Expliquer le code sélectionné
• Optimiser les performances du code
• Ajouter des tests unitaires
• Corriger les erreurs dans le code

Voici quelques fonctionnalités courantes d'Action :

Commandes Slash

Référence détaillée :
https://docs.continue.dev/customize/slash-commands

Quelques exemples de commandes courantes :

• Les commandes Slash sont activées en tapant '/' et en sélectionnant dans le menu déroulant.
• La commande /edit permet aux utilisateurs de diffuser directement les modifications du code dans l'éditeur.
• La commande /comment invite le LLM à ajouter des commentaires au code surligné.
• La commande /share génère un texte markdown partageable de l'historique de la conversation.
• La commande /cmd génère des commandes shell à partir du langage naturel.
• La commande /commit génère un message de commit pour les modifications git actuelles.
• La commande /http permet de créer des commandes Slash personnalisées sur votre propre point de terminaison HTTP.
• La commande /issue aide à générer un lien vers un brouillon de problème GitHub.
• La commande /so fait référence à StackOverflow pour répondre à des questions.
• La commande /onboard aide les utilisateurs à se familiariser avec un nouveau projet.

Actions du clic droit

Le clic droit vous permet de surligner la zone de code souhaitée, puis de cliquer avec le bouton droit et de sélectionner une action dans le menu déroulant.

Continue propose les options courantes suivantes :

• Add Highlighted Code to Context : Ajouter le code surligné au contexte
• Fix this Code : Corriger ce code
• Optimize this Code : Optimiser ce code
• Write a Docstring for this Code : Écrire une docstring pour ce code
• Write Comments for this Code : Écrire des commentaires pour ce code

Voici quelques explications plus détaillées :
https://docs.continue.dev/actions/how-to-use-it

Conclusion
Après avoir exploré ces différentes fonctionnalités, nous espérons que vous avez maintenant une meilleure compréhension de la manière d'utiliser au mieux Continue et Ollama. Nous espérons que ces outils non seulement amélioreront votre efficacité en programmation, mais aussi stimuleront votre créativité, vous permettant de repousser vos limites dans le monde de la technologie. Bon codage avec l'IA !

Références

1. QwenLM. (2024). Qwen2.5-Coder. GitHub. https://github.com/QwenLM/Qwen2.5-Coder
2. Continue. (2024). Continue - Assistant de codage IA. https://www.continue.dev/
3. Microsoft. (2024). Visual Studio Code. https://code.visualstudio.com/
4. Ollama. (2024). Ollama : Démarrez avec des modèles de langage de grande taille localement. https://ollama.ai/
5. Utilisation de grands modèles locaux pour l'assistance au codage IA avec Ollama et le plugin Continue pour VSCode. (2024). https://mp.weixin.qq.com/s/oqndOraEmIeFCpXT4QYOww
6. Continue. (2024). Serveurs / API compatibles OpenAI. https://docs.continue.dev/customize/model-providers/openai#openai-compatible-servers--apis
7. Continue. (2024). Ollama Code Assistant. https://blog.continue.dev/ollama-code-assistant/