Share
Es gibt zahlreiche Ressourcen, auf die wir uns beim Kodieren stützen können, um die Standards im gesamten Team zu erhalten. In diesem Lernprogramm werden wir untersuchen, wie fünf dieser Tools bereitgestellt und verwendet werden.
HTML, CSS und JavaScript sind besonders einfach, wenn es ums Schreiben geht Konventionen ist besorgt. Solange bestimmte Notationen den Sprachregeln folgen, dass Anführungszeichen, Klammern, Doppelpunkte, Semikolons usw. an der richtigen Stelle sind, funktioniert der Code. Die Einrückung, der Abstand, der Zeilenumbruch und die Deklarationsreihenfolge von Eigenschaften, Funktionen und Variablen, einschließlich der Wortgruppe, liegen jedoch vollständig bei den Autoren.
Bei HTML-Elementen wird beispielsweise die Groß- und Kleinschreibung nicht berücksichtigt. Wir können sie in Klein- oder Großbuchstaben schreiben. Was war in den 90er Jahren üblich? Außerdem ist das Umschließen von Attributwerten in Anführungszeichen seit der Einführung von HTML5 optional, was nur wenige tun. All dies ermöglicht die Deklaration des nachfolgenden Codes gültig gemäß dem HTML5-Standard:
/ ** Gültiges HTML in HTML ** /Der Inhalt steht vor dem Design. Design ohne Inhalt ist nicht Design, sondern Dekoration.
In CSS bevorzugen einige die Verwendung Platz Über Tab-oder umgekehrt - für die Einrückung. Eigenschaften innerhalb von Stilregeln können in beliebiger Reihenfolge angeordnet werden. Das Vorhandensein von Duplikaten in Ihrem CSS ist (meistens) vollkommen in Ordnung, und im Fall von CSS-Vorprozessoren ist eine übermäßige Verschachtelung von Stilregeln durchaus machbar.
.site .header & .logo .navigation .menu .menu-link &: hover
Ebenso kann eine JavaScript-Variable mit Groß- oder Kleinbuchstaben ausgedrückt werden, eine Variable mit einem Buchstaben ist zulässig und das Weglassen von Klammern um bedingte Blöcke oder Schleifenblöcke kann ebenfalls verwendet werden.
wenn (n < 3) doFunction(); while(!n < 3) n++;
Die Art und Weise, wie wir Code schreiben, spielt für die Ausführung eigentlich keine so große Rolle. Aber wenn man an einem Projekt arbeitet, an dem viele Menschen mitwirken Code-Basis, Sie werden bald feststellen, dass die Code-Basis zum Chaos wird, wenn jeder Mitwirkende seinen eigenen Vorlieben folgt. Bei einem groß angelegten Projekt kann dies zu komplizierten Fehlern führen, der Code wird weniger handhabbar und wäre für jeden, der das Projekt in der Zukunft erbt und verwaltet, ein echtes Problem.
Kurz gesagt, es wird empfohlen, einen "Coding Standard" einzuführen..
„Codierungsstandards“ sind alle Regeln, die von den Beteiligten vereinbart werden, wenn sie zur Projektcode-Basis beitragen. Sie ebnen den Standard für Syntaxing Um die Konsistenz und Klarheit des Codes zu gewährleisten, muss der Formatierung für die Lesbarkeit die Verwendung von gemeinsamen Best Practices der Sprache; oft mit einigen zusätzlichen proprietären Regeln, die für das Projekt spezifisch sind.
Harry Roberts in seinen CSS-Richtlinien:
„Bei der Arbeit an großen, lang laufenden Projekten mit Dutzenden von Entwicklern mit unterschiedlichen Besonderheiten und Fähigkeiten ist es wichtig, dass wir alle in einer einheitlichen Weise arbeiten, um Stylesheets unter anderem wartbar zu halten. halten Sie Code transparent, verständlich und lesbar, halten Sie Stylesheets skalierbar; “
Douglas Crockford, der JSON in seinen "Code Conventions for the JavaScript Programming Language" bekannt machte, erklärte:
„Der langfristige Wert von Software für ein Unternehmen steht in direktem Verhältnis zur Qualität der Codebasis. Ein Programm wird während seiner gesamten Lebensdauer von vielen Händen und Augen gehalten. Wenn ein Programm seine Struktur und seine Eigenschaften klar kommunizieren kann, ist es weniger wahrscheinlich, dass es bei Änderungen in nie zu ferner Zukunft brechen wird. Code-Konventionen können helfen, die Sprödigkeit von Programmen zu reduzieren.
Der gesamte JavaScript-Code wird direkt an die Öffentlichkeit gesendet. Es sollte immer Publikationsqualität sein. Ordentlichkeit zählt. "
Die kurze Antwort lautet "nicht unbedingt", vor allem wenn man bedenkt, dass es in der Wildnis bereits Dutzende gängiger Styleguides gibt. Zum Beispiel:
Diese Style-Guides sind gut geschrieben, gründlich und in Bezug auf die jeweiligen Regeln, die sie beeinflussen, selbsterklärend. Anstatt unseren eigenen Style Guide zu erstellen, ist es vielleicht klüger übernehmen und anpassen vorhandene Muster, um es sofort in unser Projekt zu integrieren.
Die eigentliche Frage ist nun, wie halten wir die Einhaltung der von uns gewählten Standards aufrecht?
Glücklicherweise gibt es einige Ressourcen, auf die wir uns während des Entwicklungsprozesses stützen können, um die Standards im gesamten Team zu erhalten. In diesem Lernprogramm werden wir untersuchen, wie einige dieser Tools bereitgestellt und verwendet werden.
EditorConfig ist eine Punktdatei, die einige grundlegende Formatierungsregeln wie Einrückung, Leerzeichen und neue Zeilenumbrüche registriert. Es funktioniert universell für jede Art von Sprache und ist bereits in fast alle Code-Editoren und IDEs wie Visual Studio, Sublime Text, Vim und TextMate über Plugins integriert.
Wenn Sie Sublime Text verwenden, können Sie das Plugin am einfachsten über das Plugin installieren Paket-Manager.
Accentsconagua
.editorconfig im Stammverzeichnis des Projekts, das die angegebenen Konfigurationen für alle Dateien einschließlich derjenigen innerhalb der Unterverzeichnisse anwendet.root = true [*] charset = utf-8 indent_style = tab indent_size = 4 insert_final_newline = true
Bestimmt die Konfiguration aus unserem Beispiel, werden wir unseren mit Tab eingerückten Code finden und eine neue Zeile am Ende der Datei hinzufügen, wenn Sie sie speichern.
Die Konfiguration wirkt sich auf alle vorhandenen Dateien aus, in denen Sie zuvor eine Leerzeichen-Einrückung verwendet haben.
Siehe Unterstützte Eigenschaften für anwendbare Eigenschaften für die .editorconfig Datei und die EditorConfig-Platzhaltermuster, um die Eigenschaften für bestimmte Dateien oder Verzeichnisse anzuwenden. Sie finden das Plugin Ihres bevorzugten Editors oder der IDEs auch im Download-Bereich.
Gemäß der CodeGuide-Richtlinie sollten Stileigenschaften in der folgenden Reihenfolge angeordnet werden.
Position, oben, links, usw.Breite, Höhe, Anzeige, usw.Schriftart, Zeilenhöhe, usw.Hintergrund, Rand, Grenzradius, usw.Zum Beispiel:
.Körperinhalt Position: absolut; oben: 0; links: 0; Polsterung: 10px 12px; Anzeige: keine; Schriftgröße: .8em; Schriftdicke: fett; Zeilenhöhe: 26px; Farbe: #fff;
Wenn Sie eine Richtlinie mit einer ähnlichen Regel übernehmen, in der Eigenschaften in dieser bestimmten Reihenfolge gruppiert werden, ist CSSComb sehr hilfreich. Es erlaubt Ihnen nicht nur genau das zu tun, sondern behält auch einige Stilkonventionen bei, wie z. B. Abstand, die Verwendung von Anführungszeichen, Klammern, Doppelpunkt, Semikolon und führende Nullen für den Längenwert, und es funktioniert gut mit der CSS-Vorprozessor-Syntax.
npm install csscomb -g .csscomb.json im Stammverzeichnis des Projekts oder in dem Verzeichnis, in dem die CSS-Dateien gespeichert sind..csscomb.json. Prüfen Sie die vollständige Liste der anwendbaren Optionen. Zur Vereinfachung können Sie die Konfigurationsdatei über die Config Builder-Webapp generieren oder eine der im Repository vorhandenen voreingestellten Konfigurationen verwenden.Verwenden Sie die csscomb Befehl wie folgt:
csscomb assets / css / style.css
Wenn Sie möchten, können Sie CSSComb während des Erstellungsprozesses mit dem Gulp- oder Grunt-Plugin ausführen. Alternativ können Sie ein Plugin wie Sublime Text in Ihrem Code-Editor verwenden und es durch ausführen Befehlsleiste. Es gibt auch ein Plugin für Brackets und Atom.
StyleLint ist ein Tool, das unser CSS anhand von mehr als hundert vordefinierten Regeln überprüft und Warnungen bei Verstößen ausgibt. Einige dieser Verstöße lassen sich mit CSSComb leicht beheben, so dass diese Tools Hand in Hand eingesetzt werden können. CSSLint ist auch ein perfektes Werkzeug, um eine Codeüberprüfung durchzuführen.
npm install stylelint -g .stylelintrc Datei im Stammverzeichnis Ihres Projekts..stylelintrc Datei, zum Beispiel:"rules": "color-hex-case": "lower", "color-hex-length": "short", "comment-empty-line-before": "always", "Selector-no-combinator ": true", "Selector-no-id": "true", "String-Anführungszeichen": "double", "selector-no-type": "true", "selector-no-universal": "true", "selector-no-vendor -prefix ": true
Eine vollständige Liste der anwendbaren Stylint-Regeln finden Sie auf der Seite Regeln.
Verwenden Sie Stylelint über die Befehlszeile (zB: stylelint "css / *. css"), PostCSS mit dem Plugin oder installieren Sie ein Plugin, mit dem Sie die Warnungen direkt in Ihrem Code-Editor sehen können. Das Plugin ist derzeit für Sublime Text, Atom und Visual Studio verfügbar.
Wie der Name schon sagt, wertet JSCS Ihre JavaScript-Codestile aus. von der Verwendung von Whitespace, Funktionen und Namenskonventionen für Variablen, Kommentarblöcken, Zeilenumbrüchen und vielem mehr. JSCS wurde in beliebten Open-Source-Projekten wie jQuery, Bootstrap und Ember.js sowie von namhaften Unternehmen wie Yandex und Adobe eingesetzt. Testament in der Tat; Sie sollten es wahrscheinlich auch in Ihrem Projekt verwenden!
npm install jscs -g..jscsrc."jquery", "airbnb", "Google", "Yandex", und "WordPress"."Preset": "WordPress", "RequestCurlyBraces": True
Angenommen, Ihre JavaScript-Datei wird in gespeichert js / app.js, Führen Sie den Befehl aus: jscs js / app.js.
Um die Codestile zu korrigieren, führen Sie sie aus jscs js / app.js --fix. In Sublime Text können Sie JSCS Formatter installieren, ohne den Code-Editor zu verlassen. Ein ähnliches Plugin namens JSCS Fixer ist auch für Atom verfügbar.
Ein weiteres Tool, das ich täglich zum Überprüfen meines JavaScript-Objekts verwende, ist JSHint. Im Gegensatz zu JSCS beziehen sich JSHint-Auswertungen auf die Gültigkeit des Codes und nicht nur auf das Code-Styling. Außerdem wird JSHint auch entfernt stilistisch Regeln in der nächsten Version, da JSCS die Traktion gesteigert hat und die Aufgabe in dieser speziellen Angelegenheit gut erledigt. Daher prüft JSHint nur die Verwendung von Variablen, Schleifen, Vergleichsoperatoren, Gültigkeitsbereichen, Verschachtelungsstufen und ähnlichen technischen JavaScript-Elementen, die möglicherweise Probleme oder Fehler verursachen.
npm install jshint -g .jshintrc im Stammverzeichnis Ihres Projekts..jshintrc, zum Beispiel:"boss": true, "eqeqeq": true, "eqnull": true, "expr": true, "immed": true, "noarg": true, "undef": true, "nicht verwendet": true, " Knoten ": wahr
Verwenden Sie die Jshint Befehlszeile. Vorausgesetzt, Sie haben alle Ihre JavaScript-Dateien in einem Verzeichnis mit dem Namen gespeichert js, Lauf jshint js.
Verwenden Sie alternativ JSHint mit dem Gulp- oder Grunt-Plugin. Sublime Text oder Atom Benutzer können das installieren linter schnittstelle für SublimeText, Atom, damit Sie den Fehlerbericht direkt im Code-Editor anzeigen können.
Spitze: CodePen überprüft auch Ihr JavaScript auf Fehler bei der Verwendung von JSHint. Diese Option finden Sie im Bedienfeld JavaScript-Einstellungen:
Wenn Sie alle diese Tools in Ihrem Projekt verwenden möchten, können Sie sie mit Yeoman als Gerüst zusammenstellen. Wenn Sie oder Ihr Team gerade ein neues Projekt beginnen, müssen Sie nur einen einzelnen Zeilenbefehl treffen, um sie in wenigen Sekunden fertig zu stellen. Weitere Informationen finden Sie im Envato Tuts + -Kurs zum Erstellen eines benutzerdefinierten Yeoman-Generators.
Mit diesen Tools können wir nicht nur besseren Code erstellen und Fehler in unserem Code minimieren, sondern uns auch darin trainieren, bessere Webentwickler zu sein. Zunächst könnte es passieren, dass Ihr Code viele Fehler enthält. Sie werden jedoch bald Code mit weniger Fehlern schreiben, wenn Sie sich an die Regeln gewöhnen.
