Share
Există numeroase resurse pe care le putem baza pe parcursul codării, care vor ajuta la păstrarea standardelor în cadrul echipei. În acest tutorial, vom examina cum să implementăm și să folosim cinci dintre aceste instrumente.
HTML, CSS și JavaScript sunt deosebit de ușor de făcut în cazul în care problema de a scrie convenții este îngrijorat. Atâta timp cât anumite notații respectă regulile lingvistice, citatele, parantezele, coloanele, semi-colonii și așa mai departe sunt toate în locul potrivit, codul va funcționa. Cu toate acestea, indentarea, spațierea, ruperea liniei, ordinea de declarație a proprietăților, funcțiilor și variabilelor, inclusiv a cuvântului lor, sunt în întregime adresate autorilor.
Elementele HTML, de exemplu, nu sunt de fapt sensibile la litere mici. Le putem scrie în litere mici sau majuscule; ceea ce a fost o practică comună în anii '90. În plus, valorile atributului de ambalaj în citate au fost opționale de la sosirea HTML5, ceea ce face de fapt puțini oameni. Toate acestea permit declararea codului de mai jos valabil conform standardului HTML5:
/ ** Valid HTML în HTML ** /Conținutul precede designul. Designul în absența conținutului nu este design, este decorarea.
În CSS, unii preferă utilizarea spaţiu peste fila-sau invers - pentru indentare. Proprietățile din cadrul regulilor de stil pot fi aranjate în orice ordine. Prezența duplicatelor în CSS este perfectă (de cele mai multe ori), iar în cazul Pre-procesoarelor CSS este imposibilă realizarea unor reguli de modelare excesive.
.site-ul .header & .logo .navigație .menu .menu-link &: hover
De asemenea, o variabilă JavaScript poate fi exprimată cu majuscule sau cu majuscule, o variabilă de o singură literă este acceptabilă și omiterea unor bretele în jurul blocurilor condiționale sau bucla este, de asemenea, fezabilă.
if (n < 3) doFunction(); while(!n < 3) n++;
Modul în care scriem codul nu contează prea mult în ceea ce privește execuția. Dar când lucrați la un proiect cu mulți oameni care contribuie la cod de bază, veți găsi curând baza de cod a deveni un dezastru dacă fiecare contribuitor își urmărește propria preferință. Pe un proiect la scară largă, poate provoca erori complicate, codul poate deveni mai puțin gestionabil și ar fi o adevărată durere pentru oricine care moștenește și menține proiectul în viitor.
Pe scurt, este încurajat să adopte un "Cod de Standardizare".
"Standardele de codificare" reprezintă orice set de reguli care sunt convenite de cei implicați, atunci când contribuie la baza de cod a proiectului. Ei deschid standardul syntaxing pentru a menține coerența și claritatea codului, formatarea pentru lizibilitate, folosirea comună cele mai bune practici a limbii; adesea cu unele adăugări de reguli de proprietate unice pentru proiect.
Harry Roberts, în Ghidul CSS:
"Lucrând pe proiecte mari, de lungă durată, cu zeci de dezvoltatori de specialități și abilități diferite, este important să lucrăm cu toții într-un mod unificat pentru a menține, între altele, stilurile menținute; pastrati codul transparent, sanatos si lizibil, pastrati foile de stil scalabile;
Douglas Crockford, care a popularizat JSON în "Convențiile de cod pentru limbajul de programare JavaScript", a declarat:
"Valoarea pe termen lung a software-ului unei organizații este direct proporțională cu calitatea bazei de cod. În timpul vieții sale, un program va fi gestionat de multe perechi de mâini și ochi. Dacă un program este capabil să-și comunice în mod clar structura și caracteristicile, este mai puțin probabil ca acesta să se rupă atunci când este modificat în viitorul niciodată prea îndepărtat. Contractele de cod pot ajuta la reducerea fragilității programelor.
Tot codul nostru JavaScript este trimis direct publicului. Ar trebui să fie întotdeauna de calitate a publicației. Nevoia contează. "
Răspunsul scurt este "nu neapărat", mai ales având în vedere că există deja zeci de ghiduri de stil utilizate în mod natural în sălbăticie, De exemplu:
Aceste ghiduri de stil sunt bine scrise, în profunzime și destul de auto-explicative în ceea ce privește raționamentul din spatele fiecărei reguli pe care o au impactul. Deci, mai degrabă decât să ne compunem propriul ghid de stil, ar putea fi mai înțelept adopta și adapta modelele existente pentru a se potrivi imediat în proiectul nostru.
Întrebarea adevărată este acum cum ne păstrăm pe toți conform standardelor pe care le alegem?
Din fericire, există câteva resurse pe care le putem baza pe parcursul procesului de dezvoltare, care va ajuta la păstrarea standardelor în întreaga echipă. În acest tutorial, vom examina cum să implementăm și să folosim unele dintre aceste instrumente.
EditorConfig este un fișier dot care înregistrează câteva reguli de bază de formatare, cum ar fi indentarea, spațiul alb și ruperea liniilor noi. Funcționează universal pentru orice tip de limbă și este deja integrat în aproape toate editoarele de cod și IDE-uri precum Visual Studio, Sublime Text, Vim și TextMate prin pluginuri.
Presupunând că utilizați text subțire, cel mai simplu mod de a instala pluginul este prin PackageManager.
Accentsconagua
.editorconfig în directorul rădăcină al proiectului care va aplica configurațiile specificate prin toate fișierele, inclusiv cele din subdirectoarele.root = adevărat [*] charset = utf-8 indent_style = file indent_size = 4 insert_final_newline = true
Acordat configurația din exemplul nostru, vom găsi codul nostru indentat cu fila și vom adăuga o nouă linie la sfârșitul fișierului pe măsură ce îl salvați.
Configurația va afecta toate fișierele existente în care ați utilizat anterior indentarea spațiului.
Consultați Proprietăți acceptate pentru proprietăți aplicabile la .editorconfig fișierul și modelele editorului WildConfig pentru a aplica proprietățile pentru anumite fișiere sau directoare. De asemenea, puteți găsi lista pluginului editorului sau IDE preferat în secțiunea Descărcare.
Conform ghidului CodeGuide, proprietățile de stil trebuie grupate în conformitate cu următoarea ordine consecutivă.
poziţie, top, stânga, etc.lăţime, înălţime, afişa, etc.font, inaltimea liniei, etc.fundal, frontieră, border-radius, etc.De exemplu:
.conținutul corpului poziție: absolută; top: 0; stânga: 0; padding: 10px 12px; afișare: niciunul; font-size: .8em; font-weight: bold; line-height: 26px; culoare: #fff;
Dacă adoptați o orientare cu o regulă similară, în care proprietățile sunt grupate în acea ordine, CSSComb va fi cu adevărat util. Nu numai că vă permite să faceți exact acest lucru, dar, de asemenea, păstrează mai multe convenții de stil, cum ar fi spațierea, utilizarea de citate, legături, colon, semi-colon, conducând la zero pentru valoarea lungimii și funcționează bine cu sintaxa pre-procesor CSS.
npm instalează csscomb -g .csscomb.json în directorul rădăcină al proiectului sau în directorul în care sunt stocate fișierele CSS..csscomb.json. Verificați lista completă a opțiunilor aplicabile. Pentru a face mai ușoară, puteți genera fișierul config prin webapp Config Builder sau utilizați oricare dintre configurațiile presetate care pot fi găsite în depozit.Folosește csscomb comandă, cum ar fi:
csscomb active / css / style.css
Dacă preferați, puteți rula CSSComb în timpul procesului de construire cu pluginul Gulp sau Grunt. Alternativ, puteți utiliza un plugin în editorul de coduri ca textul sublim și îl puteți rula prin Comandă Paletă. Există, de asemenea, un plugin disponibil pentru brackets și Atom.
StyleLint este un instrument care examinează CSS împotriva mai mult de o sută de reguli predefinite, producând avertismente în caz de încălcări. Unele dintre aceste încălcări sunt ușor de rezolvat cu CSSComb, făcând aceste instrumente excelente pentru a le utiliza mână în mână. CSSLint este, de asemenea, un instrument perfect pentru a efectua o revizuire a codului.
npm instalează stillint -g .stylelintrc fișier în directorul rădăcină al proiectului dvs...stylelintrc fișier, de exemplu:"reguli": "culoare hexazecurată": "inferior", "culoare hexagonală": "scurtă", " ": adevărat," selector-no-id ": true," citate de șir ":" dublu "," selector-no-type ": true, selector-no-seller -prefix ": true
O listă completă a regulilor de stil Stylint poate fi găsită în pagina Reguli.
Utilizați Stylelint prin linia de comandă (de exemplu: stillint "css / * .css"), PostCSS cu pluginul sau să instalați un plugin care vă va permite să vedeți avertismentele direct în editorul de cod. Pluginul este disponibil în prezent pentru Sublime Text, Atom și Visual Studio.
După cum sugerează și numele, JSCS evaluează stilurile de cod JavaScript; de la utilizarea spațiilor libere, funcții și convenții de numire variabile, blocuri de comentarii, pauze de linie și multe altele. JSCS a fost utilizat pe scară largă în proiecte populare cu open source, cum ar fi jQuery, Bootstrap și Ember.js, precum și de companii notabile precum Yandex și Adobe. Testarea într-adevăr; probabil că ar trebui să-l utilizați și în proiectul dvs.!
npm instalează jscs -g..jscsrc."Jquery", "Airbnb", "Google", "" Yandex, și "WordPress"."presetare": "wordpress", "requCurlyBraces": true
Presupunând că fișierul dvs. JavaScript este stocat în js / app.js, executați comanda: jscs js / app.js.
Pentru a corecta stilurile de cod, executați jscs js / app.js --fix. În Sublime Text puteți instala JSCS Formatter pentru a face acest lucru fără a lăsa editorul de cod. Un plugin similar numit JSCS Fixer este de asemenea disponibil pentru Atom.
Un alt instrument pe care îl folosesc zilnic pentru a-mi verifica JavaScript-ul este JSHint. Spre deosebire de JSCS, evaluările JSHint se referă la valabilitatea codului, în loc de simpla codare a codului. În plus, JSHint va elimina, de asemenea stilistic regulile din următoarea versiune, de vreme ce JSCS a înregistrat o creștere a tracțiunii și o face bine în această chestiune specifică. În acest fel, JSHint va verifica doar utilizarea variabilelor, buclele, operatorii de comparare, domeniile, nivelul de cuibărire și altele asemănătoare chestiunilor tehnice JavaScript care ar putea cauza probleme sau erori.
npm instalează jshint -g .jshintrc în directorul rădăcină al proiectului dvs...jshintrc, de exemplu:"șeful": adevărat, "eqeqeq": adevărat, "eqnull": true, "expr": true, "immed": true, noarg true, undef true, nod ": true
Folosește jshint Linie de comanda. Presupunând că aveți toate fișierele JavaScript stocate într-un director numit js, alerga jshint js.
Alternativ, utilizați JSHint cu pluginul Gulp sau Grunt. Sublime Text sau Atom utilizatorii pot instala linter interfață pentru SublimeText, Atom, permițându-vă să vedeți raportul de eroare direct în editorul de coduri.
Bacsis: CodePen va verifica, de asemenea, JavaScript-ul pentru erori folosind JSHint; găsiți această opțiune în panoul Setări JavaScript:
Dacă setați toate aceste instrumente pe proiectul dvs. poate părea obositoare, utilizați Yeoman pentru a le pune împreună ca schelă. Ori de câte ori dvs. sau echipa dvs. sunteți pe punctul de a începe un nou proiect, va trebui să atingeți o singură comandă pentru a le pregăti în câteva secunde. Pentru mai multe detalii, urmați cursul Envato Tuts + cu privire la modul de creare a unui Generator Yeoman Custom.
În cele din urmă, utilizarea acestor instrumente nu numai că ne va ajuta să producem coduri mai bune și să minimalizăm erorile din codul nostru, dar ne vor pregăti pentru a fi dezvoltatori web mai buni. La început, ați putea găsi codul dvs. are o mulțime de erori. Dar, veți scrie în curând un cod cu mai puține erori, pe măsură ce începeți să vă obișnuiți cu regulile.
