2.4 Mobile development

Net zoals bij backend frameworks is de configuratie van Prettier volledig analoog aan de configuratie bij frontend frameworks. Voor ESLint zijn er enkele kleine verschillen.

ESLint

Een standaard Expo project bevat ESLint nog niet, om dit probleem op te lossen moeten we enkel een pnpm install uitvoeren. Daarnaast installeren we ook eslint-config-expo om volledige ondersteuning te krijgen voor Expo projecten.

Vervolgens kunnen we exact dezelfde stappen doorlopen als bij frontend frameworks. In de uiteindelijke config passen we volgende dingen aan:

• De ignores array bevat nu de .expo, .android en .ios folders aangezien deze gegenereerd zijn en geen dus niet gelint moeten worden. Daarnaast voegen we ook de ./components/ui map toe, deze bevat de GlueStack UI-componenten, die spijtig veel gebruik maken van any en andere dingen die tegen de linting regels ingaan.
• Het gedeelte waar de globals gedefinieerd worden is aangepast en importeert deze uit het eslint-config-expo package.
• De '// @ts-check' regel is weggehaald, er worden heel wat fouten getoond als we deze regel toevoegen, desondanks werkt de code wel. Tot dit probleem opgelost is, verwijderen we deze regel.

/eslint.config.mjs

import eslint from '@eslint/js'
import tsEslint from 'typescript-eslint'
import reactPlugin from 'eslint-plugin-react'
import reactPluginHooks from 'eslint-plugin-react-hooks'
import expoPlugin from 'eslint-config-expo'

export default tsEslint.config(
  eslint.configs.recommended,
  {
    rules: {
      'no-alert': ['error'],
      'no-debugger': ['error'],
      'no-console': ['error', {allow: ['warn', 'error']}],
    },
  },
  ...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: {
        ...expoPlugin.globals,
      },
    },
  },
  {
    plugins: {
      'react-hooks': reactPluginHooks,
    },
    rules: {
      ...reactPluginHooks.configs.recommended.rules,
      'jsx-quotes': ['error', 'prefer-double'],
      'react/jsx-curly-brace-presence': [
        'error',
        {
          props: 'never',
          children: 'never',
        },
      ],
      '@typescript-eslint/no-misused-promises': 'off',
      '@typescript-eslint/no-unused-vars': [
        'error',
        {
          args: 'all',
          argsIgnorePattern: '^_',
          caughtErrors: 'all',
          caughtErrorsIgnorePattern: '^_',
          destructuredArrayIgnorePattern: '^_',
          varsIgnorePattern: '^_',
          ignoreRestSiblings: true,
        },
      ],
    },
  },
  {
    ignores: [
      ".expo",
      "android",
      "ios",
      "eslint.config.mjs",
      './components/ui/*',
    ],
  }
)