2.2 Frontend frameworks

Een project dat in hoofdstuk 1 aangemaakt werd met pnpm create vite bevat de configuratie voor OxLint, aangezien we in deze cursus gebruik maken van Biome is er nog wat configuratie nodig.

Hieronder bespreken we hoe we deze kunnen toevoegen aan een bestaand project.

OxLint verwijderen

Begin met de OxLint configuratie te verwijderen die door pnpm create vite aangemaakt is.

Figuur 0: Te verwijderen OxLint configuratie

Nu de configuratiefile weg is, verwijderen we ook het npm package.

Biome installatie

Voor de basis installatie van Biome verwijzen we door naar de linting-guide voor de JavaScript cursus.

Uitbreidingen voor de frontend cursus

Het grootste deel van de linting regels zijn reeds geactiveerd in de handleiding waarnaar hierboven verwezen wordt. We voeren echter wel volgende kleine wijzigingen door:

• De noNonNullAssertion regel wordt verstrengd, waar deze operator in de JavaScript cursus regelmatig nodig was, is dit in de frontend cursus heel zelden het geval, daarom wordt het error-niveau op warn gezet.
• De useConsistentCurlyBraces regel die onnodige accolades in JSX-code verbiedt wordt geactiveerd.
• Het React domain wordt geactiveerd zodat de recommended React regels beschikbaar zijn.
• De jsxQuoteStyle regel wordt gebruikt om dubbele quotes te verplichten in JSX-properties die geen JavaScript expressie zijn.
• Aangezien een React project verschillende mappen kan bevatten die niet relevant zijn voor linting, zoals de public of dist map, configureren we linting enkel voor de src map.
• De noConsole regel wordt gebruikt om het gebruik van console.log en console.info te verbieden aangezien deze de website kunnen vertragen en niet thuishoren in een productiebuild.

/biome.json

{
  "$schema": "https://biomejs.dev/schemas/2.5.7/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "files": {
    "ignoreUnknown": false,
    "includes": ["src/**"]
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineEnding": "lf",
    "lineWidth": 120,
    "attributePosition": "auto",
    "expand": "auto"
  },
  "linter": {
    "enabled": true,
    "rules": {
      "preset": "recommended",
      "suspicious": {
        "noAlert": "error",
        "noConsole": {
          "level": "error",
          "options": {
            "allow": [
              "error",
              "warn"
            ]
          }
        }
      },
      "style": {
        "useImportType": "error",
        "noNonNullAssertion": "warn",
        "useConsistentCurlyBraces": "error"
      },
      "correctness": {
        "noUnusedFunctionParameters": "error",
        "noUnusedVariables": "error"
      }
    },
    "domains": {
      "react": "recommended"
    }
  },
  "javascript": {
    "formatter": {
      "quoteProperties": "asNeeded",
      "trailingCommas": "all",
      "semicolons": "asNeeded",
      "arrowParentheses": "asNeeded",
      "bracketSameLine": false,
      "quoteStyle": "single",
      "attributePosition": "auto",
      "bracketSpacing": false,
      "jsxQuoteStyle": "double"
    }
  },
  "html": {
    "formatter": {
      "selfCloseVoidElements": "always"
    }
  },
  "assist": {
    "enabled": true,
    "actions": {
      "source": {
        "organizeImports": "on"
      }
    }
  }
}

Vanaf hoofdstuk 3 gebruiken we TailwindCSS, hiervoor moet de CSS-parser configuratie nog aangepast worden.

/biome.json

{
  "$schema": "https://biomejs.dev/schemas/2.5.7/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "files": {
    "ignoreUnknown": false,
    "includes": ["src/**"]
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineEnding": "lf",
    "lineWidth": 120,
    "attributePosition": "auto",
    "expand": "auto"
  },
  "linter": {
    "enabled": true,
    "rules": {
      "preset": "recommended",
      "suspicious": {
        "noAlert": "error",
        "noConsole": {
          "level": "error",
          "options": {
            "allow": [
              "error",
              "warn"
            ]
          }
        }
      },
      "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"
      }
    }
  },
  "css": {
    "parser": {
      "tailwindDirectives": true
    }
  }
}