2.1 JavaScript

01-04-2026Ongeveer 6 minutenOngeveer 884 woorden

2.1 JavaScript

We beginnen met Biome the installeren, hiervoor gebruiken we de -E vlag om een exacte versie te installeren. Dit is belangrijk in een productieomgeving omdat zelfs patch versies lichte verschillen kunnne introduceren in de linting en formatting regels, wat kan leiden tot inconsistenties in de codebase.

Het is vanzelfsprekend dat we Biome als dev-dependency installeren, aangezien het alleen nodig is tijdens de ontwikkeling en niet in productie.

Nu dat Biome geïnstalleerd is, moet het geconfigureerd worden. Dit gebeurt via biome.json in de root van het project. Om het bestand aan te maken gebruiken we de volgend commando:

Formatting

In de JavaScript vakken kiezen we ervoor om code te formatteren volgens onderstaande regels.

Algemene regels:

Gebruik 2 spaties voor indentatie.
Gebruik lf (linefeed) voor het einde van regels in plaats van de standaard crlf (carriage return + linefeed) die op Windows systemen gebruikt wordt.
Handteer een maximum lijnlengte van 120 tekens.
Zet HTML-attributen enkel op een nieuwe regel als de regel langer is dan 120 tekens.
Gebruik een nieuwe lijn om de sluitende tag van een HTML-element te plaatsen als het element meerdere regels beslaat.

JavaScript/TypeScript regels:

Gebruik enkel quotes voor object keys wanneer dit noodzakelijk is.
Gebruik trailing commas in object literals, array literals, function parameters, en function calls (als deze op meerdere lijnen staan).
Plaats geen puntkomma aan het einde van elke regel tenzij dit absoluut noodzakelijk is^[1].
Gebruik enkel ronde haken in arrow functies als dit nodig is, bijvoorbeeld bij meerdere parameters of geen parameters.
Gebruik enkele aanhalingstekens voor strings.

HTML regels:

Gebruik altijd een / om een void element te sluiten, bijvoorbeeld <br /> in plaats van <br>.

Deze regels vertalen zich naar onderstaande Biome config.

/biome.json

{
  "$schema": "https://biomejs.dev/schemas/2.4.10/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "files": {
    "ignoreUnknown": false
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineEnding": "lf",
    "lineWidth": 120,
    "attributePosition": "auto",
    "expand": "auto"
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "javascript": {
    "formatter": {
      "quoteProperties": "asNeeded",
      "trailingCommas": "all",
      "semicolons": "asNeeded",
      "arrowParentheses": "asNeeded",
      "bracketSameLine": false,
      "quoteStyle": "single",
      "attributePosition": "auto",
      "bracketSpacing": false
    }
  },
  "html": {
    "formatter": {
      "selfCloseVoidElements": "always"
    }
  },
  "assist": {
    "enabled": true,
    "actions": {
      "source": {
        "organizeImports": "on"
      }
    }
  }
}

Linting

De linting configuratie is minder uitgebreid dan de formatting configuratie, aangezien we ervoor kiezen om de default regels van Biome te gebruiken.

We voeren volgende aanpassingen door aan de default regels:

Imports die enkel als type gebruikt worden moeten gebruik maken van import type in plaats van import. Dit was al het geval in de default configuratie, maar onze configuratie zorgt ervoor dat een fout tegen deze regel een error is in plaats van een warning.
We schakelen de regel die non-null assertions verbiedt uit, aangezien deze in sommige gevallen wel nodig zijn of enkel vervangen kunnen worden door verschillende if statements, wat de leesbaarheid van de code kan verminderen.
Ook de regel die on ongebruikte functie parameters verbiedt, wordt aangepast van een warning naar een error, aangezien dit vaak een indicatie is van een fout in de code. Als een functie parameter noodzakelijk is maar niet gebruikt wordt, moet dit expliciet aangegeven worden met een discard prefix, bijvoorbeeld function foo(_unusedParam: string) { ... }.
De regel die ongebruikte variabelen verbiedt, wordt ook aangepast van een warning naar een error.
Omdat de alert, prompt, en confirm functies een slechte gebruikerservaring bieden, verbieden we het gebruik hiervan in onze codebase. De drie functies worden allemaal verboden door de noAlert regel.
Omdat de console bedoeld is voor debugging en niet voor productie, verbieden we ook het gebruik van de console in onze codebase.

/biome.json

{
  "$schema": "https://biomejs.dev/schemas/2.4.10/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "files": {
    "ignoreUnknown": false
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineEnding": "lf",
    "lineWidth": 120,
    "attributePosition": "auto",
    "expand": "auto"
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "suspicious": {
        "noAlert": "error",
        "noConsole": "error"
      },
      "style": {
        "useImportType": "error",
        "noNonNullAssertion": "off"
      },
      "correctness": {
        "noUnusedFunctionParameters": "error",
        "noUnusedVariables": "error"
      }
    }
  },
  "javascript": {
    "formatter": {
      "quoteProperties": "asNeeded",
      "trailingCommas": "all",
      "semicolons": "asNeeded",
      "arrowParentheses": "asNeeded",
      "bracketSameLine": false,
      "quoteStyle": "single",
      "attributePosition": "auto",
      "bracketSpacing": false
    }
  },
  "html": {
    "formatter": {
      "selfCloseVoidElements": "always"
    }
  },
  "assist": {
    "enabled": true,
    "actions": {
      "source": {
        "organizeImports": "on"
      }
    }
  }
}

Gebruik van Biome

Om Biome te gebruiken, voegen we enkele commando's toe aan het package.json bestand van het project.

Het lint commando controleert alle bestanden op fouten en lost de dingen die veilig opgelost kunnen worden automatisch. Het lint-fix commando doet iets gelijkaardigs, maar lost ook problemen op die een onveilige fix hebben en de semantische betekenis van de code kunnen veranderen zoals het verwijderen van ongebruikte variabelen of imports. Beide commando's printen de fouten die niet automatisch opgelost kunnen worden naar de terminal.

Het format commando formatteert alle bestanden volgens de regels die we eerder besproken hebben.

/package.json

{
  "name": "javascript_lecture7_example_complete",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "biome check --write",
    "lint-fix": "biome check --write --unsafe",
    "format": "biome format --write"
  },
  "devDependencies": {
    "@biomejs/biome": "2.4.10",
    "typescript": "~5.9.3",
    "vite": "^8.0.1"
  }
}

Deze commando's kunnen gebruikt worden als volgt:

Een puntkomma kan nodig zijn om te beschermen tegen automatic semicolon insertion. ↩︎