Linting

at the Next Level

Will Klein

Quick Survey

What is linting?

Compilers

Lexical Analysis

Syntactic Analysis

Linters

• Syntax checking

Linters

• Syntax
• Code style
• Anti-patterns or best practices

Linting HTML

Quick Story

Why lint HTML?

Browsers

Two ways

• Lint the output
• Lint the source

Linting HTML Output

Linting HTML Source

Linting Stylesheets

The Tools

• CSS Lint
• Stylelint

Linting JavaScript

JavaScript

Complexity

Conventions

The Tools

• JSLint
• JSHint
• ESLint

ESLint

Adoption

Benefits

• Catch errors
• Improve code quality
• Speed up developers
• Share best practices

Process

• Convince everyone (optional)
• npm install
• Import a community config

or

• Create a config based on what you already do

Evolve

• What bites you
• Code reviews
• Defects
• Write your own rules

Thank you!

http://willkle.in

will.klein@gmail.com

@WillsLab