15

Click here to load reader

20151117 es lint

Embed Size (px)

Citation preview

Page 1: 20151117 es lint

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

Page 2: 20151117 es lint

Self Introduction中島 滋 a.k.a ledsun

• Luxiar co.,ltd• Frontend JavaScript programer

• 忍者式テスト(Ninja Test)

• text annotation editor• graph editor

Page 3: 20151117 es lint

Why is the ESLint the bestIntroduce reasons for that ESLint is the best linter for JavaScript.

1. Great feature : ESLint can fix source code itself2. Reason 1 : Support ES63. Reason 2 : Error / Warning4. Reason 3 : Readable rule name5. Reason 4 : Nice Document6. Reason 5 : Nice API7. Extra : I Made a help tool

Page 4: 20151117 es lint

Great feature : ESLint can fix source code itselfSometimes 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.

Page 5: 20151117 es lint

Fixable rules below:

• no-extra-semi• eqeqeq• no-multi-spaces• array-bracket-spacing• block-spacing• comma-spacing• computed-property-spacing• eol-last

Page 6: 20151117 es lint

Reason 1 : Support ES6The ESLint support ES6.

JSCS support.

The JSHint does not support ES6.

Page 7: 20151117 es lint

Reason 2 : Error / WarningThe 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.

Page 8: 20151117 es lint

Reason 3 : Readable rule nameNames 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

Page 9: 20151117 es lint

How about JSHint:

• E001• E002

oops!

Page 10: 20151117 es lint

Reason 4 : Nice DocumentAll rule is documented at http://eslint.org/docs/rules/

Every document for rules has sample code. cf. http://eslint.org/docs/rules/comma-dangle

Page 11: 20151117 es lint

Reason 5 : Nice APIA 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: ";" }}

Page 12: 20151117 es lint

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!?

Page 13: 20151117 es lint

Extra : I Made a help toolI 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".

Page 14: 20151117 es lint

------ 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}

Page 15: 20151117 es lint

Thank you!