JavaScript Linting Tools Par Mohamed Belhassen MAZIGH, consultant OLBATI Au Geek Time de Septembre 2016

1. JavaScript Linting Tools
JSLint, JSHint et JSCS
Geek Time - Septembre 2016
MAZIGH Mohamed Belhassen
OLBATI Consultant

2. OLBATI © 2016 - Geek Time September 2016 !2
Plan
Présentation
JSLint
JSHint
Démonstration
Perspectives
JSCS

3. OLBATI © 2016 - Geek Time September 2016 !3
Présentation
● Problématique
JavaScript n'est pas précompiler avec les IDEs,
détectés les erreurs de syntaxe, oublier de gérer
les erreurs correctement ou taper mal le nom de
variable n'est pas évident à corriger.

4. OLBATI © 2016 - Geek Time September 2016 !4
Présentation
● Solution
Les vérificateurs (linting tools) JavaScript, ce sont des outils
d'analyse de code pour détecter des erreurs ou des
anomalies. Ils aident à éviter des erreurs lors de l'écriture
de JavaScript et d'avoir un code lisible et structuré en fixant
d e s r è g l e s d e f o r m a t a g e d e c o d e ,
les plus connus sont JSLint, JSHint, JSCS and ESLint.

5. OLBATI © 2016 - Geek Time September 2016 !5
Présentation
Ils ne permettent pas de savoir si le code est
correct, mais offrent un autre regard sur le
code.

6. OLBATI © 2016 - Geek Time September 2016 !6
JSLint
● Définition
JSLint est le plus ancien des trois, il a étais crée par
Douglas Crockford en 2002 pour faire appliquer ce qui
d'après lui les bonnes pratiques de JavaScript.

7. OLBATI © 2016 - Geek Time September 2016 !7
JSLint
●Avantages
○ Livré configuré et prêt à utiliser.
●Inconvenants
○ Pas de fichier de configuration.
○ Nombre limité d'options de configuration, globale.
○ Nombreuses règles ne peuvent pas être désactivées.
○ Vo u s n e p o u v e z p a s a j o u t e r d e s r è g l e s
personnalisées.
○ Difficile de savoir quelle règle est à l'origine où l'erreur.

8. OLBATI © 2016 - Geek Time September 2016 !8
JSHint
● Définition
JSHint a été créé comme une version plus configurable
de JSLint. Vous pouvez configurer toutes les règles, ce qui
rend JSHint facile à utiliser dans des projets plus
importants.

9. OLBATI © 2016 - Geek Time September 2016 !9
JSHint
● Avantages
○ La plupart des paramètres peuvent être configurés.
○ Prend en charge un fichier de configuration (par projets).
○ À un support pour de nombreuses
bibliothèques (jQuery, QUnit, NodeJS, Mocha, Angular...).
○ Soutien partiel de ES6.
● Inconvenants
○ Difficile de savoir quelle règle est à l'origine d'une erreur.
○ À deux types d'options : enforcing and relaxin, cela peut donner
légèrement des confusion dans la configuration.
○ Aucune prise en charge des règles personnaliséed.

10. OLBATI © 2016 - Geek Time September 2016 !10
JSCS
●Définition
JSCS est un vérificateur de style de code. Cela signifie qu'il
détecte les anomalies liées à la mise en forme de code, et
non pas des bugs ou erreurs potentielles.

11. OLBATI © 2016 - Geek Time September 2016 !11
JSCS
●Avantages
○ Plus facile à intégrer avec d'autres outils.
○ Précise la règle à l'origine de l'erreur.
○ Peut-être étendu avec des plugins personnalisés.
●Inconvenants
○ Détecte seulement les violations de style.
○ Lenteur dans la délectation des violations.

12. OLBATI © 2016 - Geek Time September 2016 !12
Démonstration

13. OLBATI © 2016 - Geek Time September 2016 !13
Perspectives
●ESLint !
○ Il a été conçu pour être facilement extensible.
○ Il vérifie le style de code.
○ Il soutient toutes les fonctions ES6.

14. OLBATI © 2016 - Geek Time September 2016 !14
Thanks!
Any questions?
@MAZIGHBelhassen
mohamed-belhassen.mazigh@olbati.com