Guide de style de code JavaScript populaire actuel_Conseils Javascript

JavaScript n'a pas de guide de style de codage faisant autorité, mais il existe des styles de codage populaires :

Copier le code Le code est le suivant :

Guide de style JavaScript de Google (ci-après dénommé Google)
http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
Style de codage NPM (ci-après dénommé NPM)
https://npmjs.org/doc/coding-style.html
Guide de style Node.js de Felix (ci-après dénommé Node.js)
http://nodeguide.com/style.html
JavaScript idiomatique (ci-après dénommé Idiomatique)
https://github.com/rwldrn/idiomatic.js/
Guide de style JavaScript jQuery (ci-après dénommé jQuery)
http://contribute.jquery.org/style-guide/js/
Guide de style JavaScript de Douglas Crockford (ci-après dénommé Crockford), Douglas Crockford est l'une des autorités techniques les plus connues dans le domaine du développement Web et membre du comité de normalisation ECMA JavaScript 2.0
http://javascript.crockford.com/code.html

Bien entendu, il existe également des choix de paramètres par défaut dans les vérificateurs de syntaxe JavaScript JSLint et JSHint. La question est de savoir quel est le style de codage JavaScript ultime que la plupart des développeurs peuvent suivre ? Trouvons quelques styles consensuels parmi ces 6 guides de style.

1. Comparaison des styles de code

1.1 Indentation

Deux espaces, plus d'indentation, pas d'indentation de tabulation : Google, NPM, Node.js, Idiomatic
Retrait de tabulation : jQuery
4 espaces : Crockford

1.2 Espace entre paramètres et expressions

Utilisez des styles compacts : Google, NPM, Node.js

Copier le code Le code est le suivant :

project.MyClass = function(arg1, arg2) {

Utilisation excessive des espaces : Idiomatique, jQuery

Copier le code Le code est le suivant :

pour ( i = 0; i < length; i ) {

Pas encore de commentaires : Crockford
Dans la plupart des directives, il est rappelé aux développeurs de ne pas laisser d'espace à la fin des instructions.

1.3 Longueur de la ligne de code

Jusqu'à 80 caractères : Google, NPM, Node.js, Crockford (à l'intérieur d'un bloc de code, une indentation autre que 2 espaces permet d'aligner les arguments de la fonction sur la position du premier argument de la fonction. Une autre option utilise 4 espaces pour l'indentation lorsque emballage automatique)
Aucun commentaire laissé : jQuery, Idiomatic

1.4 point-virgule

Utilisez toujours des points-virgules, ne comptez pas sur l'insertion implicite : Google, Node.js, Crockford
N'utilisez pas expect dans certaines situations : NPM
Aucun commentaire laissé : jQuery, Idiomatic

1.5 Remarques

Suivez les conventions JSDoc : Google, Idiomatic
Aucun commentaire laissé : NPM, Node.js, jQuery, Crockford

1.6 Citations

Guillemets simples recommandés : Google, Node.js
Guillemets doubles : jQuery
Pas de commentaires : NPM, Idiomatic, Crockford

1.7 Déclaration des variables

Déclarez-en un à la fois, sans virgules : Node.js

Copier le code Le code est le suivant :

var foo = ”;
var barre = ”;

Déclarez plusieurs à la fois, séparés par des virgules en fin de ligne : Idiomatic, jQuery

Copier le code Le code est le suivant :

var foo = "",
barre = "",
quux;

Utilisez une virgule en début de ligne : NPM
Pas de commentaires : Google, Crockford

1.8 Bretelles

Utilisez des accolades ouvrantes sur la même ligne : Google, NPM, Node.js, Idiomatic, jQuery, Crockford

Copier le code Le code est le suivant :

fonction thisIsBlock(){

Les directives NPM stipulent que les accolades ne doivent être utilisées que si le bloc de code doit contenir la ligne suivante, sinon non.

1.9 Variables globales

N'utilisez pas de variables globales : Google, Crockford (Google a déclaré que les conflits de noms de variables globales sont difficiles à déboguer et peuvent causer des problèmes gênants lors de l'intégration des deux projets. Afin de faciliter le partage du code JavaScript commun, une convention doit être établie pour éviter les conflits. Crockford estime que les variables globales implicites ne devraient pas être utilisées)

Aucun commentaire : Idiomatic, jQuery, NPM, Node.js

2 Style de dénomination

2.1 Dénomination des variables

Le premier mot du début est en minuscule et la première lettre de tous les mots suivants est en majuscule : Google, NPM, Node.js, Idiomatic

Copier le code Le code est le suivant :

var foo = "";
var fooName = "";

2.2 Dénomination des constantes

Utilisez des majuscules : Google, NPM, Node.js

Copier le code Le code est le suivant :

var CONS = 'VALEUR';

Aucun commentaire laissé : jQuery, Idiomatic, Crockford

2.3 Dénomination des fonctions

Le premier mot du début est en minuscule et la première lettre de tous les mots suivants est en majuscule (camel case) : Google, NPM, Idiomatic, Node.js (il est recommandé d'utiliser des noms de fonctions longs et descriptifs)

Copier le code Le code est le suivant :

fonction veryLongOperationName
fonction short()..

Nommage de la fonction sous forme de mot-clé :

Copier le code Le code est le suivant :

fonction isReady()
fonction setName()
fonction getName()

Pas de commentaires : jQuery, Crockford

2.4 Dénomination des tableaux

Utiliser le pluriel : Idiomatique

Copier le code Le code est le suivant :

var documents = [];

Pas de commentaires : Google, jQuery, NPM, Node.js, Crockford

2.5 Dénomination des objets et des classes

Utilisez les formulaires suivants : Google, NPM, Node.js

Copier le code Le code est le suivant :

var ThisIsObject = nouvelle Date;

Aucun commentaire laissé : jQuery, Idiomatic, Crockford

2.6 Autre dénomination

Utilisez le formulaire CSS avec tirets inférieurs pour les noms de fichiers longs et les clés de configuration : NPM

3. Configurez le fichier .jshintrc selon le style ci-dessus

JSHint (http://www.jshint.com/) est un outil de vérification de la syntaxe et du style JavaScript que vous pouvez utiliser pour vous alerter des problèmes liés au style de code. Il peut être bien intégré dans de nombreux éditeurs couramment utilisés et constitue un excellent outil pour unifier le style de codage de l'équipe.

Vous pouvez consulter les options disponibles via la documentation JSHint : http://www.jshint.com/docs/#options
Ensuite, créez un fichier .jshintrc basé sur le premier style de chacune des catégories ci-dessus. Vous pouvez le placer dans le répertoire racine du projet, et l'éditeur de code JSHint-avare le suivra pour unifier tous les styles de code du projet.

Copier le code Le code est le suivant :

{
"camelcase" : vrai,
"retrait": 2,
"undef": vrai,
"quotmark": single,
"maxlen": 80,
"trailing" : vrai,
"bouclé" : vrai
>

De plus, vous devez ajouter l'en-tête suivant à votre fichier JavaScript :

Copier le code Le code est le suivant :

/* navigateur jshint:true, jquery:true */

Dans le fichier Node.js vous devez ajouter :

Copier le code Le code est le suivant :

/*nœud jshint :true */

Vous pouvez également ajouter la déclaration suivante à divers fichiers JavaScript :

Copier le code Le code est le suivant :

'utiliser strict';

Cela affectera JSHint et votre moteur JavaScript, qui seront peut-être moins compatibles, mais JavaScript s'exécutera plus rapidement.

4. Exécutez automatiquement JSHint avant de vous engager dans Git

Si vous souhaitez vous assurer que tout le code JS est cohérent avec le style défini dans .jshintrc, vous pouvez ajouter le contenu suivant à votre fichier .git/hooks/pre-commit lorsque vous essayez de valider de nouvelles modifications. La vérification du style est automatiquement effectué lorsque des fichiers sont ajoutés au projet.

Copier le code Le code est le suivant :

#!/bin/bash
# Pré-validez le hook Git pour exécuter JSHint sur des fichiers JavaScript.
#
# Si vous devez absolument vous engager sans tester,
# utiliser : git commit --no-verify

filenames=($(git diff --cached --name-only HEAD))

quel jshint &> /dev/null
si [ $? -ne 0 ];
alors
echo "erreur : jshint introuvable"
echo "installer avec : sudo npm install -g jshint"
sortie 1
fi

pour moi dans "${filenames[@]}"
faire
Si [[ $i =~ .js$ ]];
Alors
echo jshint $i
         jshint $i
           si [ $? -ne 0 ];
        alors
sortie 1
      fi
fi
fait