Environnement de développement

Avant de commencer à développer avec Vue.js et Vuetify, nous devons configurer notre environnement de travail. Cette page présente les outils essentiels et leur installation, du plus simple au plus avancé.

Vue d'ensemble

Ordre	Outil	Usage
1	Brave / Firefox	Navigateur de test
2	Node.js + npm	Runtime JavaScript et gestionnaire de packages
3	Git	Versionnement du code
4	GitHub	Plateforme de collaboration
5	WebStorm	IDE de développement
6	Vue DevTools	Extension de débogage Vue.js

1. Navigateur web

Pour le développement Vue.js, privilégiez Brave ou Firefox qui offrent d'excellents outils de développement (DevTools).

Téléchargez et installez l'un des deux :

• Brave
• Firefox

Pourquoi Brave ou Firefox ?

Ces navigateurs respectent mieux la vie privée et offrent d'excellents outils de développement. Chrome fonctionne aussi, mais nous privilégions les alternatives.

2. Node.js et npm

Node.js est l'environnement d'exécution JavaScript. npm (Node Package Manager) permet de gérer les dépendances de nos projets.

Installation

1. Téléchargez la version LTS depuis nodejs.org
2. Installez avec les options par défaut
3. Redémarrez votre terminal
4. Vérifiez l'installation :

node -v
npm -v

Version LTS obligatoire

Installez toujours la version LTS (Long Term Support) et non la version « Current ». La LTS est plus stable et mieux supportée.

Commandes npm essentielles

Commande	Description
npm install	Installe les dépendances du projet
npm run dev	Lance le serveur de développement
npm run build	Compile pour la production
npm install <package>	Ajoute une nouvelle dépendance

3. Git

Git est le système de versionnement que nous utilisons pour gérer notre code source.

Installation

1. Téléchargez Git depuis git-scm.com
2. Installez avec les options par défaut
3. Vérifiez l'installation :

git --version

Configuration initiale

Configurez votre identité Git (utilisée pour les commits) :

git config --global user.name "Votre Prénom Nom"
git config --global user.email "votre.email@div..."

Important

Ces informations apparaîtront dans tous vos commits. Utilisez votre vrai nom et votre e-mail scolaire.

4. GitHub

GitHub est la plateforme de collaboration où nous hébergeons nos projets.

Créer un compte

1. Rendez-vous sur github.com
2. Créez un compte avec votre e-mail scolaire (@div...)
3. Confirmez votre adresse e-mail

GitHub Student Developer Pack

GitHub offre des avantages gratuits pour les étudiants :

1. Rendez-vous sur education.github.com/pack
2. Cliquez sur Sign up for Student Developer Pack
3. Confirmez votre statut d'étudiant avec votre e-mail scolaire

GitHub Copilot gratuit

Le pack étudiant inclut GitHub Copilot, un assistant IA pour le code. Très utile pour accélérer le développement !

5. WebStorm

WebStorm est l'IDE professionnel de JetBrains, optimisé pour JavaScript et les frameworks modernes comme Vue.js.

Installation

1. Téléchargez et installez JetBrains Toolbox
2. Depuis Toolbox, installez WebStorm

Licence étudiante gratuite

JetBrains offre une licence gratuite pour les étudiants :

1. Rendez-vous sur jetbrains.com/student
2. Cliquez sur Apply now
3. Utilisez votre adresse e-mail scolaire (@div...)
4. Confirmez via le lien reçu par e-mail
5. Créez votre compte JetBrains

Renouvellement annuel

La licence doit être renouvelée chaque année. Utilisez toujours votre adresse e-mail scolaire.

Configuration de base

Accédez aux paramètres via File > Settings (ou Ctrl + Alt + S).

Langue et dictionnaire en français

Paramètre	Chemin
Interface en français	Appearance & Behavior > Appearance > UI Options > Language
Dictionnaire français	Editor > Natural Languages > Spelling > Ajouter French

Zoom à la molette

Editor > General : Cocher Change font size with Ctrl+Mouse Wheel

Permet de zoomer/dézoomer rapidement dans le code avec Ctrl + molette.

Autres réglages utiles

Paramètre	Chemin	Valeur
Import automatique	Editor > General > Auto Import	Activer les deux options
Version JavaScript	Languages & Frameworks > JavaScript	ECMAScript 6+
Taille de police	Editor > Font > Size	14 ou 16
Ligatures	Editor > Font	Activer (pour JetBrains Mono)
Retour à la ligne	Editor > General > Soft Wraps	*.md; *.txt
Formatage auto	Editor > General > On Save	Cocher Reformat code
Optimiser imports	Editor > General > On Save	Cocher Optimize imports

Plugin Vue.js

Le plugin Vue.js est installé par défaut. Vérifiez dans Plugins qu'il est bien activé.

Configurer GitHub dans WebStorm

L'intégration GitHub permet de cloner, push, pull et gérer les PR directement depuis l'IDE.

Connexion à GitHub

1. Ouvrez File > Settings > Version Control > GitHub
2. Cliquez sur le bouton + (Add account)
3. Choisissez Log In via GitHub...
4. Votre navigateur s'ouvre, autorisez WebStorm à accéder à votre compte
5. Revenez dans WebStorm, votre compte apparaît dans la liste

Cloner un dépôt depuis GitHub

1. File > New > Project from Version Control
2. Sélectionnez GitHub dans la liste de gauche
3. Choisissez le dépôt à cloner
4. Définissez le dossier de destination
5. Cliquez sur Clone

Opérations Git courantes

Action	Raccourci	Menu
Commit	Ctrl + K	Git > Commit
Push	Ctrl + Shift + K	Git > Push
Pull	Ctrl + T	Git > Pull
Historique	Alt + 9	View > Tool Windows > Git
Branches	En bas à droite de l'IDE	Clic sur le nom de branche

Terminal intégré

Vous pouvez aussi utiliser le terminal intégré (Alt + F12) pour les commandes Git en ligne de commande.

Configurer ESLint dans WebStorm

ESLint analyse votre code et détecte les erreurs automatiquement. Il est pré-installé avec les projets Vuetify.

Activer ESLint

1. Ouvrez File > Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint
2. Sélectionnez Automatic ESLint configuration
3. Cochez Run eslint --fix on save

Fonctionnement

Une fois configuré, WebStorm :

• Souligne les erreurs en rouge et les avertissements en jaune
• Affiche les détails au survol de la souris
• Propose des corrections rapides via Alt + Entrée
• Corrige automatiquement à la sauvegarde (Ctrl + S)

Ignorer une règle ponctuellement

// Ignorer la prochaine ligne
// eslint-disable-next-line
const variableNonUtilisee = 'test'

// Ignorer un bloc entier
/* eslint-disable */
// Code ignoré par ESLint
/* eslint-enable */

À utiliser avec parcimonie

Ignorer ESLint devrait être l'exception, pas la règle. Préférez toujours corriger le problème plutôt que de l'ignorer.

Raccourci utile

Alt + Entrée sur une erreur ESLint affiche les actions disponibles : corriger, ignorer la règle, ou voir la documentation.

Déboguer avec WebStorm

Le débogueur intégré est bien plus efficace que les console.log !

Lancer le débogage

1. Démarrez votre application avec npm run dev
2. Cliquez sur l'URL dans le terminal en maintenant Ctrl (ex: http://localhost:3000)
3. WebStorm ouvre le navigateur en mode debug

Ou via le menu : Run > Debug (Shift + F9)

Points d'arrêt (Breakpoints)

1. Cliquez dans la marge gauche à côté du numéro de ligne (un point rouge apparaît)
2. Lancez l'application en mode debug
3. L'exécution s'arrête au point d'arrêt

Panneau de débogage

Section	Description
Variables	Toutes les variables et leur valeur actuelle
Watches	Variables personnalisées à surveiller
Frames	Pile d'appels (call stack)
Console	Console JavaScript interactive

Contrôles de navigation

Action	Raccourci	Description
Resume	F9	Continuer jusqu'au prochain breakpoint
Step Over	F8	Exécuter la ligne et passer à la suivante
Step Into	F7	Entrer dans la fonction appelée
Step Out	Shift + F8	Sortir de la fonction actuelle

Chrome/Brave requis

Le débogage JavaScript fonctionne mieux avec Chrome ou Brave. Firefox nécessite une configuration supplémentaire.

6. Vue DevTools

L'extension Vue DevTools est indispensable pour déboguer vos applications Vue.js dans le navigateur.

Fonctionnalités

• Inspecter la hiérarchie des composants
• Visualiser et modifier les données réactives (ref, reactive)
• Suivre les événements émis
• Explorer le store Pinia
• Analyser les performances

Installation

• Vue DevTools pour Chrome/Brave
• Vue DevTools pour Firefox

Activer pour les fichiers locaux

Dans les paramètres de l'extension, activez « Autoriser l'accès aux URL de fichiers » pour déboguer les fichiers ouverts directement dans le navigateur.

Vérification de l'installation

Une fois tous les outils installés, vérifiez que tout fonctionne :

# Node.js
node -v
# Doit afficher : v20.x.x ou v22.x.x (LTS)

# npm
npm -v
# Doit afficher : 10.x.x ou plus récent

# Git
git --version
# Doit afficher : git version 2.x.x

Dans WebStorm :

• File > Settings > Version Control > GitHub : Votre compte est connecté
• File > Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint : Automatic ESLint configuration activé

Créer votre premier projet

Une fois l'environnement configuré, vous êtes prêt à créer votre première application Vue.js avec Vuetify !

npm create vuetify

Suivez les instructions du chapitre suivant : Créer une application.