Click here to load reader
Upload
nakajima-shigeru
View
324
Download
1
Embed Size (px)
Citation preview
ESLint is the best linter for JavaScript now中島 滋 a.k.a ledsun2015/11/24 第1回 Machida Tech Night
Self Introduction中島 滋 a.k.a ledsun
• Luxiar co.,ltd• Frontend JavaScript programer
• 忍者式テスト(Ninja Test)
• text annotation editor• graph editor
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
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.
Fixable rules below:
• no-extra-semi• eqeqeq• no-multi-spaces• array-bracket-spacing• block-spacing• comma-spacing• computed-property-spacing• eol-last
Reason 1 : Support ES6The ESLint support ES6.
JSCS support.
The JSHint does not support ES6.
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.
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
How about JSHint:
• E001• E002
oops!
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
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: ";" }}
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!?
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".
------ 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}
Thank you!