Share
Ci sono numerose risorse sulle quali possiamo basarci durante la codifica che aiuteranno a preservare gli standard all'interno del team. In questo tutorial, esamineremo come distribuire e utilizzare cinque di questi strumenti.
HTML, CSS e JavaScript sono particolarmente accomodanti in materia di scrittura convegni è preoccupato. Finché alcune notazioni seguono le regole della lingua, che le virgolette, le parentesi, i due punti, i semi-colon e così via sono tutti nel posto giusto, il codice funzionerà. Tuttavia, indentazione, spaziatura, interruzione di riga, ordine di dichiarazione delle proprietà, funzioni e variabili, incluso il loro word-case, sono interamente a carico degli autori.
Gli elementi HTML, ad esempio, non sono in realtà sensibili al maiuscolo / minuscolo. Possiamo scrivere in lettere minuscole o maiuscole; quella che era una pratica comune negli anni '90. Inoltre, il wrapping dei valori degli attributi tra virgolette è stato facoltativo dall'arrivo di HTML5, qualcosa che in realtà pochi fanno. Tutto ciò consente di dichiarare il codice sottostante valido secondo lo standard HTML5:
/ ** HTML valido in HTML ** /Il contenuto precede il design. Il design in assenza di contenuti non è design, è decorazione.
Nei CSS, alcuni preferiscono usare spazio al di sopra di linguetta-o viceversa, per indentazione. Le proprietà all'interno delle regole di stile possono essere disposte in qualsiasi ordine. La presenza di duplicati nel tuo CSS è perfettamente soddisfacente (il più delle volte), e nel caso dei pre-processori CSS l'annidamento eccessivo delle regole di stile è perfettamente fattibile.
.site .header & .logo .navigation .menu .menu-link &: hover
Allo stesso modo, una variabile JavaScript può essere espressa con lettere maiuscole o minuscole, una variabile a singola lettera è accettabile e anche l'omissione di parentesi graffe attorno a blocchi condizionali o di loop è possibile.
if (n < 3) doFunction(); while(!n < 3) n++;
Il modo in cui scriviamo il codice in realtà non importa molto in termini di esecuzione. Ma quando si lavora a un progetto con molte persone che contribuiscono al codice base, scoprirai presto che il codice base diventa un disastro se ogni contributore segue le proprie preferenze. Su un progetto su larga scala, può causare complicati bug, il codice può diventare meno gestibile e sarebbe un vero dolore per chiunque erediti e mantenga il progetto in futuro.
In breve, è incoraggiato ad adottare uno "standard di codifica".
Gli "Standard di codifica" sono qualsiasi insieme di regole concordate da coloro che sono coinvolti, quando contribuiscono al codice base del progetto. Spianano lo standard per syntaxing per mantenere la coerenza e la chiarezza del codice, il formattazione per la leggibilità, l'uso del comune migliori pratiche della lingua; spesso con qualche aggiunta di regole proprietarie uniche per il progetto.
Harry Roberts, nelle sue linee guida CSS:
"Lavorando su progetti grandi e di lunga data, con dozzine di sviluppatori di specialità e abilità diverse, è importante lavorare tutti in modo unificato per, tra le altre cose, mantenere i fogli di stile mantenibili; mantenere il codice trasparente, sano e leggibile, mantenere scalabili i fogli di stile ";
Douglas Crockford, che ha reso popolare JSON nel suo "Convenzioni sul codice per il linguaggio di programmazione JavaScript", ha dichiarato:
"Il valore a lungo termine del software per un'organizzazione è direttamente proporzionale alla qualità della base di codice. Nel corso della sua vita, un programma sarà gestito da molte coppie di mani e occhi. Se un programma è in grado di comunicare chiaramente la sua struttura e le sue caratteristiche, è meno probabile che si romperà una volta modificato in un futuro non troppo lontano. Le convenzioni sul codice possono aiutare a ridurre la fragilità dei programmi.
Tutto il nostro codice JavaScript viene inviato direttamente al pubblico. Dovrebbe sempre essere di qualità di pubblicazione. La pulizia conta. "
La risposta breve è "non necessariamente", soprattutto considerando che ci sono già dozzine di guide di stile comunemente utilizzate in natura, ad esempio:
Queste guide di stile sono ben scritte, approfondite e abbastanza autoesplicative in termini di ragionamento alla base di ogni regola che impattano. Quindi, piuttosto che comporre la nostra guida di stile, potrebbe essere più saggio adottare e adattare modelli esistenti per adattarlo subito al nostro progetto.
La vera domanda ora è come mantenere tutti seguendo gli standard che scegliamo?
Fortunatamente, ci sono un paio di risorse che possiamo appoggiare durante il processo di sviluppo che aiuterà a preservare gli standard all'interno del team. In questo tutorial, esamineremo come distribuire e utilizzare alcuni di questi strumenti.
EditorConfig è un file di punti che registra alcune regole di formattazione di base come il rientro, lo spazio bianco e l'interruzione di nuove linee. Funziona universalmente con qualsiasi tipo di linguaggio ed è già integrato in quasi tutti gli editor di codice e IDE come Visual Studio, Sublime Text, Vim e TextMate tramite plugin.
Supponendo che stai usando Sublime Text, il modo più semplice per installare il plugin è attraverso il PackageManager.
Accentsconagua
.editorconfig nella directory principale del progetto che applicherà le configurazioni specificate attraverso tutti i file inclusi quelli all'interno delle sottodirectory.root = true [*] charset = utf-8 indent_style = scheda indent_size = 4 insert_final_newline = true
Concessa la configurazione dal nostro esempio, troveremo il nostro codice rientrato con scheda e aggiungere una nuova riga alla fine del file mentre lo salvi.
La configurazione interesserà tutti i file esistenti in cui potresti aver utilizzato in precedenza il rientro dello spazio.
Fare riferimento a Proprietà supportate per le proprietà applicabili a .editorconfig file e i pattern Wildcard di EditorConfig per applicare le proprietà per specifici file o directory. Puoi anche trovare il plugin del tuo editor o IDE preferito nella sezione Download.
Secondo la linea guida CodeGuide, le proprietà di stile dovrebbero essere raggruppate in base al seguente ordine consecutivo.
posizione, superiore, sinistra, eccetera.larghezza, altezza, display, eccetera.font, altezza della linea, eccetera.sfondo, confine, border-radius, eccetera.Per esempio:
.contenuto del corpo posizione: assoluta; inizio: 0; a sinistra: 0; imbottitura: 10px 12px; display: nessuno; font-size: .8em; font-weight: bold; altezza della linea: 26px; colore: #fff;
Se si adotta una linea guida con una regola simile, in cui le proprietà sono raggruppate in quel determinato ordine, CSSComb sarà davvero utile. Non solo ti permette di fare esattamente questo, ma conserva anche diverse convenzioni di stile come la spaziatura, l'uso di virgolette, parentesi graffe, due punti, punto e virgola, zero iniziale per il valore di lunghezza, e funziona bene con la sintassi CSS Pre-processore.
npm installa csscomb -g .csscomb.json nella directory principale del progetto o all'interno della directory in cui sono memorizzati i file CSS..csscomb.json. Controlla l'elenco completo delle opzioni applicabili. Per semplificare, puoi generare il file di configurazione tramite la webapp di Config Builder, o usare una qualsiasi delle configurazioni preimpostate che possono essere trovate nel repository.Utilizzare il csscomb comando, in questo modo:
risorse csscomb / css / style.css
Se preferisci, puoi eseguire CSSComb durante il processo di compilazione con il plugin Gulp o Grunt. In alternativa, puoi usare un plugin nel tuo editor di codice come Sublime Text ed eseguirlo attraverso il Tavolozza dei comandi. C'è anche un plugin disponibile per Brackets e Atom.
StyleLint è uno strumento che esamina i nostri CSS contro più di un centinaio di regole predefinite, producendo avvertimenti in caso di violazioni. Alcune di queste violazioni sono facili da risolvere con CSSComb, rendendo questi strumenti fantastici da usare mano nella mano. CSSLint è anche uno strumento perfetto per eseguire una revisione del codice.
npm install stylelint -g .stylelintrc file nella directory principale del tuo progetto..stylelintrc file, ad esempio:"rules": "color-hex-case": "lower", "color-hex-length": "short", "comment-empty-line-before": "always", "selector-no-combinator ": true," selector-no-id ": true," string-quotes ":" double "," selector-no-type ": true," selector-no-universal ": true," selector-no-vendor -prefix ": true
Un elenco completo delle regole Stylint applicabili è disponibile nella pagina Regole.
Usa Stylelint tramite la riga di comando (es .: stylelint "css / *. css"), PostCSS con il plug-in o installa un plug-in che ti consentirà di visualizzare gli avvisi direttamente all'interno del tuo editor di codice. Il plugin è attualmente disponibile per Sublime Text, Atom e Visual Studio.
Come suggerisce il nome, JSCS valuta i tuoi stili di codice JavaScript; dall'uso di spazi bianchi, funzioni e convenzioni di denominazione variabili, blocchi di commenti, interruzioni di riga e molto altro ancora. JSCS è stato ampiamente utilizzato in progetti open-source come jQuery, Bootstrap ed Ember.js e anche da aziende note come Yandex e Adobe. Testamento in effetti; probabilmente dovresti usarlo anche nel tuo progetto!
npm installa jscs -g..jscsrc."Jquery", "Airbnb", "Google", "Yandex", e "Wordpress"."preset": "wordpress", "requireCurlyBraces": true
Supponendo che il tuo file JavaScript sia archiviato js / app.js, eseguire il comando: jscs js / app.js.
Per correggere gli stili di codice, esegui jscs / app.js --fix. In Sublime Text puoi installare JSCS Formatter per farlo senza lasciare l'editor di codice. Un plug-in simile chiamato JSCS Fixer è disponibile anche per Atom.
Un altro strumento che uso quotidianamente per controllare il mio JavaScript è JSHint. A differenza di JSCS, le valutazioni di JSHint ruotano attorno alla validità del codice, anziché semplicemente sullo stile del codice. Inoltre, JSHint rimuoverà anche stilistico regole nella prossima versione, dal momento che JSCS sta crescendo in trazione e svolge bene il suo compito su quella specifica questione. Poiché tale JSHint controllerà solo l'uso di variabili, cicli, operatori di confronto, ambiti, livello di annidamento e elementi simili di altri elementi tecnici JavaScript che potrebbero causare problemi o bug.
npm installa jshint -g .jshintrc nella directory principale del tuo progetto..jshintrc, per esempio:"boss": true, "eqeqeq": true, "eqnull": true, "expr": true, "immed": true, "noarg": true, "undef": true, "inutilizzato": true, " nodo ": vero
Utilizzare il jshint riga di comando. Supponendo che tu abbia tutti i tuoi file JavaScript memorizzati in una directory chiamata js, correre jshint js.
In alternativa, usa JSHint con il plugin Gulp o Grunt. Gli utenti di Testo Sublime o Atom possono installare interfaccia linter per SublimeText, Atom, che consente di vedere il report degli errori direttamente nell'editor di codice.
Mancia: CodePen controllerà anche il tuo JavaScript per errori usando JSHint; trova questa opzione nel pannello Impostazioni JavaScript:
Se impostare tutti questi strumenti sul tuo progetto potrebbe sembrare noioso, usa Yeoman per metterli insieme come impalcatura. Ogni volta che tu o il tuo team state per iniziare un nuovo progetto, dovrete solo premere un comando a riga singola per prepararli in un paio di secondi. Per maggiori dettagli, segui il corso Envato Tuts + su come creare un generatore Yeoman personalizzato.
Infine, avere questi strumenti non solo ci aiuterà a produrre codice migliore e minimizzerà gli errori nel nostro codice, ma ci istruirà ad essere sviluppatori web migliori. All'inizio, potresti scoprire che il tuo codice ha molti errori. Ma presto inizierai a scrivere codice con meno errori, mentre inizi ad abituarti alle regole.
