# Environnement de développement
# Machines virtuelles
# Virtualbox
# Installation
sudo apt install virtualbox
# Vagrant
# Installation
Télécharger et installer depuis le site officiel de Vagrant
# Vagrant Hosts Updater Plugin
# Installation
vagrant plugin install vagrant-hostsupdater
# Git
# Installation
sudo apt update && sudo apt install git
# VVV - Varying Vagrant Vagrants
# Installation
git clone -b master git://github.com/Varying-Vagrant-Vagrants/VVV.git ~/vagrant-local
En remplaçant ~/vagrant-local par le répertoire ou tu souhaites installer le dossier qui contiendra la configuration de ta machine et tes projets.
# Configuration
À compléter.
# Provisionner un nouveau site
Éditer le fichier ~/vagrant-local/config/config.yml (s'il n'existe pas, dupliquer le fichier config-default.ymldu même répertoire et le renommer en config.yml), pour y indiquer les sites à provisionner, et les ressources allouées à la machine virtuelle (la moitié des ressources de ton pc est une bonne moyenne).
# Premier démarrage
Depuis un terminal, utiliser la commande cd pour se déplacer dans le repertoire ou VVV à été cloné, puis lancer la commande vagrant up --provision pour lancer et provisionner la machine virtuelle .
Aller prendre un café 😉
# Démarrer la machine virtuelle
Depuis un terminal, utiliser la commande cd pour se déplacer dans le repertoire ou VVV à été cloné, puis lancer vagrant up pour démarrer la machine virtuelle.
# Installer Ruby 2.7 avec rbenv (debian/ubuntu)
Se connecter à la machine virtuelle avec vagrant ssh, puis y installer ruby.
Lancer la commande suivante dans un terminal pour télécharger rbenv :
git clone https://github.com/rbenv/rbenv.git ~/.rbenv
Installer rbenv avec les commande suivantes
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(rbenv init -)"' >> ~/.bashrc
exec $SHELL
On télécharge les packets nécessaires :
sudo apt-get install -y libreadline-dev zlib1g-dev
On télécharge ensuite ruby-build :
$ git clone https://github.com/rbenv/ruby-build.git "$(rbenv root)"/plugins/ruby-build
Finalement on installe Ruby 2.7.1 :
rbenv install 2.7.1
rbenv global 2.7.1
Vérifier que la version de Ruby installée soit bien la bonne :
ruby -v
Installer bundler :
gem install bundler
rbenv rehash
# Wordmove
# Installation
Installer le gem (paquet ruby) wordmove :
gem install wordmove
# Tunnel HTTP en reverse proxy
À compléter
# Webpack
# Browsersync
Utiliser la commande cd dans un terminal pour se rendre dans le répertoire du thème à éditer (généralement VVV/www/public_html/web/app/themes/sage/).
Lancer le serveur de développement avec npm start ou yarn start.
# Debugging PHP
XDebug est le debugger PHP le plus répandu. Il s'agit d'un module PHP qui envoit des informations sur le code qui s'éxécute. Nous l'utiliserons ici. Il permet notamment d'afficher des messages d'erreur et des var_dump plus lisibles, de connaitre le contenu des variables (breakpoints et watch) à des moments précis, ou l'ordre d'éxécution des fonctions (stacktrace).
# Configuration de XDebug, VVV, et Visual Studio Code
# Activation de XDebug dans VVV
Dans la marchine virtuelle VVV, XDebug est provisionné par défaut. On peut l'activer avec la commande xdebug_on après s'être connecté à la VM avec vagrant ssh (xdebug_off pour le désactiver).
# Configuration du debugger dans VSCode
Dans VS Code, ouvrir le dossier d'un projet à sa racine (généralement publichtml dans le cas d'un site) puis créer un workspace en allant dans _File > Save Workspace As et sauvegarder le fichier à la racine du projet. La présence de ce fichier est importante pour la suite de la configuration.
Puis installer l'extension PHP Debug.
Redémarrer VSCode et se rendre ensuite dans l'onglet Run ( une icone "play" avec un insecte).
Cliquer sur la roue dentée des settings, ce qui a pour effet de créer et d'ouvrir le fichier de configuration spécifique au projet.
Y entrer ces information, en remplaçant nom_projet par le nom réel :
{
"version": "0.2.0",
"configurations": [
{
"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"port": 9000,
"pathMappings": {
"/srv/www/nom_projet/public_html": "${workspaceRoot}"
}
},
{
"name": "Launch currently open script",
"type": "php",
"request": "launch",
"program": "${file}",
"cwd": "${fileDirname}",
"port": 9000
}
]
}
L'idée ici est de faire correspondre (mapper) la structure de dossier du site, telle qu'elle existe dans VVV à la structure des fichiers locaux, qu'on édite dans VSCode, et on se sert de la variable workspaceRoot qui contient le chemin vers la racine du projet.
# Installation d'un helper dans le navigateur
Installer l'une des extensions suivantes (ou les deux) selon ton navigateur favori :
Configurer l'extension en indiquant le IDE Key correspondant à l'éditeur qu'on utilise. La clé pour VSCode est vscode. On pourra ainsi activer le debugging facilement depuis le navgateur en liquant sur l'icone de l'extension.
Sinon il faudrait ajouter ?XDEBUG_SESSION_START=vscode à la fin de chaque url qu'on veut débugger, ce qui peut être chiant à la longue.
# Premier debugging
# Placer un breakpoint
Un breakpoint est un endroit du code PHP ou l'on va demander au Debugger de mettre l'éxécution du code en pause, pour nous permettre de visualiser l'état de l'application à cet instant précis. On peut insérer autant de breakpoint que l'on veut, le code s'arretera à chacun d'eux. On indique ensuite au debugger qu'on souhaite passer au point suivant à l'aide d'un bouton ou d'une commande.
Ouvrir dans VSCode un fichier PHP qui contient du code intéressant, et placer un breakpoint sur une ligne avec MAJ + F9 ou en cliquant dans la marge à l'endroit souhaité.
Puis cliquer sur Start Debugging (bouton play vert en haut à gauche de VSCode).
Charger la page à débugger dans le navigateur. Elle devrait rester en chargement et les informations de debugging apparaitre dans VSCode.
# Linting et formattage Javascript
Prettier et ESLint sont les formatter et linter utilisés par défaut chez Digital Swing. Avant tout commit ou partage de code, il conviendra de vérifier qu'aucune erreur n'est affichée par les linters.
Certains cas peuvent faire l'objet de commentaires de desactivation temporaire du linting ("ctrl+maj+;" dans VSCode, ou extension eslint-disable-snippets)
# Variable non définie car déclarée en dehors du contexte
Le linter ne connait pas une variable car elle a été déclarée hors de son contexte. Cela arrive par exemple lorsqu'on transmet des variables js via PHP ou dans une balise <script>. Par exemple, les variables utilisées par ajax et chargées avec des wp_localize_script.
/* eslint-disable no-undef */
var potentiallyUndefinedVariable = foo();
/* eslint-enable no-undef */
# Variable non utilisée
Le linter détecte qu'une variable n'est pas utilisée. Dans certains cas on a besoin de passer par une variable, par exemple lorsqu'on initialise une application Vue.
// eslint-disable-next-line no-unused-vars
const App = new Vue({
//...
}
});
# Sublime Text 3
# Package Control
C'est l'extension qui te permettra d'installer toutes les autres dans Sublime Text.
Installer Package Control à l'aide de ctrl + shif + P (Windows/linux) ou cmd + shift + P (MacOS) et sélectionner Install Package Control puis entrée.
# Installer un plugin
Installer le plugin à l'aide de ctrl + shif + P (Windows/linux) ou cmd + shift + P et sélectionner Install: Package puis le nom du plugin désiré et entrée.
# Plugins
Cette section liste les plugins importants et donne une configuration de base pour que chaque membre de l'équipe de développement partage les même pratique de code, ainsi que des utilitaire de productivité.
# Emmet
# ESLint Formatter
# JsPrettier
{
"auto_format_on_save": true,
"auto_format_on_save_requires_prettier_config": false,
"trailingComma": "es5",
// "prettier_cli_path": "/usr/bin/prettier",
// "node_path": "$NVM_BIN/node",
"prettier_options": {
"trailingComma": "none"
}
}
# HTML/CSS/JS Prettify
# PHP Code Sniffer
# SublimeLinter
{
"linters": {
// The name of the linter you installed
"phpcs": {
// Additional arguments for the command line. Either a 'string'
// or an 'array'. If set to a string, we 'shlex.split' it*.
// E.g. '--ignore D112' or ['--config', './.config/foo.ini']
//
// * Note: Use proper quoting around paths esp. on Windows!
"args": ["--standard=WordPress-Core"]
}
}
}
# Autres outils utiles
# HTML Validator
Ajoute un onglet aux dev tools pour la validation W3C HTML.