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

​

Prettier

Prettier

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

​

Prettier

  • Hoe een formatter gebruiken?

​

Prettier

  • Hoe een formatter gebruiken?
    • Enable Prettier with default settings:
      {rootDir}/.prettierrc = {}
    • Enable Prettier with custom settings:
      {rootDir}/.prettierrc = {...}
    • Disable Prettier:
      maak geen .prettierrc aan

Prettier

  • Wat als iemand geen VS Code gebruikt? 🤔
    • Pre-commit hook
      • Formatteert staged files net vóór commit
      • Overslaan → git commit --no-verify
        • Oplossing? Vóór elke build, verifieer of de code geformatteerd werd.
          Indien niet → FAIL

Prettier

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

Prettier

  • Oefening
    • Maak een nieuwe feature branch
    • Installeer Prettier
    • Formatteer alle .js, .jsx, .html, .css bestanden
    • Commit & push
    • Open een pull request naar develop
      • Review zelf: wat heeft Prettier aangepast?

Prettier

  • Oefening
    • Bekijk in de documentatie van Prettier welke opties je allemaal kan configureren
    • Schrijf een optie op waar je zelf een mening over hebt en pas aan in .prettierrc

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
    • Merge eerst de pull request van Prettier (!)
    • Update uw develop branch lokaal
    • Maak een nieuwe feature branch
    • Installeer eslint-plugin-prettier
    • Configureer eslintPluginPrettierRecommended
      (zie eerdere slide)
    • Optioneel: voeg een of meerdere regels toe

PGM4/7 - Tooling

By kareldesmet

Made with Slides.com

PGM4/7 - Tooling

  • 82

More from kareldesmet