Tooling

Tooling

Prettier

Prettier

Prettier

  • Opinionated code formatter
    • prettier.io
    • ​Zorgt dat code een consistente stijl heeft
    • Opinionated m.a.w. weinig opties over welke stijl

​

Voor & na

Voordelen

  • Bike shedding voorkomen
    • Tabs vs spaces
    • ​Double quotes vs single quotes
    • ...
  • Code is beter leesbaar wanneer consistent gestyled
  • Geen tijd verliezen met "details"

​

Aan de slag

​

Aan de slag

Je hebt nu 3 opties per project:

  • Prettier inschakelen met default settings:
    {rootDir}/.prettierrc.json → {}
  • Prettier inschakelen met custom settings:
    {rootDir}/.prettierrc.json → {...}
  • Prettier uitschakelen:
    maak geen .prettierrc.json aan

Pre-commit hooks

  • Wat als iemand geen VS Code gebruikt? 🤔
    • Pre-commit hook:
      formatteert staged files net vóór commit
      • Overslaan → git commit --no-verify

Prettier

// package.json
{
  // ...
  "scripts": {
    // ...
    "format": "prettier --write \"src/**/*.{js,jsx,html,css}\""
  }
}

Prettier

  • Oefening
    • Installeer Prettier in je eindopdracht
    • Formatteer alle .js, .jsx, .html, .css bestanden
      • Review zelf: wat heeft Prettier aangepast?
    • Commit & push

Tooling

ESLint

ESLint

  • Wat is het verschil met formatting?
    • Logic errors / code smells
      bv. debugger statements, complexity ...
    • Conventies
      bv. arrow functions, const, spread ...

ESLint

  • ESLint en Prettier werken elkaar soms tegen
    door historische formatting rules in ESLint
    → eslint-plugin-prettier 
// eslint.config.js
import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";

export default [
  // ...
  {
    // ...
    plugins: {
      // ...
      "eslint-plugin-prettier-recommended": eslintPluginPrettierRecommended
    }
  }
];
npm install --save-dev eslint-plugin-prettier eslint-config-prettier

ESLint

  • Hoe een linter gebruiken?
    • VS Code: ESLint extension
    • React-projecten met Vite hebben standaard
      een script om ESLint te runnen:
      npm run lint
    • Geen output? ✅

ESLint

  • Hoe een linter gebruiken?
    • Regels configureren in eslint.config.js
      • Off
      • Warn
      • Error
    • Command Line Interface (CLI)
      • npx eslint --fix .
        • ​Werkt enkel voor fixable rules (cf. docs)

ESLint

  • Wat als iemand geen VS Code gebruikt? 🤔
    • Zelfde als bij Prettier: pre-commit hook

ESLint

  • Oefening
    • Installeer eslint-plugin-prettier
    • Configureer eslintPluginPrettierRecommended
      (zie eerdere slide)
    • Optioneel: voeg een of meerdere regels toe
    • npm run lint

PGM3/5 - Tooling

By kareldesmet

Made with Slides.com

PGM3/5 - Tooling

  • 197

More from kareldesmet