Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

JavaScript : Le débogage et l'analyse de code

Fixer le code source avec JSCS

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Grâce à JSCS (JavaScript Code Style), vous respecterez les standards JavaScript utilisés dans les plus grands projets et par les entreprises du monde entier.
05:29

Transcription

Maintenant qu’on a parlé de propreté de code, on va attaquer un sujet supplémentaire. On va attaquer le sujet, de la syntaxe, le sujet du respect des standards. Vous savez que si on a envie d’avoir un code propre et facilement débugable donc facilement patchable, que l'on va pouvoir travailler, il va falloir respecter un certain nombre de standards. En JavaScript, ce n’est pas comme en PHP par exemple ou dans d’autres langages. On n'a pas vraiment de norme qui est imposée ou qui a été réfléchie. Alors, c’est vrai et pas vrai. Il y a de grands groupes qui nous permettent d’avoir des normes. On utilisera un outil qui s’appelle JSCS. Alors, celui-ci va pouvoir fixer, donc pareil, un peu la syntaxe et l’écriture de votre code mais il va pouvoir même le faire carrément sur tout un dossier. Comme ça vous pourrez passer tout un code à la moulinette directement, avec cet outil. Donc cet outil, toujours pareil, il va s’installer avec npm bien sûr, c’est les outils JavaScript mais qui s’installent avec npm qui s’utilisent en console. Et on va aller dans la partie « Overview » ici, et on verra, il existe des « Presets ». Alors en fait, quand vous allez patcher, c’est le petit exemple que vous avez là, alors là, ils le font sur un seul fichier mais si on descend un tout petit peu, voilà, vous pouvez demander ici un fixe sur carrément tout un dossier sans aucun problème. On va utiliser à chaque fois des « Presets ». Ici, c’est le « preset airbnb ». C’est incroyable ça, « airbnb ». Oui, parce que « airbnb » fait pas mal de choses dans le monde du JavaScript pour le coup. Il y en a d’autres, il n’y a pas que lui. Il y a « crockford » qui a imposé, en tout cas propose une de ses normes. Il y a Google qui propose une norme aussi, « Grunt », « Idiomatic », « jQuery », « MDCS » bien sûr. Celui-ci, il est très connu. On a aussi le « node-style-guide », on a « Wikimedia », et puis surtout on a « WordPress ». Donc tout ça en fait, ce sont des styles proposés à la communauté de développeurs JavaScript qui vous permettent de respecter certaines normes. C’est intéressant à aller voir, moi je vous invite à vraiment regarder tous les guides, notamment celui de « airbnb » par exemple où on verra ici comment eux proposent de formater. Quels sont les formatages à avoir ? Quels sont les formatages pour les objets ? Quels sont ensuite les formatages proposés pour les « arrays », etc., etc. Vraiment tout ça est très, très bien défini. Moi personnellement, j’ai un faible pour la norme Google parce que je l’utilise beaucoup. Alors celui-ci, vous voyez, il passe en erreur pour le coup, le « styleguide » de Google mais vous pouvez le trouver, il suffira simplement, voilà, de supprimer ici toute cette partie-là. On va simplement utiliser « styleguide » de Google comme ça et vous allez le trouver sur internet. Donc si vous avez envie de faire une petite modification sur le dépôt « github », ce sera très bien. Là vous avez le « styleguide » de Google. Et c'est la même chose, c’est toujours pareil, c'est-à-dire que voilà, on vous propose tout un tas de choses à respecter. Ce qui est intéressant, c’est que chez Google pour le coup, il y en a pour absolument tous les langages. Ils ont vraiment des guides pour quasiment tout et on trouvera le « javascriptguide » ici avec toutes les normes à l’intérieur, donc qu’est-ce qu’on doit faire, qu’est-ce qu’on ne doit pas faire, etc. Donc là vraiment tout est défini. Je vous invite vraiment à aller regarder ces «styleguides ». Ils sont vraiment super intéressants. Bon, on va utiliser donc du coup cet outil. Comment on va l'installer, cet outil ? Donc vous le voyez ici, c’est JSCS, ça s’utilise en tant que JSCS. Vous imaginez donc bien comment on va l’installer. On va faire ici un « sudo npm install -g » pour l’installer de façon globale et « jscs » tout simplement. On va vous demander certainement votre mot de passe. Ne vous inquiétez pas, c’est normal parce que ça s’installe de façon globale pour être disponible sur la machine en globalité. Donc vous n'hésiterez pas à installer ces outils et à vraiment les utiliser, comme ça, ça vous permettra d’abord de patcher tout votre projet pour respecter les normes, puis aller lire le guide pour essayer de le respecter pendant que vous êtes en train de taper. C'est vrai que c'est jamais forcément évident, on oublie des petites choses, ça arrive. Ne vous inquiétez pas, c’est normal, tous les développeurs font ça. Maintenant on va fixer. Donc là, on est toujours avec notre fichier « app.js ». On va récupérer l’exemple qu’on a tout en haut : « jscs file.js --preset=airbnb ». On va juste prendre ça. Et puis on va utiliser « jscs » sur notre « app.js » avec ici un « preset », et qu'est-ce que ce sera le « preset » ? On va, pourquoi pas, mettre Google. Donc là, on va lui demander simplement, voilà de patcher. Vous voyez ce qui se passe ici : on va nous donner toutes les informations sur les erreurs qu’on a actuellement dans le fichier et ce qu’on devrait avoir normalement. Alors si vous avez envie de fixer, il faudra utiliser l’option « fix ». En fait, c’est ce que vous avez dans le documentation ici. On va utiliser « --fix » et comme ça, ça va fixer les erreurs. Sinon, ça vous les donne tout simplement. Donc ici on va faire « app.js --fix » avec le « preset » Google et on va avoir ici un « fixe » sur le fichier. On va retourner dans le fichier et le fichier du coup va être patché. Faites attention quand même, quand vous faites comme ça un « --fix » ça peut être un petit peu embêtant parce que ça marchera mieux sur un dossier complet. Donc n’hésitez pas à revenir sur votre dossier. On va faire comme ça, un « ls » et puis vous allez patcher carrément avec « --fix » sur le dossier « js ». Ça marchera aussi. Donc « --fix » comme ça, sur le dossier « js » et on va faire « preset » Google. Donc là encore, hop ça va directement vous patcher le fichier. Donc n’hésitez pas à utiliser « jscs » pour d’abord, voir si votre code est bien formaté, savoir si on a des choses à modifier et puis en apprendre plus du coup sur un « preset » particulier. Et encore une fois, allez regarder la documentation parce que si vous codez proprement, vous n'aurez pas besoin de fixer quoi que ce soit. Donc ça, c’est vraiment une bonne chose à avoir dans la boîte à outil des développeurs. Coder avec des standards vous permettra d’avoir un code plus lisible et plus facile à maintenir dans le temps.

JavaScript : Le débogage et l'analyse de code

Prenez en main les techniques et les outils pour améliorer votre code JavaScript. Découvrez Bower, js-beautify, la console de Chrome, les tests unitaires et fonctionnels, etc.

1h29 (26 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :3 mars 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !