Aller au contenu

Organiser les imports

Un fichier React typique peut contenir quelques dizaines de lignes import : - imports React (hooks standard) : useState, useEffect, ... - imports du framework utilisé (React-Native, Next, ...) : View, Text, ... - imports de librairies tierces : axios, swr, navigation, ... - imports de composants de l'application

Exemple :

import { useContext, useEffect, useMemo, useState } from 'react';
import Link from 'next/link';
import axios from 'axios';
import useSWR from 'swr';
import { gettext as _ } from 'gettextjs';
import { useFormContext } from 'react-hook-form';

import { Box, CircularProgress, FormGroup, Grid, MenuItem, Stack, Tab } from '@mui/material';
import { TabContext, TabList, TabPanel } from '@mui/lab';
import DeleteIcon from '@mui/icons-material/Delete';
import PersonIcon from '@mui/icons-material/Person';

import AppContext from 'ldc-next/app/appcontext';
import { AdminOnly, Mask, NonAdminOnly } from 'ldc-next/lib/authz-helpers';
import { AutocompleteControl, CheckboxControl, DualPasswordControl, ReadOnlySelectControl, SelectControl, TextControl } from 'ldc-next/ui/form';
import { AdresseSection, CorrespondanceSection, GeneralInfoSection, Section } from '@/app/admin/_components/sections';
import { setCatalog } from '@/lib/gettext-utils';
import { FunctionBox } from '@/ui';

Dans un but de lisibilité, il est recommandé d'organiser les imports selon vos propres conventions.

À titre d'exemple, dans le code ci-dessus, les conventions suivantes sont utilisées :

Les imports sont organisés en 3 groupes :

  1. React, Framework et librairies tierces. Dans l'ordre :
  2. imports React
  3. import du framework (ici, Next.js)
  4. Axios
  5. SWR
  6. Autres (gettext, react-hook-form, Yup, ...)
  7. Composants de l'interface graphique (Material UI)
  8. imports de @mui/material (composants de base), en ordre alphabétique
  9. imports de @mui/lab (composants "expérimentaux"), en ordre alphabétique
  10. imports des icônes, en ordre alphabétique sur les fichiers source
  11. Composants de l'utilisateur
  12. D'abord les composants "communs" (librairie ldc-next), triés sur les fichiers source et les noms de composants
  13. Puis les composants "génériques" de l'application, triés sur les fichiers source et les noms de composants

Ce n'est qu'une suggestion, vous êtes libres de faire vos propres règles (ou pas !)

Note : organisation des imports en Python

La syntaxe d'organisation des codes sources Python suit généralement les préconisations de la recommandation PEP-8

Note : dans le back-end MobApp, le make check utilise flake8, pour vérifier la conformité du style du code vis-à-vis de PEP-8.

Les recommandations concernant les imports indiquent notamment :

Imports should be grouped in the following order: - Standard library imports. - Related third party imports. - Local application/library specific imports.

You should put a blank line between each group of imports.