Code Quality with JSCS and ESLint

Transcript

1. CODE QUALITY WITH JSCS AND ESLINT OR HOW TO HELP YOUR COWORKERS WHILE SHOUTING AT THEM
2. WHY DO YOU NEED A CODING STYLE GUIDE ? Code is the primary communication tool between you and your peers Code is written once but read many (many) times And you don't want to see things like this i f ( f o o = = = t r u e ) { r e t u r n t r u e ; } e l s e r e t u r n ! 1
3. WHY DO YOU NEED A CODE LINTER ? To find errors in your code To disallow and/or enforce some patterns To discover potential problems
4. THE TOOLS
5. JSCS Only to check the code style You can craft your own style guide or use one of the 8 defaults: AirBnB, Google, Crockford, etc. About 90 rules Extendable, you can add your own rules
6. ESLINT Warns you about problematic patterns and enforces best practices ECMAScript 6 and JSX compliant * About 150 rules Extendable, you can add your own rules * ESLint-plugin-React
7. WHY START WITH THE CODING STYLE ? First step to make your codebase more coherent Easy to apply to existing code Can be used to evaluate workflow integration Can be used to evaluate how open your team is to change
8. CHOOSING THE RULES Involve the entire team 3 typical profiles to manage: The Good: I don't care about the rule but pick one The Bad: Use THIS rule! The Ugly: We don't need a rule, let everyone do what they want You should end up with a mashup of: Your team preferences The patterns commonly used by the community The rules followed by the legacy code
9. ENFORCING RULES (1/2) EDITOR INTEGRATION Available for all common editors (Sublime Text, WebStorm, Vim, etc.) Helps to see warnings/errors in real-time Optional
10. ENFORCING RULES (2/2) PRE-COMMIT First as warnings, then as errors Mandatory
11. PANIC TIME! WE VOTED FOR THIS ?!?
12. STAY CALM Adjust rules Write a human-friendly style guide Help everyone to configure their editor (Re)-explain rules Be very clear on the purpose of every rule It will take some time
13. GOING FORWARD BY WRITING YOUR OWN RULES
14. WHY WOULD YOU NEED CUSTOM RULES ? Compensate for missing rules Make rules match your project's peculiarities Help your coworkers to use the right tool for the right job Warn your coworkers about API changes
15. SPECIFIC RULE EXAMPLE DEPRECATED API
16. ABSTRACT SYNTAX TREE Code: a p i . c a l l ( ' d e e z e r . e m a i l C h e c k ' , { E M A I L : s t r } , f u n c t i o n ( r e s u l t ) { } ) ; AST: { " t y p e " : " P r o g r a m " , " b o d y " : [ { " t y p e " : " E x p r e s s i o n S t a t e m e n t " , " e x p r e s s i o n " : { " t y p e " : " C a l l E x p r e s s i o n " , " c a l l e e " : { " t y p e " : " M e m b e r E x p r e s s i o n " , " c o m p u t e d " : f a l s e , " o b j e c t " : { " t y p e " : " I d e n t i f i e r " , " n a m e " : " a p i " } , " p r o p e r t y " : { " t y p e " : " I d e n t i f i e r " , " n a m e " : " c a l l " } } , Esprima AST Demo Parser API
17. OUR SPECIFIC RULE ' u s e s t r i c t ' ; m o d u l e . e x p o r t s = f u n c t i o n ( c o n t e x t ) { r e t u r n { ' M e m b e r E x p r e s s i o n ' : f u n c t i o n ( n o d e ) { i f ( n o d e . o b j e c t . n a m e ! = = ' a p i ' | | ( n o d e . p r o p e r t y . n a m e ! = = ' c a l l ' ) ) { r e t u r n ; } i f ( n o d e . p a r e n t . a r g u m e n t s . l e n g t h & & n o d e . p a r e n t . a r g u m e n t s [ 0 ] . t y p e = = = ' L i t e r a l ' c o n t e x t . r e p o r t ( n o d e , ' u s e t h e n e w a p i . c a l l ( ) s i g n a t u r e , s e e h t t p s : / / w i k i . d e e z e r . c o } } } ; } ; ESLint Developer Guide
18. MORE CODE QUALITY TOOLS / : Detects code duplication / : Calculates code complexity/maintenability : Avoids usage of magic numbers : Checks if your dependencies are up to date : Warns you about dependencies security issues JSInspect JSCPD ESComplex Plato Buddy.js David Node Security Project
19. THE ALL-IN-ONE CHECK-BUILD Integrates JSCS, JSHint, JSInspect, Buddy.js, David and Node Security Project with a default configuration
20. CONCLUSION Add tools progressively Try to integrate them seamlessly in the workflow Customize your rules to match your environment The most challenging part is the human factor Be (very) patient!
21. THANK YOU ANY QUESTIONS?