Valider votre projet VSCode avec PHP CodeSniffer (PHPCS) et WordPress Coding Standards (WPCS)

Dans ce tutoriel, nous allons explorer comment utiliser Composer pour installer et configurer PHP CodeSniffer (PHPCS) et WordPress Coding Standards (WPCS) dans un projet WordPress (PHP), spécifiquement en utilisant l’éditeur de code Visual Studio Code (VSCode). 

PHPCS est un outil indispensable pour analyser le code PHP, JavaScript et CSS afin de détecter les violations de standards de codage. WPCS est un ensemble de règles pour assurer que le code WordPress respecte les conventions de codage recommandées par WordPress. 

L’intégration de ces outils dans votre environnement de développement peut grandement améliorer la qualité du code et faciliter le respect des normes de codage.

Installation de Composer

Pour commencer, vous devez installer Composer, un gestionnaire de dépendances pour PHP qui permet d’installer et de gérer des bibliothèques au sein de vos projets PHP.

• Windows :
  • Téléchargez et exécutez l’installateur de Composer depuis getcomposer.org.
  • Suivez les instructions à l’écran pour installer Composer.
• macOS et Linux :
  • Ouvrez un terminal et exécutez la commande suivante pour télécharger le programme d’installation de Composer :

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"Code language: JavaScript (javascript)

Ensuite, exécutez le programme d’installation :

php composer-setup.phpCode language: CSS (css)

Pour rendre Composer accessible globalement, déplacez le fichier composer.phar dans un répertoire accessible dans votre PATH :

mv composer.phar /usr/local/bin/composer

Confirmez l’installation en vérifiant la version de Composer :

composer --version

Passons maintenant à la configuration de Visual Studio Code pour utiliser PHPCS et WPCS.

Configuration de VSCode

Pour utiliser PHPCS et WPCS dans VSCode, vous devez installer quelques extensions qui faciliteront l’intégration et l’utilisation de ces outils.

• Ouvrez VSCode.
• Accédez à l’onglet Extensions (icône des blocs sur le côté gauche) ou appuyez sur Ctrl+Shift+X.
• Recherchez et installez les extensions suivantes :
  • PHP Intelephense : Une extension populaire pour le développement PHP qui offre des fonctionnalités telles que l’autocomplétion, le référencement de code, et plus encore.
  • PHP Sniffer & Beautifier : Cette extension permet d’intégrer PHPCS directement dans VSCode pour l’analyse et la correction automatique du code selon les standards définis.

Après avoir installé ces extensions, vous êtes prêt à installer PHPCS et WPCS au niveau de votre projet.

Installation de PHPCS et WPCS

Suivez ces étapes pour installer PHPCS et WPCS dans votre projet PHP via Composer :

1. Ouvrez le terminal intégré de VSCode (Ctrl+` ou via le menu Terminal > Nouveau terminal).
2. Naviguez dans le répertoire de votre projet. Si votre projet n’existe pas encore, créez un nouveau dossier et naviguez-y.
3. Exécutez la commande suivante pour installer PHPCS :

composer require --dev squizlabs/php_codesnifferCode language: JavaScript (javascript)

4. Installez les WordPress Coding Standards (WPCS) en ajoutant le dépôt pertinent et le package via Composer :

composer require --dev wp-coding-standards/wpcs
composer config --set repositories.wpcs vcs https://github.com/WordPress/WordPress-Coding-Standards
composer require --dev squizlabs/php_codesniffer wp-coding-standards/wpcs dealerdirect/phpcodesniffer-composer-installerCode language: PHP (php)

Cette commande configure également Composer pour installer automatiquement les standards dans PHPCS.

5. Après l’installation, configurez PHPCS pour utiliser WPCS en exécutant :

vendor/bin/phpcs --config-set installed_paths ../../wp-coding-standards/wpcsCode language: JavaScript (javascript)

Abordons maintenant la création et la configuration du fichier phpcs.xml.dist, qui est crucial pour personnaliser et appliquer les standards de codage à votre projet.

Création et configuration du fichier phpcs.xml.dist

Le fichier phpcs.xml.dist sert de modèle pour la configuration de PHP CodeSniffer dans votre projet. Il vous permet de définir les règles spécifiques que PHPCS doit appliquer ou ignorer.

1. Créez un fichier nommé phpcs.xml.dist à la racine de votre projet.
2. Ouvrez ce fichier avec VSCode et ajoutez le contenu suivant :

<?xml version="1.0"?>
<ruleset name="CustomWordPressProject">
    <description>Custom ruleset for WordPress development.</description>

    <!-- What to scan. -->
    <file>.</file>

    <!-- Exclude patterns -->
    <exclude-pattern>vendor/*</exclude-pattern>
    <exclude-pattern>node_modules/*</exclude-pattern>

	<!-- Show progress. -->
	<arg value="p"/>

	<!-- Strip the filepaths down to the relevant bit. -->
	<arg name="basepath" value="./"/>

	<!-- Check up to 8 files simultaneously. -->
	<arg name="parallel" value="8"/>

    <!-- Exclude the rules that enforce space indentations -->
    <rule ref="Generic.WhiteSpace.DisallowSpaceIndent">
        <severity>0</severity>
    </rule>

    <!-- Include and configure rules to enforce tab indentations -->
    <rule ref="Generic.WhiteSpace.ScopeIndent">
        <properties>
            <property name="indent" value="\t"/>
        </properties>
    </rule>
    <rule ref="Generic.WhiteSpace.DisallowTabIndent" severity="0"/>

	<!-- Enforce short syntax arrays. -->
	<rule ref="Generic.Arrays.DisallowLongArraySyntax"/>

	<!-- Disallow long array syntax -->
	<rule ref="Generic.Arrays.DisallowShortArraySyntax.Found">
		<exclude-pattern>*</exclude-pattern>
	</rule>

    <!-- Include the whole WordPress Coding Standards -->
    <rule ref="WordPress">
        <!-- Exclude the WordPress array declaration rules. -->
        <exclude name="WordPress.Arrays.ArrayDeclarationSpacing"/>
		<!-- Exclude check for short syntax arrays. -->
		 <exclude name="Universal.Arrays.DisallowShortArraySyntax"/>
    </rule>

    <!-- Our plugin text-domain -->
    <rule ref="WordPress.WP.I18n">
      <properties>
         <property name="text_domain" type="array" value="plugin-text-domain" />
      </properties>
   </rule>

</ruleset>Code language: HTML, XML (xml)

Ce fichier configure PHPCS pour utiliser les règles de codage de WordPress, exclut le scanning du dossier /vendor/, force l’utilisation des tabulations pour l’indentation et les structures de tableau courtes (short array syntax).

Changez “plugin-text-domain” pour le text domain de votre plugin.

3. Sauvegardez le fichier.

Test et validation

Une fois que tout est configuré, vous pouvez tester la configuration de PHPCS pour vous assurer qu’elle fonctionne correctement et qu’elle détecte les erreurs de codage conformément aux règles définies.

1. Exécutez PHPCS sur votre projet pour voir si des erreurs de codage sont détectées :

./vendor/bin/phpcs

2. Pour corriger automatiquement les erreurs de codage où c’est possible, utilisez :

./vendor/bin/phpcbf

Cette commande va ajuster automatiquement votre code pour se conformer aux règles spécifiées dans votre phpcs.xml.dist.

Conclusion

Vous avez maintenant un environnement de développement configuré avec PHPCS et WPCS dans VSCode pour garantir que votre code PHP respecte les standards de qualité élevés. Il est important de régulièrement vérifier votre code avec ces outils pour maintenir une base de code propre et conforme aux meilleures pratiques.