05 Code Analysis & Format
JavaScript Ecosystem

Why Code Analysis?

  • Prevent errors
  • Enforce code style
  • JavaScript has no compiler
  • Avoid anti-patterns

Static Code Analysis

  • Call hierarchy
  • Usage
  • Code metrics

support the developer while coding 👌

Linting

Linting is the process of running a program that will detect common code smells.

The program can be integrated into automatic builds to improve stability and maintainability.

Linting

Lint: undesirable bits of fiber and fluff Depiction of lint

History

2002

JSLint logo

2010

JSHint logo

2013+

ESLint logo

ESLint

Why Code Format?

  • Uniform readablity
  • Uniformly formatted code
  • Uniformly applied style guides/rules

Prettier

  • Opinionated code formatter
  • Fully automatic
  • Commonly accepted style rules
  • Almost nothing is customizable
  • Pragmatic & Simple
Stop wasting time debating over styles !

Prettier - widely supported

  • Javascript, JSX, Flow, TypeScript, ...
  • Angular, React, Vue, ...
  • CSS, Less, SCSS, ...
  • Html, Markdown, Yaml, Json, ...
  • Also: Elm, Java, Python, Ruby, ...

👉🏼 Prettier

Questions?

Exercise Time 🧠

  • Run ToDo App, add a todo and check the console output
  • Install and configure with npm init @eslint/config
  • Run eslint src/**
  • Add npm step "lint"