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 :
- React, Framework et librairies tierces. Dans l'ordre :
- imports React
- import du framework (ici, Next.js)
- Axios
- SWR
- Autres (gettext, react-hook-form, Yup, ...)
- Composants de l'interface graphique (Material UI)
- imports de
@mui/material
(composants de base), en ordre alphabétique - imports de
@mui/lab
(composants "expérimentaux"), en ordre alphabétique - imports des icônes, en ordre alphabétique sur les fichiers source
- Composants de l'utilisateur
- D'abord les composants "communs" (librairie
ldc-next
), triés sur les fichiers source et les noms de composants - 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.