Share
Det finns många resurser vi kan luta oss på under kodning som kommer att bidra till att bevara standarder över hela laget. I denna handledning kommer vi att undersöka hur man distribuerar och använder fem av dessa verktyg.
HTML, CSS och JavaScript är särskilt lätta att skriva på konventioner är bekymrad. Så länge som vissa noteringar följer språkreglerna, att citaten, parenteserna, kolonerna, halvkolonerna och så vidare är på rätt plats, kommer koden att fungera. Indragning, avstånd, linjebrytning, deklarationsordning av egenskaper, funktioner och variabler, inklusive deras ordförslutning är helt upp till författarna.
HTML-element, till exempel, är inte faktiskt skiftlägeskänslig. Vi kan skriva dem små bokstäver eller versaler; vad var en vanlig praxis tillbaka på 90-talet. Dessutom har inpakningsattributvärden i citat valts sedan ankomsten av HTML5, något få människor faktiskt gör. Allt detta tillåter koden nedan att deklareras giltig per HTML5-standarden:
/ ** Valid HTML i HTML ** /Innehållet föregår design. Design i frånvaro av innehåll är inte design, det är dekoration.
I CSS föredrar vissa att använda rymden över flik-eller vice versa-för indragning. Egenskaper inom stilregler kan ordnas i vilken ordning som helst. Närvaron av dubbletter i din CSS är helt bra (oftast), och i fallet med CSS Pre-processorer är överdriven nestning av stilregler helt genomförbara.
.webbplats .header & .logo .navigation .menu .menu-link &: hover
På samma sätt kan en JavaScript-variabel uttryckas med stor bokstav eller små bokstäver, en bokstavsvariabel är acceptabel, och om man lämnar fäste runt villkorliga eller loop-block kan man också arbeta.
if (n < 3) doFunction(); while(!n < 3) n++;
Det sätt på vilket vi skriver kod betyder faktiskt inte så mycket när det gäller utförandet. Men när man arbetar på ett projekt med många som bidrar till kodbas, du kommer snart att hitta kodbasen bli en röra om varje bidragsgivare följer sin egen preferens. I ett storskaligt projekt kan det orsaka komplicerade fel, kod kan bli mindre hanterbar och skulle vara en verklig smärta för alla som ärver och underhåller projektet i framtiden.
Kort sagt uppmanas det att anta en "kodningsstandard".
"Kodningsstandarder" är en uppsättning regler som överenskommits av de berörda, när de bidrar till projektkodbasen. De bana standarden för syntaxing för att upprätthålla konsistens och klarhet i koden, formatering för läsbarhet, användningen av vanliga bästa praxis av språket; ofta med några tillägg av proprietära regler som är unika för projektet.
Harry Roberts, i sina CSS riktlinjer:
"Att arbeta på stora, långvariga projekt, med dussintals utvecklare av olika specialiteter och förmågor, är det viktigt att vi alla arbetar på ett enhetligt sätt för att bland annat kunna hålla stilarark underhållbara. behåll koden genomskinlig, sane och läsbar, håll stilplattorna skalbara; "
Douglas Crockford, som populariserade JSON i sin "Code Conventions for JavaScript Programming Language" uppgav:
"Det långsiktiga värdet av programvara till en organisation ligger i direkt proportion till kodbasens kvalitet. Under sin livstid kommer ett program att hanteras av många par händer och ögon. Om ett program kan tydligt kommunicera sin struktur och egenskaper är det mindre troligt att det kommer att brytas när det ändras i den alltför avlägsna framtiden. Kodkonventioner kan hjälpa till att minska brittleness av program.
All vår JavaScript-kod skickas direkt till allmänheten. Det ska alltid vara av publikationskvalitet. Snygghet räknas. "
Det korta svaret är "inte nödvändigtvis", särskilt med tanke på att det redan finns dussintals vanliga stilguider i det vilda, till exempel:
Dessa stilguider är välskrivna, djupgående och ganska självklarande när det gäller resonemanget bakom varje regel som de påverkar. Så, i stället för att komponera vår egen stilguide kan det vara klokt att anta och anpassa befintliga mönster för att passa in i vårt projekt direkt.
Den verkliga frågan nu är hur vi håller alla som följer de normer vi väljer?
Lyckligtvis finns det ett par resurser vi kan luta oss på under utvecklingsprocessen som kommer att bidra till att bevara normerna över laget. I denna handledning ska vi undersöka hur man använder och använder några av dessa verktyg.
EditorConfig är en punktfil som registrerar några grundläggande formateringsregler som inryckning, blankutrymme och nya linjer som bryts. Det fungerar universellt för alla typer av språk och är redan integrerad i nästan alla kodredigerare och IDEs som Visual Studio, Sublime Text, Vim och TextMate via plugins.
Om du antar att du använder Sublim Text, är det enklaste sättet att installera pluginet genom Package.
Accentsconagua
.editorconfig i rotkatalogen av projektet som ska tillämpa de angivna konfigurationerna genom alla filer inklusive de i underkatalogerna.root = true [*] charset = utf-8 indent_style = flik indent_size = 4 insert_final_newline = true
Beviljades konfigurationen från vårt exempel, vi hittar vår kod indragad med fliken och lägger till en ny rad i slutet av filen när du sparar den.
Konfigurationen kommer att påverka alla befintliga filer där du tidigare har använt utrymmeinmatning.
Se Supportade egenskaper för aktuella egenskaper till .editorconfig fil och EditorConfig Wildcard Patterns att tillämpa egenskaperna för specifika filer eller kataloger. Du kan också hitta listan plugin för din föredragna redaktör eller IDEs i Download-sektionen.
Enligt CodeGuide-riktlinjen ska stilegenskaper grupperas enligt följande på varandra följande order.
placera, topp, vänster, etc.bredd, höjd, visa, etc.font, radavstånd, etc.bakgrund, gräns, border-radius, etc.Till exempel:
.kroppsinnehåll position: absolut; topp: 0; vänster: 0; vaddering: 10px 12px; display: none; typsnittstorlek: .8em; font-weight: bold; linjehöjd: 26px; färg: #fff;
Om du antar en riktlinje med en liknande regel, där egenskaper är grupperade i den bestämda ordningen, kommer CSSComb verkligen att vara till nytta. Det gör det inte bara möjligt att göra exakt detta, men dessutom behåller flera stilkonventioner som mellanrum, användningen av citat, axlar, kolon, halvkolon, ledande noll för längdvärde och det fungerar fint med CSS Synprox för processorns processor.
npm installera csscomb -g .csscomb.json i projektets rotkatalog eller i katalogen där CSS-filerna är lagrade..csscomb.json. Kontrollera mot den fullständiga listan över tillämpliga alternativ. För att underlätta, kan du generera konfigurationsfilen via webbläsaren Config Builder, eller använd någon av de förinställda konfigurationerna som finns i förvaret.Använd csscomb kommando, som så:
csscomb tillgångar / css / style.css
Om du föredrar kan du köra CSSComb under byggprocessen med pluggen Gulp eller Grunt. Alternativt kan du använda ett plugin i kodredigeraren som Sublime Text och köra den genom Command Palette. Det finns också ett plugin tillgängligt för fästen och Atom.
StyleLint är ett verktyg som granskar vår CSS mot mer än hundra fördefinierade regler och producerar varningar vid överträdelser. Några av dessa överträdelser är lätta att fixa med CSSComb, vilket gör att verktygen är bra att använda hand i hand. CSSLint är också ett perfekt verktyg för att utföra en kodgranskning.
npm installera stylelint -g .stylelintrc filen i rotkatalogen av ditt projekt..stylelintrc fil, till exempel:"rules": "color-hex-case": "lower", "color hex hex": "short", "comment-empty-line-before" ": true," selector-no-id ": true," string-quotes ":" double "," selector-no-type ": true," selector-no-universal ": true," selector-no-vendor -prefix ": true
En fullständig lista över tillämpliga Stylint-regler finns på Regelsidan.
Använd Stylelint genom kommandoraden (t.ex. stylin "css / *. css"), PostCSS med plugin, eller installera ett plugin som låter dig se varningarna direkt i kodredigeraren. Pluggen är för närvarande tillgänglig för Sublime Text, Atom och Visual Studio.
Som namnet antyder, utvärderar JSCS dina JavaScript-kodstilar; från användningen av blanksteg, funktioner och variabla namngivningskonventioner, kommandoblock, radbrytningar och mycket mer. JSCS har använts i stor utsträckning i populära open source-projekt som jQuery, Bootstrap och Ember.js, och även av noterbara företag som Yandex och Adobe. Testamentet faktiskt; du borde nog använda det i ditt projekt också!
npm installera jscs -g..jscsrc."Jquery", "airbnb", "Google", "Yandex", och "Wordpress"."förinställd": "wordpress", "requireCurlyBraces": true
Om du antar att din JavaScript-fil är lagrad i js / app.js, kör kommandot: jscs js / app.js.
För att fixa kodstilarna kör du jscs js / app.js --fix. I Sublim Text kan du installera JSCS Formatter för att göra det utan att lämna kodredigeraren. Ett liknande plugin som heter JSCS Fixer är också tillgängligt för Atom.
Ett annat verktyg som jag använder dagligen för att kontrollera min JavaScript är JSHint. Till skillnad från JSCS kretsar JSHint-utvärderingar kring kodgiltighet, i stället för bara kodstyling. Dessutom kommer JSHint också ta bort stilistisk regler i nästa utgåva, eftersom JSCS har ökat dragkraft och gör jobbet bra på den specifika frågan. Som sådan kontrollerar JSHint endast användningen av variabler, loopar, jämförelsesoperatörer, scopes, nestningsnivå och liknande andra tekniska JavaScript-saker som eventuellt orsakar problem eller fel.
npm installera jshint -g .jshintrc i rotkatalogen av ditt projekt..jshintrc, till exempel:true "true": true, "nog": true, "undef": true, "outnyttjad": true, "true", "eqnqeq" nod ": true
Använd jshint kommandorad. Förutsatt att du har alla dina JavaScript-filer lagrade i en katalog som heter js, springa jshint js.
Alternativt, använd JSHint med pluggen Gulp eller Grunt. Sublim Text eller Atom-användare kan installera lintergränssnitt för SublimeText, Atom, så att du kan se felrapporten direkt i kodredigeraren.
Tips: CodePen kommer också att kontrollera din JavaScript för fel med JSHint; hitta det här alternativet på panelen JavaScript Inställningar:
Om du ställer in alla dessa verktyg på ditt projekt kan det vara tråkigt, använd Yeoman för att lägga dem ihop som ett byggnadsställ. När du eller ditt team håller på att starta ett nytt projekt behöver du bara slå ett kommando för en rad för att få dem redo om några sekunder. För mer information följ Envato Tuts + kursen om hur man skapar en anpassad Yeoman Generator.
Med hjälp av dessa verktyg kan vi inte bara hjälpa oss att producera bättre kod och minimera fel i vår kod, men de kommer att träna oss för att vara bättre webbutvecklare. Först kan du hitta din kod har många fel. Men du kommer snart att skriva kod med färre fel, eftersom du börjar bli van vid reglerna.
