Share
Se ti stai appena iscrivendo alla serie, abbiamo discusso dell'odore degli odori di codice, di come refactoring e degli strumenti disponibili per aiutarci ad automatizzare parte della monotonia che deriva dal farlo, specialmente nella programmazione PHP.
Se non hai letto i primi due articoli della serie, lo consiglio perché coprono alcuni prerequisiti che abbiamo in atto prima di andare avanti con il resto dell'articolo.
Gli articoli sono:
In breve, gli articoli di cui sopra introdurranno il concetto di odori di codice, che abbiamo definito come segue:
[A] odore di codice, noto anche come un cattivo odore, nel codice di programmazione del computer, si riferisce a qualsiasi sintomo nel codice sorgente di un programma che forse indica un problema più profondo.
E ti guiderò attraverso i passaggi necessari per installare PHP CodeSniffer sul tuo computer.
Ma se sei arrivato a questo punto, presumo che tu sia uno sviluppatore WordPress, e sei interessato a configurare PHP CodeSniffer in modo tale da poter individuare eventuali problemi nel tuo codice in relazione agli standard di codifica di WordPress.
Quello è buono! Perché nel resto di questo articolo, questo è esattamente ciò che copriremo.
Questo dovrebbe essere un elenco molto breve. Se hai seguito la serie fino a questo punto, devi avere:
Tutto questo è trattato in dettaglio negli articoli precedenti della serie, ma se sei arrivato così lontano e sei a tuo agio con la riga di comando, questo dovrebbe essere un gioco da ragazzi rispetto a quello che abbiamo fatto finora.
Detto questo, iniziamo.
Innanzitutto, individua le regole degli standard di codifica di WordPress su GitHub. Sono facili da trovare.
Puoi leggere tutti i dettagli del progetto dalla pagina del progetto, ma la cosa più importante che vorrei condividere è la seguente:
Questo progetto è una raccolta di regole PHP_CodeSniffer (sniff) per convalidare il codice sviluppato per WordPress. Garantisce la qualità del codice e l'aderenza alle convenzioni di codifica, in particolare gli standard ufficiali di codifica WordPress.
Vorrei richiamare la vostra attenzione sulla frase che fa riferimento agli "standard ufficiali di codifica di WordPress". Nota che queste regole sono basate sugli standard di codifica di WordPress. Cioè, non puoi farne riferimento ufficialmente.
Se stai cercando un modo per esaminare le regole definite da WordPress, dai un'occhiata a questo articolo nel Codex. È facile da seguire, facile da leggere, ma molto da ricordare. Per fortuna, abbiamo la regola impostata sopra.
La cosa importante da notare è che anche se non si ha familiarità con le regole, CodeSniffer troverà i problemi con il proprio codice e ti informerà di ciò che è necessario correggere. Sebbene non sia necessario leggere l'articolo Codex, a volte può aiutare a identificare ciò che è necessario in base agli errori o agli avvisi generati dallo sniffer.
Supponendo di aver installato PHP CodeSniffer correttamente, aggiungiamo le regole di WordPress al software. Per questo tutorial, ho intenzione di fare tutto tramite la riga di comando in modo da essere il più agnostico possibile. Offrirò alcune parole riguardo gli IDE e le regole alla fine della serie.
Apri il tuo terminale e vai dove hai installato la tua copia di PHP CodeSniffer. Se hai seguito questa serie di tutorial, probabilmente ricorderai che abbiamo un composer.json file che tirerà questo per noi. In caso contrario, ricorda di creare composer.json nella radice del tuo progetto e aggiungi questo al file:
"require": "squizlabs / php_codesniffer": "2. *"
Una volta fatto, corri $ compositore di aggiornamento dal tuo terminale e avrai tutto il necessario per iniziare. Per verificare l'installazione, eseguire il seguente comando:
$ vendor / bin / phpcs --version
E dovresti vedere qualcosa come il seguente output:
PHP_CodeSniffer versione 2.6.0 (stabile) di Squiz (http://www.squiz.net)
Perfezionare. Quindi, installiamo le regole di WordPress. Dato che stiamo usando Composer (e continueremo a farlo), questo è molto facile da fare.
Esegui il seguente comando dalla directory principale del tuo progetto:
compositore crea-progetto wp-coding-standards / wpcs: dev-master --no-dev
Si noti che è possibile che venga visualizzata la seguente domanda:
Vuoi rimuovere la cronologia VCS esistente (.git, .svn ...)? [Y, n]?
Se sai cosa stai facendo, sentiti libero di andare avanti e selezionare 'n'; altrimenti, starai bene con 'y'.
Ora che PHP CodeSniffer è installato e le regole di WordPress sono installate, dobbiamo assicurarci che CodeSniffer di PHP sia a conoscenza del nostro nuovo set di regole. Per fare ciò, dobbiamo inserire il seguente comando nella riga di comando.
Dalla radice della directory del progetto, immettere il seguente comando:
$ vendor / bin / phpcs --config-set installed_paths wpcs
Per verificare che le nuove regole siano state aggiunte, possiamo chiedere a PHP CodeSniffer di segnalarci le serie di regole attualmente disponibili. Nel Terminale, inserisci il seguente comando:
$ vendor / bin / phpcs -i
E dovresti vedere il seguente output (o qualcosa di molto simile):
Gli standard di codifica installati sono MySource, PEAR, PHPCS, PSR1, PSR2, Squiz, Zend, WordPress, WordPress-Core, WordPress-Docs, WordPress-Extra e WordPress-VIP
Si noti nella riga precedente che abbiamo diverse serie di regole riguardanti WordPress. Abbastanza pulito, non è vero? Certo, vediamo come questo si accumula quando eseguiamo le regole su un plugin come Ciao Dolly.
Supponendo che stai lavorando su una directory che include un plugin per WordPress, puoi saltare il seguente passaggio. Se, d'altra parte, lo fai non avere una copia di uno script, un file, un tema o un plugin di WordPress installati nella directory del progetto, andare avanti e copiarne uno nella directory del progetto ora.
Come accennato, testeremo il Ciao Dolly collegare.
Per eseguire PHP CodeSniffer con le regole di WordPress rispetto ai file nella directory del plugin, inserisci il seguente comando nel Terminale:
$ vendor / bin / phpcs - standard = WordPress ciao-dolly
Ciò produrrà un risultato che dovrebbe corrispondere a quello che vedi qui:
FILE: /Users/tommcfarlin/Desktop/tutsplus_demo/hello-dolly/hello.php -------------------------------- -------------------------------------- TROVATO 14 ERRORI CHE INFLUENZANO 14 LINEE ------ -------------------------------------------------- -------------- 2 | ERRORE | Breve descrizione mancante nel commento del documento 5 | ERRORE | Deve esserci esattamente una riga vuota dopo il file | | commento 6 | ERRORE | Linea vuota richiesta prima del commento di blocco 15 | ERRORE | È necessario utilizzare i commenti di stile "/ **" per una funzione | | commento 46 | ERRORE | I commenti in linea devono terminare a intervalli completi, esclamativo | | marchi o punti interrogativi 49 | ERRORE | I commenti in linea devono terminare a intervalli completi, esclamativo | | marchi o punti interrogativi 53 | ERRORE | I commenti in linea devono terminare a intervalli completi, esclamativo | | marchi o punti interrogativi 54 | ERRORE | È necessario utilizzare i commenti di stile "/ **" per una funzione | | commento 56 | ERRORE | Prossima previsione è una funzione di escape (vedi | | Codex per 'Data Validation'), non '"$ scelto
"'59 | ERRORE | I commenti incorporati devono terminare con arresti totali, punti esclamativi |, o punti interrogativi 62 | ERRORE | I commenti incorporati devono terminare con arresti completi, esclamativi | | segni o punti interrogativi 63 | ERRORE | Devi utilizzare i commenti di stile "/ **" per una funzione | | commento 64 | ERRORE | I commenti incorporati devono terminare con arresti completi, punti esclamativi |, o punti interrogativi 67 | ERRORE | La prossima cosa prevista è una funzione di escape (vedere | | Codice per 'Data Validation'), non '"| | ' ----------------------------------------------------------------------
Naturalmente, alcune di queste cose potrebbero cambiare a seconda di quando stai leggendo questo tutorial.
Gli errori dovrebbero essere abbastanza chiari su ciò che deve essere risolto:
Si noti che sebbene si tratti di errori o avvertenze, il codice funzionerà ovviamente ancora. Ma portiamo tutto questo fino alla fine e vediamo come è sistemare un plugin, probabilmente il più popolare dal momento che viene fornito con ogni installazione di WordPress, e rivedere le differenze nella qualità del codice.
Nota che il plugin, prima di iniziare a lavorarci, include il seguente codice sorgente:
Accentsconagua
Ciao Dolly in alto a destra della schermata di amministrazione su ogni pagina. Autore: Matt Mullenweg Versione: 1.6 Autore URI: http://ma.tt/ * / function hello_dolly_get_lyric () / ** Questi sono i testi di Hello Dolly * / $ lyrics = "Ciao, Dolly Bene, ciao, Dolly It's così bello da riaverti dove appartieni Stai cercando di gonfiare, Dolly Posso dirlo, Dolly Stai ancora splendendo, stai ancora cazzeggiando Stai ancora andando forte Sentiamo la stanza ondeggiare Mentre il La band sta suonando Una delle tue vecchie canzoni preferite da lontano Quando, quindi, prendi il suo involucro, i fellas. Trovale un giro vuoto, amici. Dolly non andrà mai via di nuovo Ciao, Dolly Bene, ciao, Dolly È così bello riaverti dove Tu appartieni Stai guardando, Dolly Posso dirlo, Dolly Stai ancora splendendo, stai ancora cantando Stai ancora andando forte Sentiamo la stanza ondeggiare Mentre la band sta suonando Uno dei tuoi vecchi canzoni preferite da quando Golly, gee, fellas Le trovi un ginocchio libero, ragazzi che Dolly non andrà mai via Dolly non andrà mai via Dolly non se ne andrà mai più via "; // Qui lo dividiamo in righe $ lyrics = explode ("\ n", $ testi); // E poi scegli a caso una riga return wptexturize ($ lyrics [mt_rand (0, count ($ lyrics) - 1)]); // Questo fa solo da eco alla riga scelta, la posizioneremo in seguito function hello_dolly () $ chosen = hello_dolly_get_lyric (); eco "$ scelto
"; // Ora impostiamo questa funzione da eseguire quando l'azione admin_notices è chiamata add_action ('admin_notices', 'hello_dolly'); // Abbiamo bisogno di alcuni CSS per posizionare la funzione di paragrafo dolly_css () // Questo assicura che il posizionamento è utile anche per le lingue da destra a sinistra $ x = is_rtl ()? 'left': 'right'; echo " "; add_action ('admin_head', 'dolly_css');?> Dovrebbe essere relativamente facile da seguire in quanto utilizza solo poche funzioni PHP di base e Matt ha fatto un buon lavoro nel commentare il codice.
Ma visti i 14 errori rilevati da CodeSniffer, facciamo il refactoring del plugin. Tenendo conto degli errori che hanno presentato e di cosa si aspetta di vedere, affrontiamo ognuno di essi.
Una volta fatto, il plugin dovrebbe apparire come il seguente:
Ciao Dolly in alto a destra della schermata di amministrazione su ogni pagina. * Autore: Matt Mullenweg * Versione: 1.6 * URI autore: http://ma.tt/ * / / ** * Definisce il testo di "Hello Dolly". * * @return string Una riga casuale dei testi della canzone. * / function hello_dolly_get_lyric () / ** Questi sono i testi di Hello Dolly * / $ lyrics = "Ciao, Dolly Beh, ciao, Dolly È così bello riaverti dove appartieni Stai cercando di gonfiarsi, Dolly I puoi dire, Dolly Stai ancora splendendo, stai ancora cantando 'Stai ancora andando forte Sentiamo la stanza ondeggiare' Mentre la band suona 'Una delle tue vecchie canzoni preferite da molto tempo quando Quindi, prendi il suo involto , amici, trovala un giro vuoto, ragazzi, Dolly non andrà mai via di nuovo Ciao, Dolly Beh, ciao, Dolly È così bello riaverti dove appartieni Stai cercando di gonfiarsi, Dolly Posso dirlo, Dolly Sei continua a brillare, stai ancora cantando 'Stai ancora andando forte Sentiamo la stanza ondeggiare' Mentre la band suona 'Una delle tue vecchie canzoni preferite da quando Golly, gee, ragazzi trovi un suo ginocchio libero, amici Dolly non andrà mai via Dolly non andrà mai via Dolly non andrà mai più via "; // Qui lo dividiamo in linee. $ lyrics = explode ("\ n", $ testi); // E poi scegliere casualmente una linea. return wptexturize ($ lyrics [mt_rand (0, count ($ lyrics) - 1)]); add_action ('admin_notices', 'hello_dolly'); / ** * Questo fa solo eco alla linea scelta, la posizioneremo in un secondo momento. Questa funzione è * impostata per essere eseguita quando viene chiamata l'azione admin_notices. * / function hello_dolly () $ chosen = hello_dolly_get_lyric (); eco "$ scelto
"; // WPC: XSS OK. Add_action ('admin_head', 'dolly_css'); / ** * Aggiungi un po 'di CSS per posizionare il paragrafo. * / Function dolly_css () / ** * Questo assicura che il posizionamento è utile anche per le lingue con scrittura da destra a sinistra. * / $ x = is_rtl ()? 'left': 'right'; echo " "; // WPC: XSS OK. Si noti che il plug-in continua a funzionare e il codice è un po 'più pulito. Infine, verifica che questo superi il test CodeSniffer di PHP. Rieseguiamo il codice che abbiamo usato sopra per valutare inizialmente il plugin.
$ vendor / bin / phpcs - standard = WordPress ciao-dolly
E l'output che vediamo:
Skyhopper5: tutsplus_demo tommcfarlin $
Esattamente: non ci dovrebbe essere uscita. Invece, dovrebbe essere un ritorno al prompt dei comandi standard.
Eccellente. Il plugin è stato portato allo standard. Questo è il motivo per cui avere uno sniffer di codice è così prezioso: trova gli errori nel codice in base alle regole definite e quindi segnala eventuali errori che possono esistere.
In definitiva, questo garantisce che stai rilasciando il codice scritto di più alta qualità in un sito a livello di produzione. Ora, questo non significa che dovresti evitare i test unitari o altri tipi di test, né ciò significa che i bug non esistono. Significa solo che il tuo codice è all'altezza di uno standard elevato.
E con questo, concludiamo la serie sull'uso di CodeSniffer PHP. Ricordiamo che durante tutta la serie, abbiamo coperto l'idea di odori di codice, come refactoring, e quali strumenti ci sono disponibili quando si lavora con applicazioni PHP.
In questo articolo, abbiamo visto come possiamo utilizzare un set di regole fornito per gli standard di codifica di WordPress per valutare il nostro codice mentre si lavora su un progetto nuovo o esistente. Si noti che alcuni IDE supportano la possibilità di eseguire le regole durante la scrittura del codice.
Anche se questo va oltre lo scopo di questo particolare tutorial, puoi trovare risorse per questo in vari punti del web. Cerca semplicemente il tuo IDE per nome, determina il suo supporto per PHP CodeSniffer, quindi assicurati di installare le regole di WordPress come descritto in questo tutorial.
Se ti è piaciuto questo articolo o questa serie, potresti essere interessato a verificare altre cose che ho scritto sia sulla mia pagina del profilo o sul mio blog. Puoi anche seguirmi su Twitter all'indirizzo @tommcfarlin, dove spesso parlo e condividi varie pratiche di sviluppo del software nel contesto di WordPress.
Detto ciò, non esitate a lasciare domande o commenti nel feed qui sotto e cercherò di rispondere a ciascuno di essi.
