Un secret facile pour rendre votre code automatiquement plus lisible

(Ryan Chong) (2 décembre 2020)

Tabulations ou espaces?

Telle est la question. Les développeurs sont extrêmement avisés. Ainsi, lorsque vient le temps de décider de quelque chose qui semble trivial comme lutilisation donglets ou despaces, cela pourrait rapidement évoluer en guerres de flammes. Mon camp contre votre camp.

Mais ce nest pas la seule chose sur laquelle les développeurs se disputent. Autrefois, nous recevions souvent beaucoup de commentaires sur la mise en forme de notre code pendant le processus de révision du code.

Par exemple, nous recevrons des commentaires sur:

  • Indentation incohérente
  • Utilisation incohérente des guillemets simples et doubles
  • Insertion incohérente de points-virgules
  • Utilisation incohérente des tabulations et des espaces

Heureusement, les développeurs sont également des gens très efficaces. Il na pas fallu longtemps avant quils décident que passer des jours à se disputer sur quelle convention lemporte sur lautre nest pas la meilleure utilisation du temps.

Et ainsi, ils ont trouvé une solution: Formateur de code .

Voici comment cela fonctionne. Tout dabord, définissez une configuration standard. Ensuite, partagez la configuration standard avec tous ceux qui travaillent sur le même projet. Le formateur de code formatera automatiquement votre code en fonction de cette configuration avant quil natteigne le référentiel de code. En conséquence, le code de chacun sera cohérent, quelle que soit sa mise en forme dorigine.

Il existe de nombreuses variantes de formateur de code, mais finalement un standard émerge. Plus joli est largement considéré par beaucoup comme le standard du développement FE. Je vais vous expliquer comment cela fonctionne dans un instant.

Mais dabord, parlons dinstaller Prettier.

Installer Prettier

Si vous ne lavez pas fait, allez à votre éditeur de code préféré et installez lextension. Nous utilisons Visual Studio Code (VS Code). Dans VS Code, cliquez simplement sur le panneau des extensions et recherchez «Plus joli». Vous verrez quelque chose de similaire à la capture décran ci-dessous.

Configurer une plus jolie configuration

Ensuite, nous devons définir la plus jolie configuration. Cest pour dire à plus joli de formater le code en utilisant des tabulations ou des espaces, des guillemets simples ou doubles et ainsi de suite. Vous pouvez trouver la liste complète de la configuration ici .

Notre plus jolie configuration

Ensuite, dans VS Code settings.json, activez le formateur javascript et choisissez également quand formater.

Our settings.json

Vous pouvez également ouvrir la version GUI (Préférence> Ouvrir les paramètres utilisateur) et basculer manuellement les paramètres appropriés.

Nos paramètres dinterface graphique

Fonctionnement de Prettier

Prenons lexemple au dessous de. La première capture décran montre un morceau de code javascript dans sa version non formatée. Il est difficile de savoir où le code commence et se termine.

Maintenant, avec un formateur de code comme Prettier, tout ce que nous avons à faire est de sauvegarder et tout sera joliment joliment comme ceci:

code formaté
Après: Code formaté

Résumé

Le formatage manuel du code nest pas la meilleure utilisation du temps. Choisissez une norme, puis implémentez cette norme en tant que configuration. Enfin, vous ne passerez pas plus de temps à commenter les formats de code lors de votre prochaine révision de code.

TeamSpirit recrute des ingénieurs logiciels seniors / juniors à Singapour. Si vous souhaitez travailler avec des collègues sympathiques qui apprécient vos suggestions et vous donnent une grande autonomie, veuillez envoyer votre CV à recruter.sg @ teamspirit.com