Utiliser Visual Studio Code pour coder avec WordPress

Pour coder avec WordPress, il vous faut bien évidemment un éditeur de code. Pour ma part, j’utilise Visual Studio Code, un éditeur de code conçu par Microsoft.

Cet éditeur de code est très souple et permet notamment d’installer des extensions. Une extension qui est bien utile est « WordPress Core Snippets for Visual Studio Code » développée par wpdevtools.io.

Cette extension stocke toutes les fonctions disponibles dans WordPress et dispose d’un système d’auto-complétion. Ainsi, dès que vous commencez à taper le nom d’une fonction WordPress, l’extension vous proposera une liste de choix avec les fonctions disponibles. Ces fameuses fonctions sont également documentées et vous pouvez voir les différentes variables qui les composent.

Voici une vidéo de démonstration :

En outre, Visual Studio Code embarque le système « Emmet » qui permet de coder plus vite.

Par exemple, si vous avez du code HTML à créer, il vous suffit de taper des abréviations pour automatiquement créer l’ensemble du code.

Ainsi, si vous avez besoin de générer le code HTML suivant :

<div class="container">
    <ul>
        <li><span class="item"></span></li>
        <li><span class="item"></span></li>
        <li><span class="item"></span></li>
    </ul>
</div>

Il vous suffira de taper :

div.container>ul>li*3>span.item

Cela marche également pour le css. Pour écrire :

padding: 10px;
margin: 10px;
text-align: center;
border-radius: 10px;

Il faudra successivement taper :

p10
m10
tac
bdrs10

Pour vous y retrouvez, vous pouvez accéder à la documentation de Emmet.

PS: n'oubliez pas de lire mon tutoriel principal sur comment créer un thème WordPress !