Du chaos à la clarté : formater le code React pour une base de code propre et lisible

Lors du démarrage d'un nouveau projet, il existe une expérience très courante parmi les développeurs React. Vous commencez à vous sentir bien quant à la propreté et à la lisibilité de votre code, seulement pour écrire une poignée de fonctions ou de composants et regarder lentement votre base de code sombrer dans le chaos. Vous vous retrouvez à faire défiler de haut en bas, de gauche à droite, à relire les lignes de code à plusieurs reprises et à passer de fichier en fichier. Une fois que vous avez terminé une fonctionnalité, vous espérez ne plus jamais avoir à ouvrir ce fichier, car vous savez combien de temps il faudra pour trouver une seule fonction ou variable, sans parler de modifier ou de modifier cette fonctionnalité.

Dans cet article, nous examinerons le rôle que joue le formatage pour rendre votre base de code propre et lisible. Nous explorerons également les normes de l’industrie et les meilleures pratiques pour parvenir à un formatage cohérent.

Pourquoi formater votre code ?

Le formatage est crucial pour la lisibilité et la maintenabilité de votre code. Mais comment ?

Un code bien formaté permet de séparer visuellement les différentes parties de votre code, ce qui facilite le suivi du flux logique. Une indentation appropriée met en évidence la relation entre les composants, éléments ou sélecteurs parents et enfants. Un formatage cohérent améliore votre capacité à déboguer, corriger et maintenir rapidement votre code. Lorsque vous collaborez avec des membres de l’équipe qui suivent les mêmes règles de formatage, il devient plus facile de comprendre le code de chacun sans confusion.

La charge mentale réduite est un autre avantage d’un bon formatage. Un code propre nécessite moins d'effort mental pour être compris, ce qui vous permet de vous concentrer davantage sur la résolution de nouveaux problèmes au lieu de déchiffrer des blocs de code mal formatés.

Lorsqu'une équipe adhère à un style cohérent, tout le monde peut contribuer sans perdre de temps à reformater les blocs de code en fonction de ses préférences personnelles. Un bon formatage apporte également discipline et professionnalisme à la base de code.

Enfin, la compatibilité des outils est un avantage non négligeable. Les développeurs utilisent des linters, des modules complémentaires et des IDE qui reposent sur un formatage cohérent. Pour tirer pleinement parti de ces outils et bénéficier de fonctionnalités telles que la saisie semi-automatique et la mise en évidence des erreurs, votre base de code a besoin d'un formatage approprié. Mais comment y parvenir ?

Qu’est-ce qu’implique le formatage d’une base de code ?

Lorsque nous parlons de formatage d'une base de code, nous faisons généralement référence à plusieurs aspects : l'indentation, la longueur de ligne, les conventions de dénomination, l'espacement, les accolades et les parenthèses, l'utilisation cohérente des guillemets, l'utilisation des points-virgules, la structure des fichiers et des dossiers et l'utilisation appropriée de Commentaires. Passons maintenant aux normes de l'industrie sur la façon dont elles sont utilisées et mises en œuvre.

1. Indentation
   L'indentation est l'utilisation d'espaces blancs pour organiser visuellement le code dans une hiérarchie. La norme de l'industrie ici est d'utiliser 2 ou 4 espaces et d'éviter d'utiliser des tabulations. Selon le guide de style Airbnb pour javascript et React, vous devez utiliser 2 espaces. En effet, il maintient des niveaux d'imbrication cohérents et améliore la lisibilité globale de votre code.

2. Longueur de la ligne
   La longueur de ligne fait ici référence à la mesure dans laquelle le code que vous écrivez sur une seule ligne doit s'étendre. La norme industrielle ici est de conserver une ligne entre 80 et 100 caractères. De nombreux guides, en particulier PEP 8 et plus jolis, recommandent 80 caractères. En effet, il empêche le défilement horizontal et fonctionne généralement bien sur différentes tailles d'écran. mais cela signifie-t-il devoir compter pendant que vous codez ? non, du moins pas lorsque vous utilisez des éditeurs de code comme vscode. L'image ci-dessous vous montre comment savoir combien de caractères se trouvent sur une ligne particulière. L'image ci-dessous montre que vous êtes à la ligne 44 et que vous êtes sur le 93ème caractère. vous pouvez le trouver en bas à droite sur votre éditeur vsCode si vous n'avez pas touché aux paramètres par défaut.

1. Conventions de dénomination
   
   Il s'agit d'un ensemble de règles permettant de nommer les choses de manière cohérente. Une dénomination claire, significative et précise est essentielle pour écrire un code facile à lire, à comprendre et à maintenir. La convention de dénomination la plus populaire pour les variables et les fonctions consiste à utiliser camelCase (un moyen de séparer les mots dans une phrase en mettant la première lettre de chaque mot en majuscule et en n'utilisant pas d'espaces). En ce qui concerne les composants de réaction, PascalCase doit être utilisé d'autant plus que la première lettre d'un composant doit être majuscule comme indiqué dans la documentation de réaction et pour les constantes, la casse du serpent supérieur est recommandée. Cette section n'a pas rendu justice à la dénomination. Si je devais me lancer dans la dénomination en profondeur ici, cet article deviendra trop long. Si vous souhaitez en savoir plus, veuillez consulter cet article sur la convention de dénomination.

2. Espacement
   Pour l'espacement, il est recommandé d'ajouter des espaces autour des opérateurs pour plus de clarté, d'autant plus que certains opérateurs, lorsqu'ils sont utilisés en combinaison, effectuent une opération différente. il est également recommandé d'utiliser des lignes vides pour séparer les sections logiques du code. essayez de regrouper et d'utiliser des lignes vides pour déclarer et affecter des variables d'espace à partir de la déclaration de fonction et de la logique.

3. Accolades et parenthèses
   Selon le guide de style Airbnb, il ne devrait y avoir aucune accolade pendante, ce qui signifie que vous devez garder toutes les accolades ou parenthèses fermantes correctement alignées avec les accolades ou parenthèses ouvrantes correspondantes.

4. Citations cohérentes
   Lors de l'utilisation de guillemets, il est recommandé d'utiliser soit des guillemets simples '', soit des guillemets doubles "" tout au long du projet tout en essayant d'éviter toute utilisation inutile d'une combinaison des deux.

5. Points-virgules
   Tout comme avec les guillemets, décidez-vous soit d'utiliser un point-virgule pour terminer vos expressions, affectations et lignes de code, soit de ne pas utiliser de point-virgule du tout, mais quelle que soit votre décision, respectez-la et soyez cohérent. Personnellement, je recommanderais l'utilisation de points-virgules pour éviter les problèmes liés à l'insertion automatique de points-virgules.

6. Structure des fichiers et dossiers
   Pour la structure des fichiers et des dossiers, des facteurs tels que la taille du projet et la pile technologique déterminent principalement la structure de vos fichiers et dossiers, mais il y a 2 règles générales à suivre. 1 Regroupez les fichiers associés. 2 utilisez des noms de fichiers significatifs.

7. Commentaires
   Une base de code peut facilement être regroupée avec du code, alors n'aggravez pas la situation en abusant des commentaires. si vous avez de bonnes conventions de dénomination et écrivez du code propre sans anti-modèle, vous devriez généralement pouvoir éviter d'utiliser des commentaires. Tout comme Robert c. Martin dit que "les commentaires ne sont pas mauvais en soi", mais ils sont souvent "un signe d'incapacité à exprimer une intention dans le code lui-même". Les commentaires ont leur place dans votre code, ils montrent pourquoi un code existe et non comment fonctionne un bloc de code. , les commentaires doivent donc être utilisés si votre code implique une décision non évidente ou une solution de contournement. évitez donc les anti-modèles pour éliminer le besoin d'expliquer le comment de votre code et évitez d'expliquer ce que le code exprime déjà.

Vous trouverez ci-dessous des liens vers certains des guides de style de paramétrage de l'industrie

Guide de style Javascript Airbnb.
Guide de style StandardJs
De plus jolis défauts
.

Donc, en conclusion, formater correctement votre code n'est pas seulement une question d'esthétique. Il améliore considérablement la lisibilité, la maintenabilité et l'évolutivité de votre base de code et en adoptant les normes populaires de l'industrie, vous pouvez garantir que votre code est cohérent et propre

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!