Fyrirlestur – eslint & prettier

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

---

Lint á JavaScript kóða

• Hafa verið nokkur tól í gegnum tíðina
• jslint.com frá Douglas Crockford árið 2002
• jshint sem stillangur linter sem hægt var að keyra sem CLI tól árið 2011
• strict mode sem viðbót við JavaScript í ECMAScript 5

---

strict mode

• Opt-in á að JavaScript túlkur leyfi ekki kóða sem getur valdið villum
• T.d. að skilgreina breytu án var, let, eða const
• Setjum strenginn strict mode; efst í skrá, eða efst í fall
• Þegar við notum JavaScript modules er allur kóði í strict mode

---

function strictfail() {
  'use strict';
  foo = 1;
}
strictfail();
// ReferenceError: assignment to undeclared
// variable foo

---

eslint

• eslint er mest notaði JavaScript linter í dag og sá sem við munum nota
• Skrifaður með það í huga að vera almennur og bjóða upp á plugins
• Skilgreinum reglur í .eslintrc skrá í rót verkefnis

---

eslint uppsetning

• Setjum upp eslint fyrir verkefni
  • npm install eslint --save-dev
• Notum eslint --init til að útbúa .eslintrc skrá (eða .eslintrc.js)
  • Þurfum að keyra með npx eslint --init ef eslint er ekki uppsett global

---

• npx er skipun sem kemur með NPM og keyrir forrit uppsett með npm án þess að nota script innan package.json

---

• Svörum spurningum um hvernig við viljum nota eslint
• Best að fylgja stöðlum
  • Við ætlum að fylgja airbnb JavaScript Style Guide

---

module.exports = {
  extends: 'airbnb-base',
};

---

• Búum til script í package.json
  • "test": "eslint *.js **/*.js"
  • Keyrum og skoðum allar .js skrár í rót og öllum möppum
  • npm test keyrir skipun (sama og npm run test)

---

Reglur stilltar

• Viljum láta eslint vita að við séum að vinna í vafra
  • Fáum ekki villur ef við vísum í document eða window
• Bætum við í .eslintrc
• Getum líka stillt sérstaklega hverja reglu innan rules

---

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb-base',
  ],
  parserOptions: {
    ecmaVersion: 12,
  },
  rules: { },
};

---

Slökkt á reglum

• Getum slökkt á ákveðnum reglum í kóða
• Per skrá: /* eslint-disable <regla> */
• Per línu: /* eslint-disable-line */
• Þurfum stundum en ættum almennt að forðast, lögum villur frekar

---

prettier

• prettier er „opinionated code formatter“
• Sér um að móta kóðann okkar skv. reglum
• Getum notað þær sem við skilgreinum með eslint

---

• Setjum upp
• Ákveðum hvort við viljum að keyri þegar við viljum (með script)
• Eða í hvert skipti sem við vistum!
  • Skrítið í byrjun en getur orðið partur af vinnuflæði okkar

---

• Þurfum eslint-config-prettier til að eslint virki með prettier
• Getur orðið vesen að eltast við réttar útgáfur og nákvæmlega réttar stillingar á öllum stöðum
• T.d. þurfum quote_type = single í .editorconfig til að prettier virði að við viljum single quote yfir double

---

• eslint & prettier dæmi