This document discusses static code analysis and recommends ESLint as the best tool for JavaScript static code analysis. It provides information on other tools like JSLint and JSHint. The document discusses how to integrate ESLint with IDEs and build processes using autofixing and git hooks. It also provides a code sample for running ESLint on an existing codebase and mentions using stylelint for analyzing CSS/SCSS/LESS code.

1. Static code
analysis

2. About me
2
Ran Bar-Zik @barzik
Web developer @ AOL Oath
internet-israel.com

3. What is static
code analysis
And why it is so important?
3

4. Spaces VS tabs
Everyone have opinions on it
Yoda conditions
If (true === yoda) {
Functions names
camelCased or_not_camel_cased
4

5. WHY?!?
5

6. Because
6
No dumb
errors.
Easy to
understand.
No less than
dumb errors
(implementing
good
standards)

7. Static code analysis
tools for JavaScript
JSlint
The old and the wise.
[not very wise]
- No config file
- No extensions
JShint
Younger and smarter
- Config file
- No extensions
JCS
Not very effective
- Only style
- Slow
7

8. ESLint is the de
facto best tool for
JS static code
analysis
╺ Configuration file
╺ Easy to extend
╺ Great output
╺ Autofix
8

9. 9

10. 10

11. Eslint integration
11
Porgrammer writes
code
IDE alerts on ESlint
errors
local eslint process
Build eslint process
[By TravisCIJenkins]

12. Meet autofix
No more hassle
12

13. 13

14. 14
Porgrammer writes code
IDE alerts on ESlint errors
local eslint process
ENFORCED BY git hooks
Build eslint process
[By TravisCIJenkins]

15. Eslint autofix
integration
Porgrammer writes
code
IDE alerts on ESlint
errors
Before git push
ESLint process with
autofix flags
Build eslint process
[By TravisCIJenkins]
git porcelain is
true?
Pack the changes
into commit
Yes
No

16. 16
./node_modules/eslint/bin/eslint.js ./src/ --fix
if [[ `git status --porcelain` ]]; then
echo Lint issues detected and fix was committed.
git add '*.js'
git commit -m"Lint issues fix" --no-verify
else
echo Lint inspection is OK.
# no changes
fi

17. 17
How to implement
static code analysis
on existing code
base?
https://gist.github.com/barzik/d6f43a1ee650643ced19a5094d4cec3d

18. The next step:
prettifier
It is like autofix, but
faster, leaner and cooler.
[But it has the same
effect]
18

19. 19

20. White
Is the color of milk and fresh
snow, the color produced by
the combination of all the
colors of the visible
spectrum.
YOU CAN ALSO
SPLIT YOUR
CONTENT
Black
Is the color of coal, ebony,
and of outer space. It is the
darkest color, the result of
the absence of or complete
absorption of light.
20

21. IN TWO OR THREE
COLUMNS
Yellow
Is the color of gold,
butter and ripe
lemons. In the
spectrum of visible
light, yellow is found
between green and
orange.
Blue
Is the colour of the
clear sky and the
deep sea. It is located
between violet and
green on the optical
spectrum.
Red
Is the color of blood,
and because of this it
has historically been
associated with
sacrifice, danger and
courage.
21

22. A PICTURE IS
WORTH A
THOUSAND
WORDS
A complex idea can be
conveyed with just a
single still image, namely
making it possible to
absorb large amounts of
data quickly.
22

23. Static code analysis
for everything!
23

24. 24
WANT BIG IMPACT?
USE BIG IMAGE

25. Static code analysis for
CSSSCSSLESS with
Stylelint!
Configurable
25
Extandable
No IDE
integration
Autofix with
Stylefmt

26. Lint the world, make it a
better place!
26

27. 27
THANKS!
Any questions?
╺ Connect me on LinkedIn,
Twitter or Facebook!
╺ Follow internet-israel.com

28. CREDITS
Special thanks to all the people who made and
released these awesome resources for free:
╺ Presentation template by SlidesCarnival
╺ Photographs by Unsplash
28