Présentation de l'analyse statique en JavaScript

L'analyse statique en JavaScript peut considérablement améliorer la qualité de votre code. Jetez un œil à la façon dont cela est possible, à certains outils et conseils disponibles pour mettre en œuvre cette pratique.

C'est devenu une bonne pratique acceptée d'utiliser le linting dans les projets JavaScriptmais le linting n'est pas le seul moyen de réduire erreurs et augmenter la cohérence du code. L'analyse statique est un sujet profond, et même dans les langages de programmation dynamiques comme JavaScript, il existe des moyens d'assurer une qualité de code élevée au-delà du linting.

Dans cet article, nous examinerons ce qu'est l'analyse statique, comment elle aide à s'améliorer. qualité du code ainsi que certains outils d'analyse statique disponibles pour les développeurs JavaScript.

Qu'est-ce que l'analyse statique ?

L'analyse statique consiste à analyser le code source avant son exécution. Dans les langages de programmation compilés, l'analyse statique peut être intégrée au compilateur, mais dans les langages interprétés dynamiquement comme JavaScript, les outils d'analyse statique doivent être configurés pour s'exécuter sur le code avant qu'il ne soit déployé.

Le plus souvent, lorsqu'une équipe décide d'introduire l'analyse statique dans son workflow, elle installe et configure les packages requis, puis exécute automatiquement l'analyse sur son serveur d'intégration continue avant le déploiement du code sur le environnement de production.

Si toute l'équipe ne s'est pas engagée à adopter l'analyse statique, vous pouvez installer ces outils sur votre environnement local et les exécuter localement avant de soumettre votre code pour examen.

Comment l'analyse statique contribue à l'amélioration. Votre code

En tant que développeurs de logiciels, nous disposons de nombreux outils pour vous aider à améliorer la qualité du code : tests unitaires et d'intégration, revues de code, contrôle qualité manuel et l'analyse statique parmi eux. Tous ces outils sont excellents, mais la plupart d'entre eux nécessitent une entrée manuelle d'un développeur ou d'un testeur. L'analyse statique est l'exception.

Étant donné que l'analyse statique peut être entièrement automatisée, c'est l'un des meilleurs moyens d'améliorer la qualité de votre code JavaScript sans investir du temps de développeur. Mais comment l'analyse statique peut-elle aider exactement et quels outils sont à la disposition des développeurs JavaScript ?

1. Formatage et style du code

La chose la plus importante lorsque l'on travaille en équipe est la communication… En tant que développeurs, nous communiquons principalement par le code. Nous communiquons avec d'autres parties du logiciel via le code et nous communiquons avec d'autres développeurs via le code.

– Nicholas C. Zakas

Les outils les plus courants pour l'analyse statique dans l'écosystème JavaScript—ESLintJSHintPrettierStandard—sont principalement utilisés pour assurer la cohérence de la base de code d'une équipe.

Certaines personnes remettent en question la nécessité d'appliquer le style conventions, le code est la façon dont les développeurs communiquent. Nous avons des règles sur la communication d'équipe parce qu'elles aident tout le monde à rester sur la même longueur d'onde, et nous avons des règles sur la communication de code parce qu'elles rendent le code plus lisible et plus facile à utiliser, et réduire les désaccords sur les préférences stylistiques.

2. Détection des bogues et des erreurs

Bien qu'ils ne remplacent pas les tests, plusieurs outils d'analyse statique peuvent être utilisés pour détecter les erreurs probables avant que le code ne soit exécuté. Par exemple, ESLint fournit une règle pour « interdire les arguments en double dans les définitions de fonction ». Cela signifie que si vous avez écrit un code comme celui-ci :

function foo(bar, baz, bar) { 
    return bar;
}

L'outil vous avertirait que bar a été utilisé deux fois dans la liste d'arguments de foo()et vous n'enverriez pas ce bogue à la production. Cela pourrait vous éviter des heures d'ennui, et vous n'avez même pas besoin d'écrire un test !

ESLintPMDPrettier et Standard sont tous de bons outils gratuits qui ont des règles pour ce type de détection d'erreur. Plusieurs produits payants existent également, dont SonarCloudqui est gratuit pour les projets open source. Vous pouvez également trouver des outils conçus pour des types d'erreurs spécifiques comme le projet jsinspect de Daniel St. Julesqui détecte les blocs de code JavaScript similaires et dupliqués.

3. Application des meilleures pratiques

Au cours de sa durée de vie, un programme sera géré par de nombreuses paires de mains et d'yeux. Si un programme peut clairement communiquer sa structure et ses caractéristiques, il est moins probable qu'il se brise lorsqu'il est modifié dans un avenir jamais trop lointain. Les conventions de code peuvent aider à réduire la fragilité des programmes.

– Douglas Crockford

Combien de classes devez-vous inclure par fichier JavaScript ? Devriez-vous utiliser la fonction eval() dans votre code ? Qu'en est-il des nombres magiques ?

Les développeurs JavaScript expérimentés auront leurs réponses, mais, à proprement parler, JavaScript n'impose pas beaucoup de règles sur la façon dont vous l'écrivez. Cette option conduit les nouveaux développeurs JavaScript à faire accidentellement des choses qui pourraient être mal vues, déconseillées ou même dangereuses. Heureusement, vous pouvez appliquer automatiquement les meilleures pratiques à l'aide de l'analyse statique.

Prettier et Standard incluent des règles avisées sur les meilleures pratiques, tandis que ESLint et PMD sont un peu plus configurables. Il peut être tentant de créer votre propre ensemble de règles personnalisées, mais cela prendra beaucoup de temps. Adopter un ensemble de règles acceptées est probablement une meilleure idée au début.

4. Mesurer la complexité

Je n'ai jamais vu un grand logiciel qui n'avait pas de parties désordonnées, mais limiter la complexité est une facette importante de l'écriture de bon code. La complexité du logiciel peut être mesurée et signalée — la méthode la plus courante étant la complexité cyclomatique.

La complexité cyclomatique dans un code compte le nombre de chemins uniques que le programme peut emprunter entre son début et sa fin. Il finit par être fonction du nombre de structures de contrôle (conditionnelles, boucles, etc.) utilisées dans n'importe quel morceau de code. Au fur et à mesure que la complexité augmente, il devient généralement judicieux de diviser le code en classes ou fonctions plus petites, le cas échéant.

Il y a un débat pour savoir si la réduction de la complexité cyclomatique réduit les boguesmais à mon avis, avoir un code moins complexe rend le logiciel plus facile à lire, à raisonner et à utiliser. Si vous souhaitez détecter une complexité croissante ou limiter la complexité cyclomatique de votre code source, PlatoESLint ou complexity-report sont de bons outils d'analyse statique pour vous.

5. Analyse des risques de sécurité

Bien que vous ne puissiez pas vous fier uniquement à l'analyse statique pour prévenir les vulnérabilités de sécurité, cela vaut certainement la peine d'automatiser ce que vous pouvez. Alors que certains des outils ci-dessus améliorent indirectement la sécurité en réduisant les bogues probables, LGTM est un outil axé sur la sécurité qui adopte une nouvelle approche :

Les mêmes bogues réapparaissent souvent encore et encore tout au long de la durée de vie d'un projet, et à plusieurs endroits dans une base de code… C'est pourquoi il est important de corriger non seulement le bogue d'origine, mais aussi d'enquêter sur la fréquence à laquelle l'erreur se répète dans une base de code ou sur plusieurs projets, et de corriger toute autre vulnérabilité similaire.

– Documentation LGTM

En sachant que les bogues courants se répètent dans tous les projets, LGTM analyse des milliers de grands projets open source pour vous aider à repérer des bogues similaires dans votre base de code. Cela peut conduire à de nombreuses fausses alertes, mais cela peut valoir la peine d'essayer dans votre projet.

6. Audit des dépendances tierces

L'écosystème de gestion des packages de JavaScript a fait de grands progrès au cours des dernières années, mais les dépendances tierces restent également l'un des domaines de vulnérabilité les plus importants.

Les applications JavaScript ont tendance à s'appuyer sur de nombreux tiers. -Bibliothèques et frameworks de partie. Cela accélère le développement, mais cela met une pression énorme sur les équipes qui doivent maintenir ces dépendances tierces à jour. Heureusement, les outils d'analyse statique peuvent vous aider à vous rappeler quand des mises à jour sont nécessaires et même gérer automatiquement ce processus de mise à niveau.

Si vous utilisez GitHub pour le contrôle de version, vous avez probablement vu les demandes d'extraction automatisées de Dependabot sur votre projets. Depuis l'acquisition de DependabotGitHub l'a intégré à son ensemble de fonctionnalités principales. Par conséquent, si vous avez un projet JavaScript, il peut être judicieux de l'activer.

Vous pouvez également rechercher manuellement les failles de sécurité. et les dépendances obsolètes à l'aide de la commande npm audit. Mon équipe effectue ces mises à jour à des moments prédéterminés tout au long de l'année afin que nous n'interférions pas avec notre cycle de développement de produits. Que vous mettiez à jour vos dépendances au fur et à mesure qu'elles arrivent ou en masse chaque mois, vous devez les tenir à jour, c'est donc une bonne idée d'utiliser des outils d'analyse statique pour vous aider.

7. Vérification des types

Enfin, les applications JavaScript peuvent utiliser la vérification des types à l'aide d'outils tels que Flow ou TypeScript pour garantir une utilisation cohérente des types de variables. Bien que JavaScript ne soit pas strictement typé en natif, ces outils permettent à la fois un typage progressif ou strict qui peut diminuer les erreurs et améliorer la lisibilité du code.

Pour démontrer les suggestions de type dans JavaScript, considérez la fonction suivante :

 function getEvents(options) {
  
  return events;
}

Si un nouveau développeur voit un code comme celui-ci, il pourrait se demander comment le paramètre options doit être formaté : est-ce un tableau ? Un objet? De même, à quoi ressemblent les événements renvoyés par cette fonction ? Sont-ils une collection? Un objet? Un tableau ?

 Bien que vous puissiez suivre le code source pour le comprendre, l'indication de type le rend beaucoup plus clair et vous aide à trouver des violations à l'aide d'une analyse statique plutôt que d'avoir à exécuter le code. Réécrire la fonction ci-dessus dans TypeScript nous donnerait quelque chose comme ceci :

function getEvents(options: Array<Option>[19659021]): Collection<EventModel> {
  
  return events;
}

Maintenant sans en savoir des éléments internes de cette fonction, nous pouvons voir qu'elle nécessite un tableau d'objets Option comme paramètre d'entrée et renvoie une Collection d'objets EventModel.[19659003]Mieux encore, vous pouvez implémenter TypeScript et Flow de manière incrémentielle. Vous n'avez pas besoin de conseils de type stricts partout pour commencer. Détendez simplement les règles pour n'effectuer que certaines vérifications de type sur les fichiers que vous spécifiez.

Conseils pour la mise en œuvre de l'analyse statique en JavaScript

Toutes ces différentes méthodes et outils peuvent être écrasants, mais ne vous limitez pas à les perfectionner. tout de suite. Même l'ajout de quelques règles de linting à une grande base de code peut entraîner un grand nombre d'avertissements et peut même casser des fonctionnalités existantes.

Si vous implémentez une analyse statique dans un grand projet existant, gardez ces conseils à l'esprit :

• Commencez simplement : utilisez un outil qui vous permet d'assouplir les règles selon les besoins de votre base de code.
• Réparez un fichier à la fois ou configurez les règles pour autoriser toutes les exceptions requises par votre base de code.
• Commencez avec votre environnement de développement local en exécuter ces outils dans votre ligne de commande. Vous n'avez pas besoin de les intégrer dès le départ à votre processus d'intégration continue.
• Ajustez les règles et les outils que vous utilisez au fil du temps. L'objectif devrait être l'amélioration continue, pas la perfection.

Enfin, si vous avez vos propres outils ou suggestions pour l'analyse statique en JavaScript, j'aimerais en entendre parler. Laissez vos pensées dans les commentaires ci-dessous.