vscode-dev-setup : Mon Environnement de Développement VS Code sur macOS

Ce dépôt a pour but de documenter la mise en place d'un environnement de développement complet et fonctionnel sur macOS, optimisé pour Python, Git et Node.js avec nvm, en utilisant Visual Studio Code. Il est conçu pour les débutants qui souhaitent comprendre chaque étape et éviter les pièges courants.

Objectifs de cet environnement

• Développement Python serein : Configurer VS Code pour un développement Python efficace, incluant la gestion des environnements virtuels, le formatage automatique (Black) et l'analyse de code (Pylint).
• Maîtrise de Git : Apprendre les bases de Git, de l'initialisation d'un dépôt à la synchronisation avec GitHub, en abordant les erreurs fréquentes et leurs solutions.
• Gestion de Node.js avec nvm : Installer et gérer facilement différentes versions de Node.js pour vos projets front-end ou back-end.

---

🚀 Guide de Démarrage Rapide

Voici les étapes essentielles pour configurer votre environnement.

1. Installation de VS Code

Téléchargez et installez Visual Studio Code pour macOS depuis le site officiel.

2. Configuration pour Python

Cette section vous guide pour configurer VS Code avec un environnement virtuel Python, un formateur de code et un linter.

2.1 Ouvrir un Projet et Sélectionner l'Interpréteur

1. Ouvrez VS Code.
2. Cliquez sur Fichier > Ouvrir un dossier... et sélectionnez votre dossier de projet (ex: test-vscode-python).
3. Créez un fichier Python (ex: test.py).
4. En bas à gauche de la fenêtre VS Code, cliquez sur l'interpréteur Python affiché (probablement Python 3.x.x). Si aucun n'est affiché, ouvrez la Palette de Commandes (Cmd+Shift+P) et tapez Python: Select Interpreter. Choisissez une version de Python 3.x installée sur votre système.

2.2 Création d'un Environnement Virtuel

Il est crucial d'isoler les dépendances de chaque projet Python.

# Naviguez dans votre dossier de projet
cd votre-dossier-projet

# Créez l'environnement virtuel
python3 -m venv .venv

# Activez l'environnement virtuel (nécessaire dans chaque nouveau terminal)
source .venv/bin/activate

Vous devriez voir (.venv) apparaître devant votre invite de commande, indiquant que l'environnement est activé.

2.3 Installation des Outils Python Essentiels

Avec l'environnement virtuel activé :

pip install black pylint

• Black : Un formateur de code automatique qui garantit un style de code cohérent.
• Pylint : Un analyseur de code statique qui vous aide à repérer les erreurs et les mauvaises pratiques.

2.4 Extensions VS Code pour Python

Installez ces extensions via la vue Extensions (Cmd+Shift+X) dans VS Code :

• Python (Microsoft) : Support complet pour Python.
• Pylance (Microsoft) : Serveur de langage Python pour l'autocomplétion, la vérification de type, etc.
• Black Formatter (Microsoft) : Intégration de Black pour le formatage.
• GitLens (Eric Amodio) : Améliore les capacités Git de VS Code (non spécifique à Python, mais très utile).

2.5 Configuration de VS Code (settings.json)

Ouvrez les paramètres de VS Code (Cmd+,) ou via Code > Préférences > Paramètres. Vous pouvez rechercher ces options ou éditer directement le fichier settings.json (Cmd+Shift+P, Preferences: Open User Settings (JSON)).

{
    "editor.formatOnSave": true, // Active le formatage à la sauvegarde
    "[python]": { // Paramètres spécifiques aux fichiers Python
        "editor.defaultFormatter": "ms-python.black-formatter", // Utilise Black comme formateur par défaut
        "editor.formatOnSave": true // S'assure que le formatage à la sauvegarde est bien activé pour Python
    },
    "python.linting.pylintEnabled": true, // Active Pylint pour le linting
    "python.linting.enabled": true // S'assure que le linting est activé
}

3. Utilisation de Git (avec corrections d'erreurs courantes)

Git est essentiel pour le contrôle de version. Voici les étapes de base et comment surmonter les erreurs fréquentes.

3.1 Initialisation d'un Dépôt Git (au bon endroit !)

Il est crucial d'initialiser Git dans le dossier racine de votre projet.

# Assurez-vous d'être dans le dossier de votre projet !
cd votre-dossier-projet

# Initialisez un nouveau dépôt Git local
git init

⚠️ Erreur Courante 1 : git init dans un dossier parent Si vous avez accidentellement exécuté git init dans un dossier comme ~/dev au lieu de ~/dev/mon-projet, un dossier caché .git sera créé au mauvais endroit.

Correction :

# Supprimez le dossier .git mal placé (SOYEZ TRÈS PRUDENT AVEC `rm -rf` !)
rm -rf chemin/vers/le/dossier/parent/.git

# Puis, naviguez dans le bon dossier de projet et réexécutez `git init`
cd chemin/vers/votre-dossier-projet
git init

3.2 Premier Commit et Liaison avec GitHub

Avant de pousser votre code sur GitHub, vous devez faire un premier commit local.

1. Ajoutez vos fichiers à la zone de staging :

   git add .

   (Ajoute tous les nouveaux fichiers et modifications)

2. Effectuez votre premier commit :

   git commit -m "chore: initial commit"

3. Renommez la branche principale en main (convention moderne) :

   git branch -M main

4. Liez votre dépôt local à un dépôt distant sur GitHub : (Remplacez VOTRE_NOM_UTILISATEUR et NOM_DU_DEPOT par les vôtres)

   git remote add origin https://github.com/VOTRE_NOM_UTILISATEUR/NOM_DU_DEPOT.git

5. Poussez votre code pour la première fois :

   git push -u origin main

   L'option -u (ou --set-upstream) configure votre branche locale main pour suivre la branche distante main, simplifiant les futurs git push et git pull.

⚠️ Erreur Courante 2 : src refspec main does not match any Cette erreur signifie que vous tentez de pousser une branche (main) qui n'existe pas encore localement ou qui n'a pas de commits.

Cause : Vous avez probablement oublié de faire un git commit.

Correction :

git add .
git commit -m "chore: initial commit"
# Puis réessayez les étapes 3, 4 et 5 ci-dessus.

⚠️ Erreur Courante 3 : non-fast-forward (après git push) Cela se produit lorsque votre branche distante (main sur GitHub) contient des commits que votre branche locale n'a pas (par exemple, un README.md créé directement sur GitHub). Git refuse de fusionner car cela écraserait l'historique distant.

Correction : Vous devez d'abord récupérer les changements distants et les intégrer à votre branche locale.

# Récupérez les changements distants et rebasez votre travail local par-dessus
git pull --rebase origin main

# Si tout se passe bien, vous pouvez maintenant pousser
git push -u origin main

Le rebase réécrit l'historique de vos commits locaux au-dessus des commits distants, créant un historique linéaire et propre.

4. Gestion de Node.js avec nvm

NVM (Node Version Manager) est un outil formidable pour gérer plusieurs versions de Node.js sur votre machine.

4.1 Installation de nvm

Utilisez le script officiel pour installer nvm. Ouvrez un terminal et exécutez :

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

(Vérifiez la dernière version de nvm sur leur dépôt GitHub si v0.39.1 est obsolète.)

⚠️ Erreur Courante 4 : nvm ou node non reconnus après l'installation Après l'installation, il est courant que nvm et node ne soient pas immédiatement disponibles dans votre terminal. Cela signifie que les chemins d'environnement n'ont pas été correctement chargés.

Correction : Vous devez ajouter les lignes de configuration de nvm à votre fichier de profil shell (.zshrc si vous utilisez zsh, ce qui est le cas par défaut sur les macOS récents).

1. Ouvrez votre fichier .zshrc avec un éditeur de texte :

   nano ~/.zshrc
   # Ou utilisez code ~/.zshrc si vous avez l'intégration VS Code shell

2. Ajoutez ces lignes à la fin du fichier :

   export NVM_DIR="$HOME/.nvm"
   [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
   [ -s "$NVM_DIR/bash_completion" ] && . "$NVM_DIR/bash_completion"

3. Enregistrez et fermez le fichier.

4. Chargez les modifications dans votre terminal actuel :

   source ~/.zshrc

   Désormais, nvm devrait être reconnu.

4.2 Installation et Utilisation de Node.js

1. Installez la dernière version LTS (Long Term Support) de Node.js :

   nvm install --lts

2. Utilisez cette version pour le terminal actuel :

   nvm use --lts

3. Vérifiez l'installation :

   node -v # Affiche la version de Node.js
   npm -v  # Affiche la version de npm (le gestionnaire de paquets de Node.js)

4. Optionnel : Définir la version LTS comme défaut pour les nouveaux terminaux :

   nvm alias default 'lts/*'

   Cela garantit que chaque nouvelle fenêtre de terminal utilisera automatiquement la version LTS de Node.js que vous avez installée.

---

📚 Ressources Complémentaires

• Documentation officielle de VS Code
• Documentation Python
• Documentation Git
• Dépôt GitHub de nvm