Configurer son environnement de développement PHP et JavaScript

Guide complet pour installer et configurer un environnement de développement professionnel pour PHP et JavaScript, avec les meilleurs outils et bonnes pratiques pour booster votre productivité.

Débutant 📖 15 min 🌐 Développement web

Par Grégoire Boisseau • 4 octobre 2025

#PHP#JavaScript#Node.js#IDE#Configuration#Développement Web#VS Code#WAMP#MAMP#npm

Introduction

Pourquoi bien configurer son environnement ?

Avant même d’écrire votre première ligne de code, votre environnement de travail doit être prêt. Comme un cuisinier qui prépare ses ustensiles et son plan de travail avant de commencer, un développeur doit disposer d’outils correctement configurés.

Une configuration appropriée de votre environnement vous permet de lancer rapidement vos projets, coder avec des outils adaptés à votre langage, éviter les erreurs liées à une installation défectueuse, et surtout gagner un temps considérable au quotidien.

Cette étape n’est peut-être pas la plus excitante, mais elle constitue un véritable atout. Une fois votre configuration aux petits oignons, vous pouvez vous concentrer sur l’essentiel : le code.

Bref aperçu de PHP et JavaScript

Dans ce guide, nous aborderons PHP et JavaScript, deux technologies fondamentales du développement web.

PHP est un langage serveur qui génère des pages, communique avec les bases de données et gère la logique côté serveur. Encore aujourd’hui présent sur des millions de sites, on le retrouve dans des outils populaires comme WordPress ou PrestaShop.

Pour travailler avec PHP, vous avez besoin d’un serveur local, d’un moteur PHP et généralement d’une base de données. Selon votre système d’exploitation (Windows, Mac, Linux), différents outils existent : WAMP, MAMP, LAMP, XAMPP. Nous les examinerons en détail.

JavaScript, initialement conçu pour les navigateurs, peut désormais s’exécuter côté serveur grâce à Node.js. Cette évolution permet de créer des outils, des API ou des applications complètes. Pour travailler avec React, Vue ou Express, vous devez installer Node, gérer les dépendances et parfois affiner votre configuration.

PHP et JavaScript sont souvent utilisés conjointement dans les projets web, chacun nécessitant une configuration spécifique. Ce guide vous montre comment tout mettre en place efficacement.

Ce que vous allez apprendre

Vous apprendrez à installer et configurer un environnement de développement complet, quel que soit votre système d’exploitation. Nous verrons comment choisir et installer un serveur local pour PHP (WAMP, MAMP, etc.), comment installer Node.js et gérer les dépendances JavaScript, quels outils utiliser au quotidien (VS Code, Sublime Text…), quelles extensions peuvent améliorer votre productivité, et où trouver des ressources complémentaires.

L’objectif n’est pas de vous submerger d’options, mais de vous fournir une base solide que vous pourrez adapter à votre style de développement. À la fin de votre lecture, vous saurez monter un environnement professionnel en quelques minutes et pourrez vous concentrer sur ce qui compte : créer.

Configuration pour le développement PHP

Choix d’un serveur local

Pour développer en PHP, vous avez besoin d’un environnement local qui reproduit le fonctionnement d’un serveur web réel. Concrètement, il s’agit d’un outil qui installe simultanément un serveur Apache (ou Nginx), un interpréteur PHP et une base de données (généralement MySQL ou MariaDB).

C’est ce qu’on appelle une stack.

Les solutions présentées dans cette section sont des outils tout-en-un qui permettent d’installer cette stack facilement, sans commandes complexes.

Critères de choix :

Votre système d’exploitation (certains outils sont spécifiques à Windows, Mac ou Linux)
Votre niveau d’expérience (certains outils sont plus accessibles que d’autres)
La nature de vos projets (développement local, WordPress, Laravel, etc.)

Nous examinerons quatre solutions reconnues : WampServer, MAMP, LAMP et XAMPP.

WampServer (pour Windows)

WampServer est l’un des outils les plus populaires pour installer un environnement PHP sur Windows. Il regroupe Apache, MySQL et PHP dans un package unique avec une interface graphique intuitive.

Installation

Rendez-vous sur le site officiel : https://www.wampserver.com/
Téléchargez la version 64 bits (si votre ordinateur le supporte)
Lancez l’installation et choisissez le dossier par défaut
Une icône apparaît dans la barre des tâches : vert signifie que tout fonctionne, orange indique un fonctionnement partiel, rouge signale un problème

Utilisation de base

Votre dossier de projet se trouve généralement à : C:/wamp64/www
Créez un sous-dossier, par exemple mon-projet, et placez-y votre fichier index.php
Ouvrez votre navigateur et accédez à : http://localhost/mon-projet

Avantages :

Installation très simple
Interface claire et accessible
Idéal pour tester des CMS comme WordPress

Inconvénients :

Disponible uniquement sur Windows
Pas toujours à jour avec les dernières versions de PHP

MAMP (pour Mac)

MAMP (Mac Apache MySQL PHP) est l’équivalent de WampServer pour les utilisateurs macOS. Une version Windows existe également, mais sur Mac, c’est clairement l’une des meilleures options.

Installation

Rendez-vous sur https://www.mamp.info
Téléchargez la version gratuite (la version Pro est payante mais non indispensable au début)
Installez l’application comme un logiciel Mac classique

Utilisation de base

Lancez MAMP et cliquez sur “Start Servers”
Par défaut, votre site est accessible à : http://localhost:8888
Votre dossier de projet se trouve dans : /Applications/MAMP/htdocs
Créez-y un dossier (exemple : mon-projet) avec vos fichiers PHP

Avantages :

Très simple d’utilisation sur Mac
Interface agréable
Aucune modification du système nécessaire

Inconvénients :

Le port 8888 peut être contraignant à modifier
Moins flexible que LAMP pour les configurations avancées

LAMP (pour Linux)

LAMP n’est pas un outil graphique mais un acronyme pour Linux, Apache, MySQL et PHP. Sur Linux, vous installez ces composants via des commandes. L’approche est plus technique mais offre une grande stabilité.

Installation de base (Ubuntu/Debian)

sudo apt update
sudo apt install apache2
sudo apt install php libapache2-mod-php
sudo apt install mysql-server

Vérifiez le bon fonctionnement en accédant à : http://localhost

Créez un fichier index.php dans /var/www/html avec :

<?php phpinfo(); ?>

Avantages :

Léger, stable et puissant
Contrôle total sur la configuration
Idéal pour comprendre le fonctionnement en profondeur

Inconvénients :

Absence d’interface graphique
Moins adapté aux débutants

XAMPP (multi-plateforme)

XAMPP est la solution universelle. Compatible avec Windows, Mac et Linux, il regroupe Apache, MySQL (en réalité MariaDB), PHP et un panneau de contrôle.

Installation

Rendez-vous sur : https://www.apachefriends.org/index.html
Téléchargez la version adaptée à votre système
Lancez l’installation

Utilisation de base

Ouvrez le “XAMPP Control Panel”
Démarrez Apache et MySQL
Par défaut, votre dossier de projet se trouve à :
- Windows : C:/xampp/htdocs
- Mac/Linux : /Applications/XAMPP/htdocs ou /opt/lampp/htdocs

Avantages :

Compatible avec tous les systèmes d’exploitation
Interface de gestion claire
Parfait pour des tests rapides ou WordPress

Inconvénients :

Peut être lourd selon la configuration
Conflits de ports possibles (par exemple avec Skype sur Windows)

Configuration pour le développement JavaScript

Installation de Node.js

Qu’est-ce que Node.js ?

Node.js est un environnement d’exécution permettant de lancer du code JavaScript en dehors d’un navigateur. Lorsque vous tapez node monfichier.js dans un terminal, Node.js lit votre fichier et l’exécute.

Étapes d’installation

Rendez-vous sur le site officiel : https://nodejs.org
Deux versions sont proposées :
- LTS (Long Term Support) : stable, recommandée
- Current : plus récente mais moins stable

Choisissez la version LTS sauf si vous avez des besoins spécifiques.

Téléchargez l’installeur adapté à votre système :
- .msi pour Windows
- .pkg pour Mac
- Ou utilisez un gestionnaire de paquets sur Linux :

sudo apt update
sudo apt install nodejs npm

Vérifiez l’installation :

node -v
npm -v

Vous devriez voir apparaître les numéros de version. Si cela fonctionne, vous êtes prêt à utiliser l’écosystème JavaScript moderne.

Gestion des dépendances avec npm ou yarn

Lorsque vous lancez un projet JavaScript, vous devez souvent ajouter des dépendances (bibliothèques externes) comme React, Axios ou Express. Pour cela, on utilise un gestionnaire de paquets.

npm (Node Package Manager)

C’est l’outil livré avec Node.js. Il permet d’installer et de gérer les packages dans votre projet.

Commandes utiles :

Initialiser un projet :

npm init
# ou
npm init -y  # pour valider automatiquement

Installer une dépendance :

npm install axios

Installer une dépendance de développement uniquement :

npm install eslint --save-dev

Supprimer un package :

npm uninstall axios

Mettre à jour tous les packages :

npm update

Une fois installés, tous les packages se trouvent dans le dossier node_modules, et la liste est référencée dans package.json.

yarn (alternative à npm)

Yarn est une alternative développée par Facebook. Il est souvent plus rapide et plus stable dans certains cas.

Pour installer Yarn :

npm install -g yarn

Commandes équivalentes :

yarn init
yarn add express
yarn remove express
yarn upgrade

Vous pouvez utiliser l’un ou l’autre, pas besoin des deux. npm suffit largement pour débuter.

Exemple simple d’initiation d’un projet JS

Voyons comment lancer un petit projet Node.js pour vous familiariser avec l’environnement.

1. Créer un dossier de projet :

mkdir mon-projet-js
cd mon-projet-js

2. Initialiser le projet :

npm init -y

Cela crée un fichier package.json.

3. Créer un fichier JavaScript :

Créez un fichier index.js avec le contenu suivant :

console.log('Hello JS 👋');

4. Lancer le script :

node index.js

Vous devriez voir s’afficher dans le terminal :

Hello JS 👋

Vous venez de lancer votre premier script Node.js. Vous pouvez ensuite ajouter une dépendance (npm install chalk), utiliser des modules, ou tester des frameworks comme Express pour créer un serveur.

Utilisation des IDE

Qu’est-ce qu’un IDE ?

IDE signifie Integrated Development Environment (Environnement de Développement Intégré). C’est un éditeur de code enrichi qui vous aide à écrire, organiser, tester et déboguer votre code sans quitter l’application.

Un bon IDE propose de nombreuses fonctionnalités utiles :

Coloration syntaxique pour une meilleure lisibilité
Autocomplétion qui anticipe votre code
Gestion de projets et dossiers
Terminal intégré
Extensions et plugins
Débogage visuel
Intégration Git ou FTP directe

Un IDE vous fait gagner du temps, évite les erreurs et améliore la lisibilité de votre code.

Exemples d’IDE populaires

Visual Studio Code (VS Code)

C’est le favori des développeurs web. Gratuit, open source, hautement personnalisable et disponible sur Windows, Mac et Linux.

Points forts :

Interface simple mais complète
Large choix d’extensions
Terminal intégré
Git intégré
Support natif de JavaScript, PHP, HTML, CSS
Très rapide à ouvrir

Pour l’installer : rendez-vous sur https://code.visualstudio.com et téléchargez la version correspondant à votre système.

Sublime Text

Très léger et rapide. Moins riche que VS Code en fonctionnalités natives, mais très agréable une fois bien configuré.

Avantages :

Ultra rapide
Interface épurée
Parfait pour un éditeur minimaliste

Inconvénients :

Nombreuses configurations nécessaires
Gratuit mais avec des rappels pour acheter une licence

Autres options

PHPStorm : payant mais extrêmement complet pour PHP (débogueur, intégration base de données, etc.)
Atom : développé par GitHub, moins populaire aujourd’hui
Brackets : orienté HTML/CSS/JS, adapté aux petits projets web
Windsurf : IDE basé sur VS Code enrichi d’intelligence artificielle (Cascade / SWE-1)
Cursor : autre IDE avec capacités d’intelligence artificielle

Extensions recommandées pour PHP et JavaScript

Avec Visual Studio Code (ou les IDE basés sur VS Code), vous pouvez installer des extensions directement depuis l’interface (onglet Extensions ou Ctrl+Shift+X). Voici une sélection utile :

Pour PHP

PHP Intelephense : autocomplétion intelligente et vérification d’erreurs
PHP Debug : pour déboguer avec Xdebug
PHP Namespace Resolver : gestion automatique des use
Laravel Blade Snippets : si vous travaillez avec Laravel

Pour JavaScript

ESLint : vérification automatique du code selon des règles définies
Prettier : formatage automatique pour un code toujours propre
npm Intellisense : complétion des noms de modules installés
Path Intellisense : complétion des chemins de fichiers

Pour les deux langages (et plus)

Live Server : serveur local avec rechargement automatique
GitLens : informations Git directement dans le code
Bracket Pair Colorizer 2 : coloration des parenthèses et accolades par paire
Code Spell Checker : correction orthographique dans le code
TODO Highlight : mise en évidence des commentaires // TODO

Tips pour personnaliser et booster votre productivité

Voici quelques réglages et habitudes qui font la différence :

1. Activez l’enregistrement automatique

Dans les paramètres, configurez VS Code pour sauvegarder automatiquement lorsque vous changez de fichier ou après quelques secondes d’inactivité. Fini les oublis.

2. Utilisez les raccourcis clavier

Quelques raccourcis de base à maîtriser :

Ctrl+P : ouvrir un fichier rapidement
Ctrl+Shift+P : ouvrir la palette de commandes
Alt+Shift+↓ : dupliquer une ligne
Ctrl+/ : commenter/décommenter une ligne

3. Configurez le formatage automatique

Avec Prettier, vous pouvez formater votre code à l’enregistrement. Ajoutez ceci dans les paramètres de VS Code :

"editor.formatOnSave": true

4. Personnalisez votre thème et votre police

Choisissez un thème de couleurs agréable, modifiez la police (par exemple Fira Code avec ligatures), augmentez légèrement la taille sur un grand écran.

5. Utilisez des snippets

Les snippets permettent d’écrire du code récurrent en tapant simplement un mot-clé. Par exemple log → console.log(). Vous pouvez créer les vôtres ou installer des packs existants.

Ressources complémentaires

Liens vers les documentations officielles

Pour approfondir un sujet, consultez toujours la documentation officielle. C’est la source la plus fiable et à jour.

PHP : https://www.php.net/manual/fr/
Node.js : https://nodejs.org/fr/docs
npm : https://docs.npmjs.com/
VS Code : https://code.visualstudio.com/docs
Yarn : https://yarnpkg.com/getting-started
XAMPP : https://www.apachefriends.org/index.html
MAMP : https://www.mamp.info/
WAMP : https://www.wampserver.com/

Communautés et tutoriels utiles

Chercher seul est utile, mais poser des questions ou lire des échanges est souvent plus efficace.

Stack Overflow : https://stackoverflow.com (recherchez en anglais de préférence)
Reddit :
- r/learnprogramming
- r/webdev
YouTube :
- Grafikart (en français)
- The Net Ninja (en anglais)
- Traversy Media

Outils complémentaires

Pour le débogage :

Xdebug : pour déboguer du PHP (à connecter à VS Code via une extension)
console.log() : votre allié principal en JavaScript
Node Inspector : pour inspecter du code Node.js

Pour un code propre :

ESLint (JavaScript) : maintient un style cohérent
PHP CodeSniffer : équivalent pour PHP
Prettier : formatage automatique du code

Pour tester rapidement :

JSFiddle / CodePen : éditeurs en ligne pour tester du JavaScript
PHP Sandbox : https://phpsandbox.io/

Conclusion

Vous venez d’établir les bases d’un environnement de développement solide. Vous savez maintenant installer un serveur local pour PHP, configurer Node.js pour JavaScript, et choisir les outils appropriés pour améliorer votre productivité.

Cette étape peut sembler technique au début, mais une fois en place, votre configuration vous fera gagner un temps considérable. Plus besoin de vous battre avec votre terminal ou d’espérer que tout fonctionne miraculeusement.

La meilleure façon de progresser maintenant : testez tout cela en pratique. Créez un mini-projet. Une page en PHP, un script Node, une petite API, peu importe. C’est en manipulant que vous ancrerez véritablement ces connaissances.

Pour aller plus loin, lancez un vrai projet personnel, suivez une formation approfondie, explorez des frameworks (Laravel, Symfony, React, Vue, etc.), ou créez votre propre configuration de développement personnalisée.

Vous avez désormais les outils. À vous de jouer.