Il y a trois ans, quand ChatGPT est sorti, mon premier patron m’a dit : “Il y a une IA qui vient de sortir, je n’ai pas dormi de la nuit, c’est incroyable, essaye-la.” Dix minutes plus tard, j’ai testé l’outil, et cela a marqué un tournant dans mon quotidien de développeur… et même dans ma vie de tous les jours, pour être honnête. 😅

Peu de temps après, VSCode, l’environnement de développement intégré (IDE) bien connu, a intégré une extension développée par Microsoft : GitHub Copilot. Cette IA spécialisée dans l’aide au développement a tout de suite changé la donne. Plus besoin de copier-coller du code depuis ChatGPT, l’outil est intégré directement dans l’IDE. Ergonomique et efficace, c’était un avantage notable.

Mais cette année, un nouvel IDE a débarqué : Cursor, avec une intégration native de l’IA. Et là, je vais être honnête, je pense que cet outil a sérieusement pris l’avantage sur GitHub Copilot. Pourquoi ? Je vais vous l’expliquer avec deux exemples simples. Ensuite, je passerai en revue ses avantages, ses limites, et comment j’essaie d’en tirer le maximum.

Cursor : IA et productivité pour les développeurs

En tant que développeur, je passe beaucoup de temps à optimiser mon code, à traquer les bugs, et à implémenter des fonctionnalités plus ou moins complexes. Les IDE avec IA ont pour but d’accélérer tout ce processus en proposant des suggestions intelligentes, en repérant les erreurs plus rapidement, et en aidant à mettre en place des logiques sans avoir à y passer des heures.

Cursor se distingue par sa capacité à analyser non seulement le fichier sur lequel je travaille, mais aussi l’ensemble du projet. Et c’est là sa zone de génie par rapport à Copilot. Ce n’est plus juste une aide contextuelle : Cursor voit tout, et comprend tout. Bon, presque tout.

Implémentation d’une authentification sur un projet fullstack React.js/Node.js

Pour tester la capacité de Cursor à gérer des fonctionnalités globales, j’ai décidé de créer un système d’inscription et d’authentification dans un projet fullstack React/Node.js, qu’on va appeler EisenAppli (ne cherchez pas, le nom est totalement random).

Voici les instructions que j’ai transmises à Cursor :

Implémenter les fonctionnalités d’authentification et d’inscription dans l’application.
Ajouter un schéma de validation Yup pour chaque formulaire.
Créer des tests d’intégration pour les formulaires (spoiler : l’intégration des tests a échoué).
Une fois connecté, l’utilisateur doit voir un toast pour confirmer la connexion.
Après la connexion, l’utilisateur doit être redirigé vers la page d’accueil.

Et là, Cursor a accompli le travail. Il y avait sept instructions en tout, et franchement, à part une erreur de chemin et quelques ajustements de style (parce que bon, chacun ses goûts), je n’ai presque rien eu à modifier. 💪

Exemple de code côté backend : Auth.js


import express from 'express';  
import bcrypt from 'bcrypt';
import jwt from 'jsonwebtoken';
import User from '../models/User.js';

const router = express.Router();

// Route pour l'inscription
router.post('/register', async (req, res) => {
    const { username, email, password } = req.body;

    // Vérifier si l'utilisateur existe déjà
    const existingUser = await User.findOne({ username });
    if (existingUser) {
        return res.status(400).send('Le nom d'utilisateur existe déjà');
    }

    // Hachage du mot de passe
    const hashedPassword = await bcrypt.hash(password, 10);

    // Création d'un nouvel utilisateur
    const newUser = new User({ username, email, password: hashedPassword });
    await newUser.save();
    res.status(201).send('Utilisateur enregistré');
});

// Route pour la connexion
router.post('/login', async (req, res) => {
    const { email, password } = req.body;

    // Vérifier si l'utilisateur existe
    const user = await User.findOne({ email });
    if (!user) return res.status(400).send('Utilisateur non trouvé');

    // Vérification du mot de passe
    const isPasswordValid = await bcrypt.compare(password, user.password);
    if (!isPasswordValid) return res.status(400).send('Mot de passe invalide');

    // Générer un token JWT
    const token = jwt.sign({ id: user._id }, process.env.JWT_SECRET, { expiresIn: '1h' });
    res.json({ token });
});

export default router;

Côté front : exemple sur la page Login


import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
import axios from 'axios';
import { toast } from 'react-toastify';
import { useNavigate } from 'react-router-dom';

const schema = yup.object().shape({
    email: yup.string().email('Email invalide').required('Email est requis'),
    password: yup.string().min(6, 'Le mot de passe doit contenir au moins 6 caractères').required('Mot de passe est requis'),
});

function Login() {
    const { register, handleSubmit, formState: { errors } } = useForm({
        resolver: yupResolver(schema),
    });

    const navigate = useNavigate();

    const onSubmit = async (data) => {
        try {
            const response = await axios.post('http://localhost:5555/auth/login', data);
            if (response.status === 200 || response.status === 201) {
                toast.success('Connexion réussie');
                setTimeout(() => {
                    navigate('/home');
                }, 2000);
            }
        } catch (error) {
            toast.error('Échec de la connexion');
        }
    };

    // Classes pour le style
    const inputClasses = "w-full px-3 py-2 mb-4 text-gray-700 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 transition-all duration-300 hover:border-blue-300 hover:scale-[1.02]";
    const buttonClasses = "w-full py-2 px-4 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600 transition-all duration-300";

    return (
            <form onSubmit={handleSubmit(onSubmit)}>
                <input type="email" {...register('email')} className={inputClasses} placeholder="Email" />
                <p>{errors.email?.message}</p>

                <input type="password" {...register('password')} className={inputClasses} placeholder="Mot de passe" />
                <p>{errors.password?.message}</p>

                <button type="submit" className={buttonClasses}>Connexion</button>
            </form>
    );
}

export default Login;

Donc, en moins de 5 minutes, Cursor m’a pondu deux formulaires (connexion et inscription), un schéma de validation, une logique backend, et un design frontend qui tient la route ! Et voici le résultat en vidéo.

Correction de bug avec Cursor

En modifiant le formulaire de connexion, j’ai fait une erreur de typage et j’ai eu cette magnifique erreur lors de la connexion :


password must be a `number` type, but the final value was: `NaN` (cast from the value `"password123"`).

Une erreur de typage assez simple, j’ai envoyé ce prompt à Cursor, et non seulement il a corrigé l’erreur, mais il a aussi mis à jour les autres fichiers concernés, côté front et backend. 🔥

Les limites de Cursor

Mais attention, Cursor a ses limites, surtout lorsqu’il s’agit de répondre à des besoins métiers très spécifiques. Par exemple, pour des fonctionnalités complexes ou des logiques métier vraiment pointues, l’outil peut parfois se perdre. Il est donc essentiel de bien structurer les instructions et de formuler des demandes claires.

Par exemple, si vous lui demandez : « Écris-moi un script qui fait apparaître un café sur mon bureau à chaque fois que je pousse du code en production », il ne va évidemment rien comprendre à ça.

En revanche, si vous décomposez la tâche en étapes claires, comme :

Récupère les commandes de café en attente dans cette base de données,
Envoie une demande à la machine à café connectée,
Au déclenchement, génère un message Slack pour informer que le café est prêt,
etc…

Eh bien là, Cursor peut suivre et exécuter chaque étape. Il suffit juste d’être clair et précis !

Quels sont les avantages de l’IDE Cursor avec IA ?

Voici les principaux avantages que j’ai constatés en utilisant Cursor :

Analyse globale du projet : Il prend en compte tous les fichiers, ce qui permet de détecter et corriger des erreurs qui touchent plusieurs parties du projet.
Suggestions de code précises : Pour les tâches classiques comme l’authentification ou la gestion des bases de données, Cursor est rapide et pertinent.
IA intégrée directement dans l’IDE : Pas besoin de copier-coller du code depuis ChatGPT, l’outil est déjà dans l’IDE.
Facilité d’utilisation : Même pour des tâches plus complexes, Cursor reste accessible.
Productivité accrue : L’IA permet d’accélérer le développement et d’éviter les erreurs classiques, ce qui limite les allers-retours pour déboguer.

Quelles sont les limites de Cursor avec IA ?

Même si Cursor est impressionnant, il a quelques limites :

Gestion des logiques métier complexes : Pour des besoins spécifiques, l’IA peut être un peu à la traîne.
Nécessité de donner des instructions claires : Plus la demande est vague, plus l’IA peut se perdre.
Flexibilité limitée pour des projets très personnalisés : Sur des environnements très atypiques, l’IA a parfois du mal à proposer des solutions originales.
Sur-sollicitation de l’IA : Trop compter sur l’IA peut nuire à la créativité et à la logique propre du développeur. Un matin, je me suis même surpris à lui écrire “Bonjour”…

Comparaison : Cursor vs GitHub Copilot

Jusqu’à présent j’utilisais GitHub Copilot, et là où Copilot excelle dans la complétion de code à partir du contexte immédiat, Cursor va un cran plus loin en analysant l’ensemble du projet. Copilot est peut-être plus intuitif pour des développeurs débutants ou pour des tâches simples, mais Cursor est bien plus complet pour des projets complexes.

Quelques conseils pour utiliser Cursor efficacement

Si vous voulez tirer le meilleur de Cursor, voici mes recommandations :

Segmenter vos demandes : Quand il s’agit de fonctionnalités complexes, découpez la demande en étapes simples. Normalement ça, avec ou sans IA, c’est la base pour être un bon développeur.
Relecture systématique : L’IA est rapide, mais il faut toujours vérifier et COMPRENDRE le code. Je ne vous demande pas de comprendre chaque ligne, mais si jamais vous ne comprenez pas ce que Cursor vous propose, demandez-lui des explications… 😅
User stories : Exprimer ses besoins sous forme de scénarios concrets aide beaucoup l’IA à comprendre ce que vous attendez.
Exploiter la documentation : L’IA est un outil puissant, mais connaître vos outils reste indispensable.

Conclusion : est-ce que Cursor est l’IDE de demain ?

Franchement, je pense que Cursor est une étape majeure dans l’évolution des outils de développement. Avec une capacité d’analyse qui dépasse celle de GitHub Copilot, Cursor s’impose dans ce match comme un allié puissant pour les développeurs travaillant sur des projets complexes.

Cependant, j’invite à la réflexion sur l’avenir de notre métier. Je ne sais pas si nous pouvons parler de disruption, mais la vitesse à laquelle les innovations arrivent sur le marché est impressionnante (voire effrayante). Nous sommes un rouage essentiel dans cette transformation, car nous serons ceux qui rendront ces technologies accessibles à tous via les applications que nous développerons. Et les domaines d’application sont infinis…

Alors, chers développeurs et développeuses, à vos claviers ! Codez, développez, proposez, et soyez acteur de ce changement !

*PS : Un grand merci à Programisto pour la tribune et pour m’avoir permis de tester l’outil ! Si vous souhaitez aller plus loin, je vous laisse un excellent podcast sur le sujet ci-dessous.