2.3 Backend frameworks

De installatie van ESLint en Prettier is heel gelijkaardig aan de installatie die we gebruikt hebben bij frontend frameworks. Er zijn enkele kleine toevoegingen nodig voor ESLint, maar de basis is hetzelfde. Voor Prettier is er geen enkel verschil. De installatie-instructies worden hier dan ook niet herhaald.

ESLint

Een standaard Next project bevat de eslint-config-next library al, deze library is echter niet bruikbaar als we gebruik willen maken van het nieuwe flat-config formaat. Om alles werkend te krijgen moet onderstaande library installeren (die intern door eslint-config-next gebruikt wordt).

Daarnaast wordt er ook een beperkte ESLint configuratie wordt meegeleverd in .eslint.config.mjs die we overschrijven zoals beschreven bij frontend frameworks.

We breiden we de ESLint configuratie uit de frontend cursus uit met de configuratie die in het standaardbestand aanwezig was. Daarnaast voegen we de .next directory toe aan de ignore list, deze map bevat de development en productiebuilds van een Next applicatie en moet dus niet mee gelint worden. Tenslotte voegen we de ./generated map ook toe aan de ignorelist, vanaf les 2 worden de automatisch gegenereerde interfaces toegevoegd aan deze map. Omdat deze code automatisch gegenereerd wordt, regelmatig overschreven wordt en normaliter niet in git zit, heeft het geen zin om deze code te linten.

eslint.config.mjs

// @ts-check

import eslint from '@eslint/js'
import tsEslint from 'typescript-eslint'
import reactPlugin from 'eslint-plugin-react'
import reactPluginHooks from 'eslint-plugin-react-hooks'
import globals from 'globals'
import nextPlugin from '@next/eslint-plugin-next'

export default tsEslint.config(
  eslint.configs.recommended,
  {
    rules: {
      'no-alert': ['error'],
      'no-debugger': ['error'],
      'no-console': ['error', {allow: ['warn', 'error']}],
    },
  },
  // @ts-expect-error This is an error in the TypeScript types in ESLint, the code is correct.
  tsEslint.configs.recommendedTypeChecked,
  {
    languageOptions: {
      parserOptions: {
        ecmaVersion: 'latest',
        projectService: true,
      },
    },
  },
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    ...reactPlugin.configs.flat.recommended,
    // Required when using React 17+.
    ...reactPlugin.configs.flat['jsx-runtime'],
    languageOptions: {
      ...reactPlugin.configs.flat.recommended.languageOptions,
      globals: {
        ...globals.serviceworker,
        ...globals.browser,
      },
    },
    rules: {
      "jsx-quotes": ["error", "prefer-double"],
      "react/jsx-curly-brace-presence": ["error", {
        props: "never",
        children: "never",
      }],
      "@typescript-eslint/consistent-type-imports": "error",
      '@typescript-eslint/no-unused-vars': [
        'error',
        {
          argsIgnorePattern: '^_',         // Ignore unused function arguments if they start with _
          varsIgnorePattern: '^_',         // Ignore unused variables if they start with _
          caughtErrorsIgnorePattern: '^_', // Ignore unused caught errors if they start with _
        },
      ],
    }
  },
  {
    plugins: {
      "react-hooks": reactPluginHooks,
    },
    rules: {
      ...reactPluginHooks.configs.recommended.rules,
    },
  },
  {
    plugins: {
      '@next/next': nextPlugin,
    },
    rules: {
      ...nextPlugin.configs.recommended.rules,
      ...nextPlugin.configs['core-web-vitals'].rules,
    },
  },
  {
    ignores: [
      "tailwind.config.js",
      "postcss.config.js",
      "eslint.config.mjs",
      '.next/*'
      './src/generated/*',
    ],
  }
)