20151117 es lint

ESLint is the best linter for JavaScript now中島 滋 a.k.a ledsun2015/11/24 第１回 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!