Comment débuter avec Cursor l'éditeur IA en 2026

# macOS (via site officiel ou Homebrew)
brew install --cask cursor

# Ou téléchargez depuis https://cursor.com
# Windows/Linux : exécutez l'installateur .exe/.deb

# Vérification
cursor --version

# Lancer Cursor
cursor .

{
  "cursor.model": "claude-3-5-sonnet-20240620",
  "cursor.rules": [
    "Préfixe toujours les réponses en français",
    "Utilise TypeScript strict",
    "Ajoute des commentaires JSDoc"
  ],
  "editor.fontSize": 15,
  "editor.tabSize": 2,
  "workbench.colorTheme": "Cursor Light",
  "telemetry.telemetryLevel": "off",
  "cursor.chat.enabled": true,
  "cursor.composer.enabled": true
}

// hello.ts - Généré via Cursor Cmd+I: "Crée un script TS Hello World avec types"

interface Greeting {
  name: string;
  age: number;
}

function greet(person: Greeting): string {
  /**
   * Salutation personnalisée avec validation âge (>0).
   * @param person - Objet avec nom et âge.
   * @returns Message de bienvenue.
   */
  if (person.age <= 0) {
    throw new Error('Âge invalide');
  }
  return `Bonjour ${person.name}, vous avez ${person.age} ans !`;
}

const user: Greeting = { name: 'Alice', age: 30 };

console.log(greet(user));

// ts-node hello.ts pour exécuter

import React, { useState, FormEvent } from 'react';

type Todo = {
  id: number;
  text: string;
  completed: boolean;
};

const TodoList: React.FC = () => {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [input, setInput] = useState('');

  const addTodo = (e: FormEvent) => {
    e.preventDefault();
    if (!input.trim()) return;
    setTodos([...todos, { id: Date.now(), text: input, completed: false }]);
    setInput('');
  };

  const toggleTodo = (id: number) => {
    setTodos(todos.map(todo => 
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };

  return (
    <div>
      <form onSubmit={addTodo}>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Nouvelle tâche"
        />
        <button type="submit">Ajouter</button>
      </form>
      <ul>
        {todos.map(todo => (
          <li key={todo.id} onClick={() => toggleTodo(todo.id)} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

// Utilisation : dans App.tsx <TodoList />

# Dans terminal Cursor (Ctrl+`)
npx create-vite@latest mon-app --template react-ts
cd mon-app
npm install

# Ajoute Tailwind pour style (prompt Cursor: "Installe Tailwind")
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Lance dev server
npm run dev

# Ouvre http://localhost:5173

import express from 'express';
import cors from 'cors';

const app = express();
app.use(cors());
app.use(express.json());

type Todo = { id: number; text: string; completed: boolean };
const todos: Todo[] = [];

app.get('/todos', (req, res) => {
  res.json(todos);
});

app.post('/todos', (req, res) => {
  const newTodo: Todo = { id: Date.now(), ...req.body, completed: false };
  todos.push(newTodo);
  res.json(newTodo);
});

app.delete('/todos/:id', (req, res) => {
  const id = parseInt(req.params.id);
  const index = todos.findIndex(t => t.id === id);
  if (index > -1) todos.splice(index, 1);
  res.json({ success: true });
});

const PORT = 3001;
app.listen(PORT, () => console.log(`Serveur sur http://localhost:${PORT}`));

// npm init -y && npm i express cors @types/express @types/cors ts-node