Share
Il existe de nombreuses ressources sur lesquelles vous pouvez compter pendant le codage pour aider à préserver les normes au sein de l'équipe. Dans ce tutoriel, nous allons examiner comment déployer et utiliser cinq de ces outils..
HTML, CSS et JavaScript sont particulièrement simples là où il faut écrire conventions est concerné. Tant que certaines notations suivent les règles de langue, que les guillemets, les crochets, les deux points, les points-virgules, etc., sont tous à la bonne place, le code fonctionnera. Cependant, l'indentation, l'espacement, les sauts de ligne, l'ordre de déclaration des propriétés, des fonctions et des variables, y compris la casse des mots, sont entièrement à la charge des auteurs..
Les éléments HTML, par exemple, ne sont pas sensibles à la casse. Nous pouvons les écrire en minuscules ou en majuscules; ce qui était une pratique courante dans les années 90. De plus, l'encapsulation des valeurs d'attribut entre guillemets est facultative depuis l'arrivée de HTML5, ce que peu de gens font en réalité. Tout cela permet au code ci-dessous d'être déclaré valide selon le standard HTML5:
/ ** HTML valide en HTML ** /Le contenu précède la conception. Le design en l'absence de contenu n'est pas du design, c'est de la décoration.
En CSS, certains préfèrent utiliser espace plus de languette-ou vice versa - pour l'indentation. Les propriétés dans les règles de style peuvent être organisées dans n'importe quel ordre. La présence de doublons dans votre code CSS convient parfaitement (la plupart du temps) et, dans le cas des préprocesseurs CSS, une imbrication excessive des règles de style est parfaitement réalisable..
.site .header & .logo .navigation .menu .menu-link &: hover
De même, une variable JavaScript peut être exprimée en majuscule ou en minuscule, une variable d'une lettre est acceptable, et l'omission d'accolades autour des blocs conditionnels ou des blocs de boucle est également réalisable..
si (n < 3) doFunction(); while(!n < 3) n++;
La manière dont nous écrivons le code n'a pas vraiment d'importance en termes d'exécution. Mais quand on travaille sur un projet avec de nombreuses personnes qui contribuent au base de code, vous trouverez bientôt que la base de code est en train de devenir un désordre si chaque contributeur suit ses propres préférences. Sur un projet à grande échelle, cela peut causer des bogues compliqués, le code peut devenir moins gérable et serait un réel problème pour quiconque héritera et maintiendra le projet à l'avenir..
En bref, il est encouragé d’adopter une «norme de codage».
Les «normes de codage» désignent tout ensemble de règles acceptées par les personnes concernées lors de la contribution à la base de code de projet. Ils ouvrent la norme pour la syntaxe maintenir la cohérence et la clarté du code, le mise en forme pour des raisons de lisibilité, l’utilisation de les meilleures pratiques de la langue; souvent avec l'ajout de règles propriétaires propres au projet.
Harry Roberts, dans ses directives CSS:
«Lorsque nous travaillons sur de grands projets à long terme, avec des dizaines de développeurs de spécialités et de capacités différentes, il est important que nous travaillions tous de manière unifiée afin, entre autres, de maintenir la maintenance des feuilles de style; garder le code transparent, sain et lisible, garder les feuilles de style évolutives; ”
Douglas Crockford, qui a popularisé JSON dans son «Conventions de code pour le langage de programmation JavaScript», a déclaré:
«La valeur à long terme des logiciels pour une organisation est directement proportionnelle à la qualité de la base de code. Au cours de sa vie, un programme sera géré par de nombreuses paires de mains et de yeux. Si un programme est capable de communiquer clairement sa structure et ses caractéristiques, il est moins susceptible de se briser s'il est modifié dans un avenir jamais trop éloigné. Les conventions de code peuvent aider à réduire la fragilité des programmes.
Tout notre code JavaScript est envoyé directement au public. Il devrait toujours être de qualité de publication. La propreté compte. "
La réponse courte est «pas nécessairement», d'autant plus qu'il existe déjà des dizaines de guides de style couramment utilisés, par exemple:
Ces guides de style sont bien écrits, détaillés et explicites en termes de raisonnement derrière chaque règle sur laquelle ils ont un impact. Donc, plutôt que de composer notre propre guide de style, il serait peut-être plus sage de adopter et adapter modèles existants pour l'adapter immédiatement à notre projet.
La vraie question est maintenant de savoir comment garder tout le monde en conformité avec les normes que nous avons choisies?
Heureusement, il existe quelques ressources sur lesquelles nous pouvons compter pendant le processus de développement, qui aideront à préserver les normes au sein de l'équipe. Dans ce tutoriel, nous allons examiner comment déployer et utiliser certains de ces outils..
EditorConfig est un fichier de points qui enregistre quelques règles de formatage de base telles que l'indentation, les espaces et les coupures de nouvelles lignes. Il fonctionne universellement avec n'importe quel type de langage et est déjà intégré dans presque tous les éditeurs de code et les IDE tels que Visual Studio, Sublime Text, Vim et TextMate via des plugins..
En supposant que vous utilisiez Sublime Text, le moyen le plus simple d’installer le plug-in consiste à: Directeur chargé d'emballage.
Accentsconagua
.éditeur de configuration dans le répertoire racine du projet qui appliquera les configurations spécifiées à travers tous les fichiers, y compris ceux contenus dans les sous-répertoires.root = true [*] charset = utf-8 indent_style = tab indent_size = 4 insert_final_newline = true
Si la configuration de notre exemple nous est donnée, nous trouverons notre code indenté avec tabulation et ajouterons une nouvelle ligne à la fin du fichier lors de la sauvegarde..
La configuration affectera tous les fichiers existants sur lesquels vous avez peut-être déjà utilisé une indentation d'espace..
Reportez-vous à Propriétés prises en charge pour connaître les propriétés applicables à .éditeur de configuration fichier et les modèles EditorConfig Wildcard pour appliquer les propriétés de fichiers ou de répertoires spécifiques. Vous pouvez également trouver la liste des plug-ins de votre éditeur préféré ou de vos IDE dans la section Téléchargement.
Selon la directive CodeGuide, les propriétés de style doivent être regroupées conformément à l'ordre consécutif suivant.
position, Haut, la gauche, etc.largeur, la taille, afficher, etc.Police de caractère, hauteur de la ligne, etc.Contexte, frontière, rayon de la frontière, etc.Par exemple:
.corps-contenu position: absolu; en haut: 0; gauche: 0; rembourrage: 10px 12px; affichage: aucun; taille de police: .8em; poids de police: gras; hauteur de ligne: 26px; couleur: #fff;
Si vous adoptez une directive avec une règle similaire, dans laquelle les propriétés sont regroupées dans cet ordre précis, CSSComb sera vraiment utile. Non seulement cela vous permet de faire exactement cela, mais en plus, il conserve plusieurs conventions de style telles que l'espacement, l'utilisation de guillemets, d'accolades, de deux-points, de points-virgules, de zéro pour la valeur de longueur et fonctionne parfaitement avec la syntaxe de pré-processeur CSS..
npm install csscomb -g .csscomb.json dans le répertoire racine du projet ou dans le répertoire où sont stockés les fichiers CSS..csscomb.json. Vérifiez auprès de la liste complète des options applicables. Pour faciliter les choses, vous pouvez générer le fichier de configuration via l'application Web Config Builder, ou utiliser l'une des configurations prédéfinies disponibles dans le référentiel..Utilisez le csscomb commande, comme si:
csscomb assets / css / style.css
Si vous préférez, vous pouvez exécuter CSSComb pendant le processus de construction avec le plugin Gulp ou Grunt. Alternativement, vous pouvez utiliser un plugin dans votre éditeur de code comme Sublime Text et le lancer à travers le Palette de commande. Il existe également un plugin disponible pour Brackets et Atom.
StyleLint est un outil qui examine notre CSS par rapport à plus de cent règles prédéfinies, produisant des avertissements en cas de violation. Certaines de ces violations sont faciles à corriger avec le CSSComb, ce qui rend ces outils intéressants à utiliser de pair. CSSLint est également un outil idéal pour effectuer une révision de code.
npm installe stylelint -g .stylelintrc fichier dans le répertoire racine de votre projet..stylelintrc fichier, par exemple:"rules": "color-hex-case": "lower", "color-hex-length": "short", "comment-empty-line-before": "toujours", "sélecteur-non-combinateur ": true," selector-no-id ": true," string-quotes ":" double "," selector-no-type ": true," selector-no-universal ": true," selector-no-vendor -prefix ": true
Vous trouverez une liste complète des règles Stylint applicables sur la page Règles..
Utilisez Stylelint via la ligne de commande (par exemple: stylelint "css / *. css"), PostCSS avec le plugin, ou installez un plugin qui vous permettra de voir les avertissements directement dans votre éditeur de code. Le plugin est actuellement disponible pour Sublime Text, Atom et Visual Studio..
Comme son nom l'indique, JSCS évalue les styles de code JavaScript. de l'utilisation d'espaces, de conventions de nommage de fonctions et de variables, de blocs de commentaires, de sauts de ligne, etc. JSCS a été largement utilisé dans des projets open source populaires tels que jQuery, Bootstrap et Ember.js, ainsi que par des entreprises renommées telles que Yandex et Adobe. Testament en effet; vous devriez probablement l'utiliser aussi dans votre projet!
npm installer jscs -g..jscsrc."jquery", "airbnb", "Google", "yandex", et "wordpress"."preset": "wordpress", "requireCurlyBraces": true
En supposant que votre fichier JavaScript est stocké dans js / app.js, lancez la commande: jscs js / app.js.
Pour corriger les styles de code, exécutez jscs js / app.js --fix. Dans Sublime Text, vous pouvez installer JSCS Formatter sans quitter l’éditeur de code. Un plugin similaire appelé JSCS Fixer est également disponible pour Atom.
JSHint est un autre outil que j’utilise quotidiennement pour vérifier mon code JavaScript. Contrairement à JSCS, les évaluations JSHint tournent autour de la validité du code plutôt que du style. En outre, JSHint supprimera également stylistique règles dans la prochaine version, car JSCS est de plus en plus populaire et fait du bon travail sur ce point spécifique. En tant que tel, JSHint vérifiera uniquement l'utilisation de variables, de boucles, d'opérateurs de comparaison, d'étendues, de niveaux d'imbrication et d'autres éléments techniques JavaScript susceptibles de causer des problèmes ou des bugs..
npm installer jshint -g .jshintrc dans le répertoire racine de votre projet..jshintrc, par exemple:"boss": true, "eqeqeq": true, "eqnull": true, "expr": true, "immed": true, "noarg": true, "undef": true, "non utilisé": true, " noeud ": vrai
Utilisez le jshint ligne de commande. En supposant que tous vos fichiers JavaScript soient stockés dans un répertoire nommé js, courir jshint js.
Alternativement, utilisez JSHint avec le plugin Gulp ou Grunt. Les utilisateurs de Sublime Text ou Atom peuvent installer le interface linter pour SublimeText, Atom, vous permettant de voir le rapport d'erreur directement dans l'éditeur de code.
Pointe: CodePen va également vérifier votre JavaScript pour les erreurs en utilisant JSHint; trouvez cette option dans le panneau des paramètres JavaScript:
Si définir tous ces outils sur votre projet peut sembler fastidieux, utilisez Yeoman pour les assembler en tant qu’échafaudage. Chaque fois que vous ou votre équipe êtes sur le point de commencer un nouveau projet, il vous suffit d'appuyer sur une seule ligne de commande pour les préparer en quelques secondes. Pour plus de détails, suivez le cours Envato Tuts + sur la création d'un générateur Yeoman personnalisé..
Enfin, ces outils nous aideront non seulement à produire un meilleur code et à minimiser les erreurs dans notre code, mais ils nous formeront également à devenir de meilleurs développeurs Web. Au début, vous trouverez peut-être que votre code contient de nombreuses erreurs. Mais vous allez bientôt écrire du code avec moins d’erreurs, au fur et à mesure que vous commencerez à vous habituer aux règles..
