https://machida-tech.doorkeeper.jp/events/34517 にて発表したESLintの紹介 Lightning Talk

1. ESLint is the best
linter for JavaScript
now
中島 滋 a.k.a ledsun
2015/11/24 第１回 Machida Tech Night

2. Self Introduction
中島 滋 a.k.a ledsun
• Luxiar co.,ltd
• Frontend JavaScript programer
• 忍者式テスト(Ninja Test)
• text annotation editor
• graph editor

3. Why is the ESLint the best
Introduce reasons for that ESLint is the best linter for
JavaScript.
1. Great feature : ESLint can fix source code itself
2. Reason 1 : Support ES6
3. Reason 2 : Error / Warning
4. Reason 3 : Readable rule name
5. Reason 4 : Nice Document
6. Reason 5 : Nice API
7. Extra : I Made a help tool

4. Great feature : ESLint can fix
source code itself
Sometimes fixing source codes is too expensive to start
using linters.
ESLint can fix source code itself(not all rules).
I recommend "indent", "quotes" and "semi".
Styleが混在している時、途中で変えた時に便利
Fixable rules is marked "(fixable)" in List of available
rules
JSCS, too.

5. Fixable rules below:
• no-extra-semi
• eqeqeq
• no-multi-spaces
• array-bracket-spacing
• block-spacing
• comma-spacing
• computed-property-spacing
• eol-last

6. Reason 1 : Support ES6
The ESLint support ES6.
JSCS support.
The JSHint does not support ES6.

7. Reason 2 : Error / Warning
The ESLint enable to customize error level error or
warning.
This is editor friendly. I want to know hints of the linter
must be fixed before running the program or not during
programing.

8. Reason 3 : Readable rule
name
Names of lint rule of the ESLint is readable. For
example:
• comma-dangle
• no-cond-assign
• no-console
• no-constant-condition
• no-control-regex
• no-debugger

9. How about JSHint:
• E001
• E002
oops!

10. Reason 4 : Nice Document
All rule is documented at http://eslint.org/docs/rules/
Every document for rules has sample code. cf. http://
eslint.org/docs/rules/comma-dangle

11. Reason 5 : Nice API
A Result of linting of the ESLint has "ruleId".
{
fatal: false,
severity: 2,
ruleId: "semi",
severity: 2,
line: 1,
column: 23,
message: "Expected a semicolon.",
fix: {
range: [1, 15],
text: ";"
}
}

12. How about JSHint:
[
{
id: '(error)',
raw: 'Read only.',
code: 'W020',
evidence: 'foo = 3;',
line: 2,
character: 1,
scope: '(main)',
a: undefined,
b: undefined,
c: undefined,
d: undefined,
reason: 'Read only.'
}
]
code!?

13. Extra : I Made a help tool
I made a help tool for ESLint as "eslint-evaluator".
The "eslint-evaluator" count error per rules.
Tools using ESLint is easy to make for "Nice API".

14. ------ Rules have errors -------
[ [ 5,
'no-extra-parens',
'http://eslint.org/docs/rules/no-extra-parens' ],
[ 14, 'no-console', 'http://eslint.org/docs/rules/no-console' ],
[ 17,
'comma-dangle',
'http://eslint.org/docs/rules/comma-dangle' ] ]
------ Rules no errors -------
{
"no-dupe-args": 2,
"no-extra-boolean-cast": 2,
"no-constant-condition": 2,
"no-control-regex": 2,
"no-debugger": 2,
"no-cond-assign": 2,
"no-duplicate-case": 2,
"no-empty-character-class": 2,
"no-empty": 2,
"no-ex-assign": 2
}

15. Thank you!