Utiliser PHP CodeSniffer avec WordPress Installer et utiliser les règles de WordPress

Si vous venez de rejoindre la série, nous avons discuté du sujet des odeurs de code, de la façon de les reformuler et des outils disponibles pour nous aider à automatiser une partie de la monotonie qui en découle, en particulier dans le cadre de la programmation PHP..

Si vous n'avez pas lu les deux premiers articles de la série, je le recommande car ils couvrent quelques conditions préalables que nous avons mises en place avant d'aller de l'avant avec le reste de l'article..

Les articles sont:

  1. Utiliser PHP CodeSniffer avec WordPress: Comprendre les odeurs de code
  2. Utiliser PHP CodeSniffer avec WordPress: Installer et utiliser PHP CodeSniffer

En bref, les articles ci-dessus introduiront le concept des odeurs de code, que nous avons défini comme suit:

[Une] odeur de code, également appelée mauvaise odeur, dans le code de programmation informatique, fait référence à tout symptôme du code source d'un programme pouvant indiquer un problème plus grave.. 

Et je vais vous guider à travers les étapes nécessaires pour installer PHP CodeSniffer sur votre machine.

Mais si vous avez atteint ce stade, je suppose que vous êtes un développeur WordPress et que vous souhaitez configurer PHP CodeSniffer de manière à pouvoir détecter tous les problèmes de code liés aux normes de codage WordPress..

C'est bon! Parce que dans la suite de cet article, c'est exactement ce que nous allons couvrir.

Conditions préalables

Cela devrait être une très courte liste. Si vous avez suivi la série jusqu'à présent, vous devez avoir:

  • une version de PHP (de préférence 5.6.10 ou ultérieure)
  • PHP CodeSniffer
  • Compositeur

Tout cela est couvert en détail dans les précédents articles de la série, mais si vous en êtes à ce stade et que vous êtes à l'aise avec la ligne de commande, cela devrait être un jeu d'enfant par rapport à ce que nous avons fait jusqu'à présent..

Avec tout cela dit, commençons.

Les règles de WordPress pour PHP CodeSniffer

Premièrement, localisez les règles des normes de codage WordPress sur GitHub. Ils sont faciles à trouver.

Vous pouvez tout lire sur les détails du projet à partir de la page du projet, mais la chose la plus importante que je voudrais partager est la suivante:

Ce projet est une collection de règles PHP_CodeSniffer (sniffs) permettant de valider le code développé pour WordPress. Il garantit la qualité du code et le respect des conventions de codage, en particulier des normes officielles de codage WordPress..

Je voudrais attirer votre attention sur la phrase qui fait référence aux "normes officielles de codage WordPress". Notez que ces règles sont basées sur les normes de codage WordPress. Autrement dit, vous ne pouvez pas les référencer officiellement.

Si vous cherchez un moyen de parcourir les règles définies par WordPress, consultez cet article du Codex. C'est facile à suivre, facile à lire, mais beaucoup à retenir. Heureusement, nous avons l'ensemble de règles lié ci-dessus.

La chose importante à noter est que même si vous n'êtes pas familier avec les règles, CodeSniffer trouvera les problèmes avec votre code et vous informera de ce que vous devez réparer. Bien que vous n'ayez pas à lire l'article du Codex, cela peut parfois aider à identifier ce qui est nécessaire en fonction des erreurs ou des avertissements générés par le renifleur..

1. Installez les règles de WordPress

En supposant que vous avez correctement installé PHP CodeSniffer, ajoutons les règles WordPress au logiciel. Pour ce tutoriel, je vais tout faire via la ligne de commande afin d'être le plus agnostique possible sur la plate-forme. J'offrirai quelques mots sur les IDE et les règles à la fin de la série.

Ouvrez votre terminal et accédez à l'emplacement où vous avez installé votre copie de PHP CodeSniffer. Si vous avez suivi cette série de tutoriels, vous vous souviendrez probablement que nous avons un composer.json fichier qui va tirer cela pour nous. Sinon, n'oubliez pas de créer composer.json dans la racine de votre projet et ajoutez ceci au fichier:

"require": "squizlabs / php_codesniffer": "2. *"

Une fois fait, lancez $ mise à jour du compositeur depuis votre terminal et vous aurez tout ce dont vous avez besoin pour commencer. Pour vérifier l'installation, exécutez la commande suivante:

$ vendor / bin / phpcs --version

Et vous devriez voir quelque chose comme la sortie suivante:

PHP_CodeSniffer version 2.6.0 (stable) de Squiz (http://www.squiz.net)

Parfait. Ensuite, installons les règles de WordPress. Puisque nous utilisons Composer (et continuerons à le faire), c'est très facile à faire..

Exécutez la commande suivante à partir du répertoire racine de votre projet:

composer créer-projet wp-coding-standards / wpcs: dev-master --no-dev

Notez que la question suivante peut vous être posée:

Voulez-vous supprimer l'historique existant de VCS (.git, .svn…)? [Y, n]?

Si vous savez ce que vous faites, n'hésitez pas à choisir l'option 'n'; sinon, vous irez bien frapper 'y'.

2. Ajoutez les règles à PHP CodeSniffer

Maintenant que PHP CodeSniffer est installé et que les règles WordPress sont installées, nous devons nous assurer que PHP CodeSniffer est au courant de notre nouveau jeu de règles. Pour ce faire, nous devons entrer la commande suivante dans la ligne de commande. 

À la racine du répertoire de votre projet, entrez la commande suivante:

$ vendor / bin / phpcs --config-set installed_paths wpcs

Pour vérifier que les nouvelles règles ont bien été ajoutées, nous pouvons demander à PHP CodeSniffer de nous signaler les ensembles de règles dont il dispose actuellement. Dans le terminal, entrez la commande suivante:

$ vendor / bin / phpcs -i

Et vous devriez voir le résultat suivant (ou quelque chose de très similaire):

Les normes de codage installées sont MySource, PEAR, PHPCS, PSR1, PSR2, Squiz, Zend, WordPress, WordPress-Core, WordPress-Docs, WordPress-Extra et WordPress-VIP.

Notez dans la ligne ci-dessus que nous avons plusieurs ensembles de règles concernant WordPress. Plutôt chouette, n'est-ce pas? Bien sûr, voyons comment cela s’empile lorsque nous exécutons les ensembles de règles contre un plugin tel que Bonjour Dolly.

3. Exécution de PHP CodeSniffer contre des projets WordPress

En supposant que vous travaillez à partir d'un répertoire qui inclut un plugin WordPress, vous pouvez ignorer l'étape suivante. Si, par contre, vous faites ne pas avoir une copie d'un script WordPress, fichier, thème ou plugin installé dans le répertoire du projet, allez-y et copiez-en une dans votre répertoire de projet maintenant.

Comme mentionné, nous allons tester le Bonjour Dolly brancher.

Pour exécuter PHP CodeSniffer avec les règles WordPress par rapport aux fichiers du répertoire du plugin, entrez la commande suivante dans le terminal:

$ vendor / bin / phpcs --standard = Bonjour WordPress

Cela donnera un résultat qui devrait correspondre à ce que vous voyez ici:

FICHIER: /Users/tommcfarlin/Desktop/tutsplus_demo/hello-dolly/hello.php ------------------------------------ -------------------------------------- 14 ERREURS AFFECTANT 14 LIGNES ------ -------------------------------------------------- -------------- 2 | ERREUR | Brève description manquante dans le commentaire commentaire 5 | ERREUR | Il doit y avoir exactement une ligne vierge après le fichier | | commentaire 6 | ERREUR | Ligne vide requise avant le commentaire du bloc 15 | ERREUR | Vous devez utiliser les commentaires de style "/ **" pour une fonction | | commentaire 46 | ERREUR | Les commentaires en ligne doivent se terminer par des points, exclamation | | marques ou points d'interrogation 49 | ERREUR | Les commentaires en ligne doivent se terminer par des points, exclamation | | marques ou points d'interrogation 53 | ERREUR | Les commentaires en ligne doivent se terminer par des points, exclamation | | marques ou points d'interrogation 54 | ERREUR | Vous devez utiliser les commentaires de style "/ **" pour une fonction | | commentaire 56 | ERREUR | Il est attendu que la prochaine étape soit une fonction d'échappement (voir | | Codex pour "Validation des données"), pas ""

$ choisi

"'59 | ERREUR | Les commentaires incorporés doivent se terminer par des points, des points d'exclamation ou des points d'exclamation 62 | ERROR | Les commentaires insérés doivent se terminer par des points d'exclamation, des points d'exclamation ou des points d'interrogation 63 | ERROR | utilisez les commentaires de style "/ **" pour une fonction | | comment 64 | ERROR | Les commentaires en ligne doivent se terminer par des points, des points d'exclamation | ou des points d'interrogation 67 | ERROR | Prochaine étape: une fonction d'échappement (voir | | | Codex pour 'Validation des données'), pas '"| | ' ----------------------------------------------------------------------

Bien sûr, certaines choses peuvent changer en fonction du moment où vous lisez ce tutoriel..

Les erreurs devraient être assez claires sur ce qui doit être corrigé:

  • La première colonne indique la ligne dans laquelle le problème existe.
  • La deuxième colonne détermine s'il y a une erreur ou un avertissement.
  • La troisième colonne explique le problème et ce que l'on attend du code.

Notez que bien qu'il s'agisse d'erreurs ou d'avertissements, le code fonctionnera toujours. Mais voyons cela de bout en bout et voyons comment réparer un plugin, sans doute le plus populaire depuis qu'il est livré avec chaque installation de WordPress, et examinons les différences de qualité du code..

4. Refactoring Bonjour Dolly

Notez que le plugin, avant de commencer à travailler dessus, inclut le code source suivant:

Bonjour Dolly dans le coin supérieur droit de votre écran d'administration sur chaque page. Auteur: Matt Mullenweg Version: 1.6 URI de l'auteur: http://ma.tt/ * / function hello_dolly_get_lyric () / ** Ce sont les paroles de Hello Dolly * / $ lyrics = "Bonjour, Dolly Eh bien, bonjour, Dolly c'est si gentil de te retrouver là où tu es chez toi Tu as honte, Dolly Je peux dire, Dolly Tu es toujours aussi radieuse, tu es toujours à l'affût 'Tu es encore forte, on sent la pièce bouger' Alors que le Le groupe joue l'une de vos vieilles chansons préférées de l'époque. Alors, prenez son temps, ses gars. Trouvez-lui un tour vide, ses gars. Dolly ne s'en ira jamais. Bonjour, Dolly Eh bien, bonjour, Dolly C'est un plaisir de vous retrouver là où tu es en train de te regarder Tu regardes bien, Dolly Je peux dire, Dolly Tu es toujours aussi rayonnante, tu es toujours à l'affût 'Tu es toujours aussi forte Nous sentons la salle bouger' Pendant que le groupe joue 'L'un de tes vieux chansons préférées de Golly, Gee, les gars. Trouvez-lui un genou vide, les gars. Dolly ne partira jamais. Dolly ne partira jamais. Dolly ne partira jamais plus "; // Ici nous l'avons divisé en lignes $ lyrics = explode ("\ n", $ lyrics); // Et ensuite, choisit au hasard un retour de ligne wptexturize ($ lyrics [mt_rand (0, count ($ lyrics) - 1)]);  // Cela fait écho à la ligne choisie, nous la positionnerons plus tard function hello_dolly () $ selected = hello_dolly_get_lyric (); écho "

$ choisi

" // Maintenant, nous configurons cette fonction pour qu'elle s'exécute lorsque l'action admin_notices s'appelle add_action ('admin_notices', 'hello_dolly'); // Nous avons besoin de CSS pour positionner la fonction de paragraphe dolly_css () // Cela vérifie que le positionnement est également bon pour les langues de droite à gauche $ x = is_rtl ()? 'left': 'right'; echo " "; add_action ('admin_head', 'dolly_css');?>

Il devrait être relativement facile à suivre car il utilise seulement quelques fonctionnalités de base de PHP et que Matt a bien commenté le code..

Mais étant donné les 14 erreurs trouvées par CodeSniffer, modifions le plugin. En tenant compte des erreurs qu’ils ont présentées et de ce à quoi on s’attend, on va s’attaquer à chacune d’elles.

Une fois cela fait, le plugin devrait ressembler à ceci:

Bonjour Dolly dans le coin supérieur droit de votre écran d'administration sur chaque page. * Auteur: Matt Mullenweg * Version: 1.6 * URI de l'auteur: http://ma.tt/ * / / ** * Définit les paroles de 'Hello Dolly'. * * @return string Une ligne aléatoire des paroles de la chanson. * / function hello_dolly_get_lyric () / ** Ce sont les paroles de Hello Dolly * / $ lyrics = "Bonjour, Dolly Eh bien, bonjour, Dolly Il est si agréable de te retrouver où tu appartiens Tu es honteux, Dolly I tu peux dire, Dolly Tu es toujours aussi radieuse, tu es toujours à l'affût 'Tu es toujours forte, nous sentons la salle bouger' Pendant que le groupe joue Une de tes vieilles chansons préférées de tout temps, alors, profites-en. , les gars Trouvez-lui un tour vide, les gars Dolly ne partira jamais Bonjour, Dolly Eh bien, bonjour, Dolly Il est si agréable de vous retrouver où vous appartenez Vous êtes look hell, Dolly je peux dire, Dolly Vous êtes tu brilles toujours, tu pleures toujours "tu restes fort. Nous sentons la pièce bouger" Pendant que le groupe joue Une de tes vieilles chansons préférées de Golly, Gee, les gars Trouvez-lui un genou vacant, des gars Dolly ne partira jamais Dolly ne partira jamais Dolly ne partira plus jamais "; // Ici nous le découpons en lignes. $ lyrics = explode ("\ n", $ lyrics); // Et ensuite, choisis au hasard une ligne. retourne wptexturize ($ lyrics [mt_rand (0, count ($ lyrics) - 1)]);  add_action ('admin_notices', 'hello_dolly'); / ** * Ceci fait écho à la ligne choisie, nous la positionnerons plus tard. Cette fonction est * configurée pour s'exécuter lorsque l'action admin_notices est appelée. * / function hello_dolly () $ choisi = hello_dolly_get_lyric (); écho "

$ choisi

"; // WPCS: XSS OK. Add_action ('admin_head', 'dolly_css');; / ** * Ajoutez du code CSS pour positionner le paragraphe. * / Function dolly_css () / ** * Cela garantit que le positionnement convient également aux langues de droite à gauche. * / $ x = is_rtl ()? 'left': 'right'; echo " "; // WPCS: XSS OK.

Notez que le plugin continue de fonctionner et que le code est un peu plus propre. Enfin, vérifions que cela passe le test PHP CodeSniffer. Réexécutons le code que nous avons utilisé ci-dessus pour évaluer initialement le plugin..

$ vendor / bin / phpcs --standard = Bonjour WordPress

Et la sortie que nous voyons:

Skyhopper5: tutsplus_demo tommcfarlin $

Exactement: il ne devrait y avoir aucune sortie. Au lieu de cela, il devrait être un retour à l'invite de commande standard.

Excellent. Le plugin a été mis aux normes. C’est la raison pour laquelle avoir un code sniffer est si précieux: il trouve les erreurs dans votre code en fonction des règles que vous définissez, puis signale toutes les erreurs pouvant exister..

En fin de compte, cela garantit que vous intégrez du code écrit de la plus haute qualité sur un site de niveau de production. Cela ne signifie pas pour autant que vous devriez éviter les tests unitaires ou d'autres types de tests, cela ne signifie pas non plus que les bogues n'existent pas. Cela signifie simplement que votre code est à la hauteur.

Conclusion

Et avec cela, nous concluons la série sur l’utilisation de PHP CodeSniffer. Rappelez-vous que tout au long de la série, nous avons abordé l’idée des odeurs de code, leur refactorisation et les outils disponibles pour les applications PHP..

Dans cet article, nous avons vu comment utiliser un ensemble de règles fournies pour les normes de codage WordPress afin d'évaluer notre code lorsque vous travaillez sur un projet nouveau ou existant. Notez que certains IDE prennent en charge la possibilité d’exécuter les règles tout en écrivant du code.

Bien que cela dépasse le cadre de ce didacticiel, vous pouvez trouver des ressources à ce sujet à différents endroits du Web. Il vous suffit de rechercher votre IDE par nom, de déterminer son support pour PHP CodeSniffer, puis de vous assurer d’installer les règles WordPress telles que décrites dans ce tutoriel..

Si vous avez aimé cet article ou cette série, vous voudrez peut-être vérifier d'autres choses que j'ai écrites à la fois sur ma page de profil ou sur mon blog. Vous pouvez également me suivre sur Twitter à @tommcfarlin, où je parle et partage souvent diverses pratiques de développement logiciel dans le contexte de WordPress..

Cela dit, n'hésitez pas à laisser des questions ou des commentaires dans le flux ci-dessous et je m'efforcerai de répondre à chacun d'entre eux..

Ressources

  • Normes de codage WordPress pour PHP CodeSniffer
  • Bonjour Dolly
  • wptexturize
  • La validation des données
  • WPCS: XSS OK.