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

Nettoyer le code avec js-beautify

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Découvrez js-beautify, un outil particulièrement utile pour améliorer le code et la syntaxe. Il vous permettra aussi de mettre en forme le code en ligne de commande.
03:56

Transcription

Parlons un petit peu de « tooling » dans un premier temps. Alors, le « tooling » c'est quoi ? C'est des outils, en fait la boite à outils que l'on va avoir à disposition et qui va nous permettre de travailler. Vous allez arriver de temps en temps sur des projets qui vont être de ce style, avec voilà, un fichier qui va être minifié. Alors ça arrive bien souvent parce que vous savez qu'on peut récupérer un projet où on n'a pas les sources forcément. Les développeurs ont mis à disposition simplement la version de minifiée. Ce n'est pas forcément évident pour travailler. De même, vous pourrez aller sur un site, et sur un code qui est mal formaté, eh bien ça, on va pouvoir le résoudre assez facilement. Il y a un outil qui existe, qui s'appelle « js-beautify ». Celui-ci pour venir l'utiliser, vous allez avoir besoin de l'installer au préalable. C'est pour ça que je vous ai fait installer « node » parce que vous allez avoir besoin du « node package manager » qui vous permet d'installer ce genre d'outil et donc de les avoir à disposition. Alors attention cependant, vous allez devoir utiliser ici ce qu'on appelle un « flag », un drapeau, qui est en fait une option, qui va être l'option « -g » que vous avez là. L'option « -g », ça veut dire qu'on va installer un paquet npm de façon globale. Alors vous allez copier cette ligne et dans votre terminal, vous allez simplement la coller. Alors attention, si vous êtes sur un système comme le mien, comme un OSX ou un Linux, vous serez obligé de préfixer avec « sudo » pour avoir les droits administrateur et certainement taper votre mot de passe. On va installer cet outil qui va donc être installé de façon globale et qu'on va donc pouvoir utiliser un petit peu partout. Et puis bien sûr, on va se rendre dans le dossier dans lequel on a notre projet. Si vous y êtes déjà, c'est bon. Si vous n'y êtes pas, il va falloir vous y rendre obligatoirement. Pensez simplement à faire un « ls » pour savoir où vous vous trouvez. Alors moi, vous voyez, je suis déjà dans le bon dossier. On peut remonter en arrière, voilà, moi je suis dans « todoadd » ici. C'est ce que vous pouvez voir à cet endroit là, je suis bien dans ce dossier-là. Si je fais un « ls » pour lister, je me rends compte qu'effectivement j'ai bien plusieurs fichiers et que celui qui m'intéresse va être dans le dossier « js ». Alors ici dans mon dossier « js », j'en ai qu'un seul, c'est « app.js » et je vais pouvoir utiliser maintenant l'outil « js-beautify » pour, eh bien travailler avec, eh bien, mon fichier « js » et le rendre plus joli. Alors, comment ça va fonctionner ? On va simplement lui donner ici le « js-beautify». Vous pouvez appuyer sur tabulation pour compléter, il devrait vous le trouver. Si toutefois il ne le trouve pas, attention, c'est que vous n'avez pas les bons « paths ». Il y a des « paths » à respecter et à ajouter dans votre « path » global. Pensez bien à le faire sinon ça ne marchera pas. Et ensuite, on va simplement lui donner le nom du fichier, eh bien, à beautifier, donc concrètement à rendre joli. Si vous appuyez sur Entrée, vous allez voir qu'effectivement ça fonctionne. Il va ici vous le faire mais il va vous le faire dans la console et ça c'est pas vraiment ce qu'on voudrait. Nous, ce qu'on aimerait, c'est la voir réellement. Alors il faut savoir qu'il y a des options de sortie qui sont possibles. Vous voyez qu'on peut regarder en dessous toutes les options possibles, il y en a pas mal. Vous pouvez ajouter des options qui vont être un petit peu particulières avec le niveau d'indentation, est-ce que vous voulez des indentations avec des tabulations ou avec des espaces, etc., etc. Il y a pas mal d'options sympas mais surtout, il y en a une qui est intéressante, c'est la réécriture. On peut lui demander simplement de remplacer le fichier d'avant par celui que lui, va mettre en forme. Pour ça, vous devriez utiliser là encore une option, un flag, « -r » au niveau de la commande. Donc on va reprendre notre commande, et ici on va lui ajouter un « -r » et on va faire Entrée. Ici, il nous dit qu'il a bien remis en beauté le fichier « app.js ». On peut aller vérifier dans notre éditeur. Effectivement maintenant, on se retrouve avec un fichier beaucoup plus propre, lisible et sur lequel on va pouvoir travailler. N'hésitez pas à utiliser cet outil quand vous arrivez sur des sources comme ça, qui ont été compressées à l'avance. C'est un très, très bon outil, c'est très simple à utiliser comme vous pouvez le voir et il suffit de l'installer et donc de lancer la commande pour rendre un fichier lisible et surtout pour le reindenter, pour le retravailler. Donc vous pouvez même le faire sur vos propre « js », simplement pour réobtenir un code propre.

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 !