Développer React avec VSCode

Visual Studio Code (VS Code) est un éditeur de code gratuit et open source développé par Microsoft. Il prend en charge plusieurs langages de programmation et fournit des fonctionnalités telles que la coloration syntaxique, la complétion intelligente de code, la refactorisation de code et le débogage.

VS Code dispose d'un terminal intégré, vous permettant d'exécuter des outils en ligne de commande tels que npm et yarn directement dans l'éditeur, ce qui facilite la construction et la gestion de projet.

Si vous souhaitez un environnement de développement Vue.js plus riche, vous pouvez installer les extensions Volar et Volar for TypeScript, qui fournissent des suggestions intelligentes pour Vue.js.

Si vous ne connaissez pas encore VS Code ou ne l'avez pas installé, vous pouvez consulter :Tutoriel VSCode。

Pourquoi choisir VS Code pour le développement React ?

• Complétion intelligente: Prise en charge parfaite de JSX, React Hooks, Props, etc.
• Plugins riches: Installation en un clic d’ESLint, Prettier, extraits de code, etc., pour améliorer l’efficacité.
• Terminal intégré: Exécution directement dans l’éditeurnpm run devet d’autres commandes.
• Outils de débogage: Débogueur intégré + React DevTools combinés, une expérience de niveau divin.
• Multiplateforme: Windows, macOS et Linux sont tous parfaitement pris en charge.
• Gratuit et open source: Maintenu par Microsoft, avec une communauté active.

---

Télécharger et installer VS Code

• Visitez le site officiel :https://code.visualstudio.com/

• Cliquez sur le grand boutonTélécharger, choisissez votre système d’exploitation :

  • Windows : Télécharger l’installateur .exe
  • macOS : Télécharger le .dmg (glissez-le dans Applications)
  • Linux : Choisissez .deb ou .rpm selon votre distribution

• Processus d'installation :

  • Windows/macOS : Double-cliquez sur l'installateur et cliquez sur Suivant/Continuer jusqu'au bout.
  • Recommandé : Cochez « Ajouter au PATH » et « Enregistrer comme éditeur de code » (pour une ouverture facile en ligne de commande).

• Vérifiez l'installation :

  • Ouvrez VS Code et vous verrez l'écran d'accueil.
  • Les utilisateurs de Windows peuvent saisir ce qui suit dans la ligne de commandecode --versionpour tester.

Ouvrez votre projet React

1. Ouvrez VS Code.

2. Méthode 1 : MenuFichier → Ouvrir le dossier, sélectionnez le dossier de votre projet (par ex.my-first-react-app）。

3. Méthode 2 (recommandée) : Dans le terminal, naviguez jusqu'au répertoire du projet, puis ouvrez en un clic :

   cd my-first-react-app
   code .

   （code .La commande ouvrira directement le dossier actuel avec VS Code.)

Vous voyez maintenant l'explorateur de fichiers à gauche, affichant la structure du projet (par ex., src, public, etc.).

Installez les plugins essentiels (extensions)

La puissance de VS Code réside dans ses extensions. Cliquez sur l'icôneExtensions(quatre carrés) dans la barre d'activité de gauche, ou appuyez sur le raccourciCtrl+Shift+X（macOS: Cmd+Shift+X) pour ouvrir la Place de marché des extensions.

Recherchez et installez les extensions suivantes (cliquez sur Installer) :

• ESLint(Auteur : Microsoft)

  • Analyse de code en temps réel, officiellement recommandée par React.
  • Après l'installation, il marquera les erreurs en rouge dans votre code.

• Prettier - Formateur de code(Auteur : Prettier)

  • Formate automatiquement le code pour conserver un style cohérent.

• ES7+ React/Redux/React-Native snippets(Auteur : dsznajder)

  • Un outil puissant pour les snippets de code ! Saisissez un raccourci pour générer rapidement des composants.
  • Extraits de code courants :
    • rafce→ Générer un composant fonction fléchée + export default
    • rfc→ Générer un composant fonction
    • useState→ Générer rapidement useState

• Path Intellisense(Auteur : Christian Kohler)

  • Complétion automatique des chemins d'import (super utile lors de l'import).

• Bracket Pair Colorizer 2Ou coloration intégrée des crochets (intégrée à VS Code 1.60+)

  • Des crochets colorés facilitent la lecture du JSX imbriqué.

• GitLens(Facultatif, mais vivement recommandé)

  • Amélioration de Git, consulter l'historique des commits du code.

Recommandations spécifiques à React(Avancé, optionnel) :

• Tailwind CSS IntelliSense(Si vous utilisez Tailwind)
• React Developer Tools(Extension de navigateur déjà installée, pas nécessaire ici)

Après l'installation, redémarrez VS Code (ou appuyez surCtrl+Shift+P → Reload Window）。

Configurez VS Code pour améliorer votre expérience de développement React

appuyezCtrl+Shift+P（macOS: Cmd+Shift+P) pour ouvrir la palette de commandes, tapez "Preferences: Open Settings (JSON)" pour ouvrirsettings.json。

Créer dans le répertoire racine du projet.vscode/settings.json(configuration au niveau du projet recommandée), ajoutez ce qui suit :

{
  // 保存时自动格式化
  "editor.formatOnSave": true,
  // 默认使用 Prettier 格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // ESLint 自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // JSX/TSX 文件也应用 Prettier
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // 显示行号、缩进指南
  "editor.rulers": [80],
  "editor.guides.indentation": true
}

Prend effet après l'enregistrement. Désormais, chaque fois que vous enregistrez du code, Prettier le formatera automatiquement, et ESLint corrigera automatiquement les problèmes courants.

Vérifiez: écrivez délibérément du code non standard (par ex., des points-virgules manquants), enregistrez-le et voyez s'il est automatiquement corrigé.

Écrire réellement du code React : créer un composant à partir de zéro

Dans l'Explorateur de gauche, faites un clic droitsrcdossier → New Folder → créercomponentsdossier.

Clic droitcomponents→ New File → créerGreeting.jsx。

Utilisez un extrait de code pour générer rapidement un composant :

• Typerafce（export de composant React de type fonction flèche）
• Appuyez sur Tab pour générer automatiquement le modèle :

import React from 'react'

const Greeting = () => {
  return (
    <div>Greeting</div>
  )
}

export default Greeting

Modifiez-le pour en faire un composant complet (démontrant state et Props) :

Danssrc/App.jsxImportez-le et utilisez-le dans :

Enregistrez tous les fichiers (Ctrl+S), basculez vers le navigateur, et le rechargement à chaud affichera automatiquement le nouveau composant !

Points forts de l'expérience：

• Lors de la saisieuseState, la complétion intelligente fournira des suggestions.
• Lors de l'importation de chemins./components/Greeting.jsx, Path Intellisense complétera automatiquement.
• Après l'enregistrement, Prettier formate automatiquement l'indentation.
• S'il y a des erreurs, ESLint les marquera en rouge dans le panneau Problèmes (en bas).

Terminal intégré et conseils de débogage

Terminal intégré: Menu Terminal → Nouveau terminal, ouCtrl+`(accent grave).

• Exécuter directementpnpm dev, la sortie du serveur est juste ici.

Débogage du code React：

1. Installez l’extension de navigateurReact Developer Tools(si elle n’est pas déjà installée).
2. Dans VS Code, appuyez sur F5 pour démarrer le débogage (vous devez d’abord configurer launch.json, mais pour les débutants, utilisez les DevTools du navigateur pour l’instant).
3. Dans le navigateur, appuyez sur F12 → onglet Components pour afficher les Props et l’état de votre composant Greeting.

Raccourcis courants(À mémoriser) :

• Ctrl + S : Enregistrer
• Ctrl + / : Commenter la ligne
• Alt + ↑/↓ : Déplacer la ligne
• Ctrl + D : Sélectionner le même mot avec plusieurs curseurs
• Ctrl + Shift + P : Palette de commandes (universelle)

Mini-exercice : Créer un composant Card

1. Créezcomponents/Card.jsx, utilisezrafcepour générer.
2. Implémentez un composant carte qui accepte trois props : title, content et imageUrl.
3. Utilisez-le deux fois dans App.jsx pour afficher un contenu différent.
4. Ajoutez quelques styles inline pour embellir.

Une fois terminé, votre page aura plusieurs belles cartes !

Étape 1 : Créer le composant Card.jsx

1. DanssrcSous le dossier, clic droit → New Folder → créercomponentsdossier (s'il n'existe pas encore).

2. Clic droitcomponentsdossier → New File → créerCard.jsx。

3. DansCard.jsxSaisissez dansrafce(Appuyez sur Tab pour générer automatiquement le modèle), puis modifiez-le avec le code suivant :

Explication：

• Utilisez des props déstructurées :{ title, content, imageUrl }。
• Embellissement du style en ligne : coins arrondis, ombres, images responsives, espacements, etc., donnant aux cartes un aspect moderne et professionnel.
• Rendu conditionnel de l'image : s'il n'y a pas deimageUrl, alors l'image n'est pas affichée (en utilisant&&implémentation).

Étape 2 : Modifier App.jsx pour utiliser le composant Card deux fois

Opensrc/App.jsx, et remplacez le contenu par le code suivant (en préservant une partie de la structure d'origine, en nettoyant le compteur par défaut et en mettant l'accent sur l'affichage des cartes) :

Explication：

• ImporterCardle composant.
• Utiliser<Card />deux fois, en passant différentes props.
• Le div extérieur de App utilise une mise en page flex pour disposer plusieurs cartes horizontalement (retour à la ligne responsive).
• Les URL des images utilisent des images publiques officielles (la petite icône de React et le logo de Vite). Aucune ressource locale n'est nécessaire ; elles se chargent directement en ligne.

Étape 3 : Exécutez et visualisez le résultat

1. Enregistrez tous les fichiers (Ctrl+S).
2. Si le serveur de développement n'est pas en cours d'exécution, exécutez dans le terminal VS Code :

   npm run dev

3. Ouvrez http://localhost:5173 dans votre navigateur, et vous verrez deux (ou plus) belles cartes disposées au centre, avec des images, des titres et du contenu !

Aperçu de l'effet (description textuelle)：

• Les cartes ont des ombres et des coins arrondis, dans un style Material Design.
• L'image occupe toute la largeur en haut, et la section de texte bénéficie d'un espacement confortable.
• L'arrière-plan est gris clair, les cartes sont blanches, et le rendu visuel est clair.