A talk on static code analysis tools such as jshint, jscs, and eslint and how to use them to write good (stylish) code. Also introducing tools to enforce using the correct style via editorconfig or js-beautify to minimize efforts to write good code.

1. W R I T I N G ( M E T E O R )
C O D E W I T H S T Y L E
M E C O D E P R E T T Y O N E D A Y
T
Template.linkList.helpers({
links: function() {
return LinksCollection.find({}, {
sort: {
votes: -1
}
});
}
});
Template.linkList.events({
'click button#show-more': function() {
var newLimit = Session.get('linksLimit') + 10;
Session.set('linksLimit', newLimit);
}
});
MeteoI.EetAo=s! {
,==LinC ) fLnction !=:t:) {
cAecC! =:t:, {
LID) StIing,
teOt) StIing,
c:tegoIy) StIing
R );
if !!tAis.LseI0=) {
tAIow new MeteoI./IIoI! YoL A:Me to Dogin );
R
=:t:.tiEest:Ep + new .:te!);
=:t:.Motes + (;
=:t:.LseI0= + tAis.LseI0=;
=:t:.cIe:toI + MeteoI.LseIs.fin=One! =:t:.LseI0= ).LseIn:Ee;
IetLIn LinCs-­oDDection.inseIt! =:t: );
R,
,==Vote ) fLnction !=:t:) {
cAecC! =:t:, {
DinC0=) StIing
R );
if !!tAis.LseI0=) {
tAIow new MeteoI./IIoI! YoL A:Me to Dogin to ;e :;De to Mote foI DinCs );
R
=:t:.LseI0= + tAis.LseI0=;
'' cAecC if LseI Mote= :DIe:=y
if !LinCs-­oDDection.fin=!
{ _i=) =:t:.DinC0=, MoteIs) =:t:.LseI0= R
).coLnt!) +++ () {
IetLIn LinCs-­oDDection.Lp=:te!
Meteor.publish('links', function (options) {
console.log(options);
check(options, {
linksLimit: Number
});
var qryOptions = {
limit: options.linksLimit,
sort: {
votes: -1
}
};
console.log(qryOptions);
return LinksCollection.find({}, qryOptions);
Meteor.publish('categories', function () {
return CategoriesCollection.find({}, {
sort: {
name: 1
}
});
});
Router.route ( '/new', {
name: 'new',
subscriptions: function () {
return Meteor.subscribe ( 'categories
},
onBeforeAction: function () {
if (!Meteor.userId ()) {
this.render ( 'loginRequest' );
} else {
this.next ();
}
},
action: function () {
if (this.ready ()) {
this.render ( 'addLink' );
} else {
this.render ( 'Loading categories'
}
},
data: function () {
return { categories: CategoriesCollehttps://github.com/yauh/meteor-with-style

2. S T E P H A N
H O C H H A U S
@ YA U H
W H O A R E Y O U ?
Being a style icon

3. # 1 Q U A L I T Y
# 2 U N D E R S TA N D I N G
# 3 S C A L I N G
W H Y TA L K A B O U T S T Y L E ?

4. R E M E M B E R G O T O FA I L ?
{
...
if ((err = SSLHashSHA1.update(&hashCtx, &serverRandom)) != 0)
goto fail;
if ((err = SSLHashSHA1.update(&hashCtx, &signedParams)) != 0)
goto fail;
goto fail;
if ((err = SSLHashSHA1.final(&hashCtx, &hashOut)) != 0)
goto fail;
...
fail:
SSLFreeBuffer(&signedHashes);
SSLFreeBuffer(&hashCtx);
return err;
}
http://opensource.apple.com/source/Security/Security-55471/libsecurity_ssl/lib/sslKeyExchange.c

5. L O O K AT Y O U R C O D E

6. N O W A S K Y O U R S E L F
T W O Q U E S T I O N S

7. I S I T L E G A L ? I S I T S T Y L I S H ?

8. P O I N T O U T S U S P I C I O U S C O D E
A V O I D S T U P I D E R R O R S - L I N E S A F T E R A R E T U R N

9. • Missing semicolons
• if, for, while without curly braces
• Curly braces without if, for, while
• Unreachable code after a return,
throw, continue, or break
• switch/case statements without
break
• Comments within comments.
• Ambiguity whether two adjacent lines
are part of the same statement.
• Unnecessary code
• …
L O O K F O R

10. M A I N TA I N U N I F O R M S T Y L E
C O N S I S T E N T LY U S I N G 2 S PA C E S , N O TA B S

11. A = B + 1
N O T
A = B + 1
F U N C T I O N ( A , B , C ) { R E T U R N 1 ; }
N O T
F U N C T I O N ( A , B , C ) { R E T U R N 1 ; }
F O R ( I = 0 ; I < 3 ; I + + )
N O T
F O R ( I = 0 ; I < 3 ; I + + )
A ( 1 , 2 , 3 )
N O T
A ( 1 , 2 , 3 )
{ A : 1 , B : 2 }
N O T
{ A : 1 , B : 2 }
I F ( A )
N O T
I F ( A )
…
D O M I N A T I N G S T Y L E

12. T H E D Y N A M I C D U O
Style
CorrectnessFocus on
*100
*69
*number of rules

13. T H E D Y N A M I C D U O
+ T H E N E W K I D
Style
CorrectnessFocus on
ESLint
*146
*100
*69
*number of rules

14. N P M
A D D I N G L I N T E R S
$ npm install -g jshint
$ npm install -g jscs
$ npm install -g eslint

15. AT O M . I O
A D D I N G L I N T E R S

16. B U T W H Y W O U L D Y O U ?
You can have as many linters as you like

17. W H AT ’ S W R O N G W I T H M Y C O D E ?
S TA R T S M A L L A N D I N T R O D U C E R U L E S A S N E E D E D

18. P L U G G A B L E A R C H I T E C T U R E
& C U S T O M R U L E S
T H I S I S J U S T T H E T I P O F T H E M O U N TA I N

19. Look, I found some code to fix my code!
$ npm install -g js-beautify
$ npm install -g esformatter

20. C O D E F I X E R S
# of settings*
Ease
of use
esformatter
Editorconfig
*6
*17
*286

21. Editorconfig to the rescue!

22. AT O M . I O
A D D I N G F O R M A T T I N G H E L P E R S

23. C O N F I G U R I N G T H E T O O L S
T H E P O W E R O F T H E I N V I S I B L E

24. T L ; D L
• Write code that
• is valid JavaScript
• uses the same style across the team
• Use tools to support the writing process
• editorconfig
• js-beautify
• Use ESLint to check style adherence and slowly introduce rules

25. E V E N T U A L LY
C O N T I N U O U S I N T E G R A T I O N

26. E V E N T U A L LY
C O N T I N U O U S I N T E G R A T I O N

28. W H AT A B O U T C O F F E E ?
U S E C O F F E E L I N T !

29. F U R T H E R R E A D I N G
• https://github.com/meteor/meteor/wiki/Meteor-Style-
Guide
• http://jsbeautifier.org/
• http://davidwalsh.name/eslint