Qu’est-ce qu’un linter? En bref, un linter est un outil pour vous aider à améliorer votre code. Le concept de linter n’est pas exclusif à JavaScript. Pourtant, je dirais que la majorité des gens qui essaient d’en apprendre davantage sur les linters sont intéressés par ceux qui ciblent JavaScript (ou, plus généralement, les langages dynamiquement typés.)

Dans le post d’aujourd’hui, nous répondons à la question titre, et plus encore. Nous commençons par définir le terme « linter., »Vous comprendrez ce qu’est cette chose et comment elle est devenue. Ensuite, nous parlons des avantages des linters et passons à parler des différents types de contrôles qu’ils offrent.

enfin, nous vous montrons plusieurs exemples de linters à votre disposition, donnons quelques conseils pratiques pour commencer, et terminons avec quelques considérations finales.

nous allons commencer.

qu’Est Ce qu’un Linter? Un bref aperçu

commençons par définir ce qu’est un linter. Comme vous l’avez lu dans l’introduction, un linter est un outil pour vous aider à améliorer votre code. Mais de quelle manière fait-il cela?, La réponse est: en analysant votre code source à la recherche de problèmes.

le terme linter vient d’un outil appelé à l’origine « lint” qui analysait le code source C. L’informaticien Stephen C. Johnson a développé cet utilitaire en 1978 lorsqu’il travaillait chez Bell Labs.

l’outil lint original, ainsi que des utilitaires similaires antérieurs, avaient pour objectif d’analyser le code source pour proposer des optimisations du compilateur. Au fil du temps, les outils de type lint ont commencé à ajouter de nombreux autres types de vérifications et de vérifications.,

cependant, comme nous l’avons mentionné lors de l’introduction, les linters ne sont pas limités aux langages compilés. Au contraire: nous pourrions dire que les linters sont beaucoup plus précieux pour les langages interprétés car il n’y a pas de compilateur pour détecter les erreurs pendant le développement.

les Avantages de l’absence de peluches

Vous venez d’apprendre la définition de linter. Vous savez maintenant aussi quand ce type d’outil a été inventé, et par qui. Vous avez probablement maintenant au moins une idée générale de ce qu’un linter peut faire pour votre code., Mais plus concrètement, quels sont les avantages que ce type d’outil peut fournir? En voici quelques-unes:

  • moins d’erreurs dans la production
  • code lisible, maintenable et plus cohérent
  • moins de discussions sur le style de code et les choix esthétiques lors des revues de code
  • mesure Objective de la qualité du code
  • code plus sûr et plus performant

la section suivante couvre certains des types de vérifications Après l’avoir lu, vous comprendrez comment les linters offrent les avantages ci-dessus.,

Types de contrôles les Linters fournissent

comme vous venez de le lire, l’outil lint d’origine a analysé le code pour permettre des optimisations pour les compilateurs, mais au fil du temps, des outils plus avancés et plus complets ont été publiés. De nos jours, nous avons une myriade de linters différents, qui fournissent de nombreux types de contrôles. Passons rapidement en revue certains d’entre eux.

erreurs de syntaxe

les vérifications les plus élémentaires et les plus vitales qu’un linter peut fournir sont les vérifications d’erreurs de syntaxe en ce qui concerne JavaScript et d’autres langages interprétés., Les développeurs ne devraient même pas pousser le code vers la ligne principale sans qu’il passe des vérifications de syntaxe.

Une façon d’y parvenir consiste à utiliser des hooks de pré-validation qui empêchent les utilisateurs de pousser leur code lorsque la vérification de linter indique qu’il y a des problèmes avec le code.

respect des normes de codage

Un autre type de contrôle essentiel que linters fournit est le respect des normes de codage. Certaines personnes pourraient rejeter cela comme une préoccupation purement esthétique, mais ils auraient tort., Avoir un seul style de codage cohérent est bénéfique pour diminuer la charge cognitive de la lecture, de la compréhension et de la maintenance du code. Une base de code qui a un style de code cohérent sera plus facile à comprendre, et les développeurs qui l’utilisent seront moins susceptibles d’introduire des bogues.

C’est pourquoi il existe des linters qui se spécialisent dans la vérification des bases de code pour l’adhérence aux styles de code. Certains outils sont opiniâtres, c’est-à-dire qu’ils viennent avec un ensemble prédéfini de règles et de conventions qui ne peuvent pas être modifiées., D’autre part, il existe des outils qui peuvent être hautement configurable, permettant à l’utilisateur d’adapter l’outil à leur choix de codage styles.

problèmes potentiels (Alias code Smells)

code smells sont des signes que quelque chose pourrait ne pas être avec votre code. Il est incroyablement utile d’avoir un outil pour détecter ces signes automatiquement, afin que vous puissiez les étudier plus avant, si nécessaire.

par exemple, beaucoup de gens—y compris moi—considèrent les fonctions longues comme une odeur de code. Ainsi, vous pouvez configurer votre linter pour détecter les fonctions qui sont plus longues qu’un nombre donné de lignes.,

une Autre souvent cité odeur de code est le code qui est trop complexe. Mais nous ne parlons pas de la complexité d’une manière subjective, mais une très objective. La complexité cyclomatique est une métrique de code utile qui représente le nombre de chemins d’exécution possibles à l’intérieur d’une fonction. Linters peut calculer la complexité cyclomatique de vos fonctions et signaler celles qui sont supérieures à un certain seuil.

contrôles de sécurité

enfin, nous avons la sécurité, qui est sans aucun doute la facette la plus critique d’une application moderne, en particulier d’une application web., Se tromper, et les conséquences peuvent être catastrophiques, non seulement en ce qui concerne l’argent et la réputation, mais même juridiques (pensez GDPR et réglementations similaires.)

heureusement, c’est un autre domaine où linters peut être utile car il existe des outils qui fournissent des vérifications de sécurité importantes.

comprendre L’analyse statique

Nous avons expliqué ce que sont les linters et pourquoi ils sont utiles. Aussi, nous avons couvert les principaux types de fibres. Vous êtes maintenant prêt à découvrir quelques exemples d’outils de linting pour une variété d’utilisations et de langages de programmation cibles.,

avant d’y arriver, cependant, prenons une brève digression pour parler d’analyse statique, puisque ce terme apparaît dans la section suivante, et nous ne l’avons pas encore défini.

alors, qu’est-ce que l’analyse statique? Vous pouvez considérer l’analyse statique comme un débogage pré-exécuté. L’analyse statique consiste à utiliser des outils qui analysent votre code source à la recherche d’erreurs, de non-respect de règles ou de conventions, ou d’autres problèmes potentiels.

la section suivante montre des exemples de linters classés selon le type de vérification qu’ils effectuent., Les entrées classées sous Analyse statique se réfèrent principalement aux premier et troisième types de linters énumérés dans la section ci-dessus.

exemples de Linters

citons maintenant brièvement quelques exemples de linters. Nous montrerons des exemples pour différents langages de programmation, Classés par type de vérification qu’ils fournissent. Gardez à l’esprit que certains outils peuvent offrir plus d’un type de vérification, c’est la raison pour laquelle certains outils apparaissent dans plus d’une catégorie.,>

  • StandardJS pour JavaScript
  • PHPMD pour PHP
  • StyleCop pour C#
  • Linters pour la sécurité

    • Gosec pour Go
    • Bandit pour Python
    • LGTM pour plusieurs langues, y compris JavaScript, Python et C#

    Linters pour les Conventions de codage / formatage de codage

    • prettier pour JavaScript
    • rubocop pour Ruby
    • StyleCop pour C#

    linters en Javascript: comment commencer

    avant de conclure L’article, nous voulons vous donner un guide bref mais pratique sur la façon de commencer avec linting en JavaScript., Puisque C’est JavaScript dont nous parlons, il n’est pas surprenant qu’il existe de nombreux outils parmi lesquels vous pouvez choisir. Puisque nous devons en choisir un, nous allons avec ESLint.

    installation D’ESLint

    tout d’abord: installons le linter. ESLint est installé via npm, ce qui signifie que vous devez avoir un nœud.js installé. Si vous ne l’avez pas déjà, le télécharger et l’installer afin que nous puissions continuer.

    Avec le Noeud.js installé, nous sommes prêts à installer ESLint via npm., the following command:

    1
    npm install eslint –global

    However, this isn’t the approach recommended in their documentation., Au lieu de cela, vous devriez probablement installer ESLint sur une base par projet.,ory for your project:

    1
    mkdir eslint-sample-app

    Then, cd into the directory and run the command below to create a package.,fichier json (il sera nécessaire sur la route.)

    1
    npm init

    Npm va vous poser plusieurs questions., Appuyez simplement sur entrée pour utiliser la réponse par défaut pour tous.,n’a, en exécutant:

    1
    npx eslint –init

    Lorsque vous exécutez la commande ci-dessus, ESLint va vous demander ce que vous voulez l’utiliser pour., Les options sont: pour vérifier la syntaxe uniquement, pour vérifier la syntaxe et trouver des problèmes, et pour vérifier la syntaxe, trouver des problèmes et appliquer le style de code.

    allons-y avec la dernière option. Utilisez les touches fléchées pour modifier les options et entrez pour confirmer. ESLint voudra alors savoir quels types de modules votre projet utilise. Les réponses sont:

    • modules JavaScript
    • CommonJS Modules
    • Aucun de ces

    Choisir les modules JavaScript et continuer. Après cela, il vous demande quel cadre votre projet., Les réponses, encore une fois, sont trois:

    • Réagir
    • Vue
    • Aucun de ces

    Dans notre cas, nous allons choisir la « none” option. La question suivante est une question” oui/non »: votre projet utilise-t-il Typescript? Appuyez sur la touche « N” pour non. Après cela, il vous demande si votre code s’exécute dans le navigateur ou dans le Nœud.

    ESLint vous demande ensuite comment choisir un moyen de définir un style de code pour votre projet. Il vous offre trois possibilités: utiliser un guide de style populaire, répondre à des questions sur vos préférences de style, ou inspecter votre .fichiers js. Choisissez la première option., Ensuite, il vous sera demandé de choisir entre trois styles: AirBNB, Standard et Google. Pour ce tutoriel, choisissons Google.

    ESLint vous demandera alors quel format vous préférez pour votre configuration. Choisissez le format YAML. Enfin, lorsqu’on vous demande si vous souhaitez télécharger le style de code sélectionné à l’aide de npm, répondez  » oui. »

    utiliser ESLint pour vérifier un fichier

    Une fois le téléchargement terminé, vous serez prêt à utiliser ESLint pour vérifier un fichier. Mais pour cela, vous avez besoin d’un fichier à vérifier. Si vous avez un .fichier js traîner quelque part, Copiez-le dans votre répertoire de projet., Vous pouvez également cloner ce référentiel, contenant un seul fichier, et l’utiliser pour vos tests.,

    Pour consulter le fichier, utilisez la commande suivante:

    JavaScript

    1
    npx eslint chemin d’accès à votre fichier.,js

    C’est le résultat que j’obtiens de l’exécution de la commande ciblée à la salutation.,fichier js vous pouvez télécharger à partir du repository sur GitHub:

    1
    2
    3
    4
    5
    6

    F:\demos\eslint-demo\greeter.,js
    2:3 erreur Manquant JSDoc commentaire nécessitent-jsdoc
    3:1 erreur de Cette ligne a une longueur de 86 ans. Maximale autorisée est de 80 max-len
    10:4 erreur Inattendue  » ce  » non-invalide-ce
    ✖ 3 problèmes (3 erreurs, avertissements 0)

    Comme vous pouvez le voir, J’ai trois erreurs et pas de mises en garde.

    qu’Est Ce qu’un Linter? Un excellent outil pour votre Toolbelt

    dans cet article, nous avons examiné le concept d’un outil linter. Maintenant, vous avez une idée solide de ce que sont les linters et pourquoi vous devriez en adopter un., De plus, vous avez appris différents types d’outils linter et des exemples de chaque catégorie, ciblant plusieurs langages de programmation différents.

    en plus de tout cela, vous savez maintenant comment commencer avec un outil de linting populaire pour JavaScript: ESLint.

    Quelles sont les prochaines étapes?, Il y a plusieurs choses que vous pouvez apprendre comment faire:

    • Désactiver les règles
    • permet d’Activer une règle comme un avertissement ou une erreur
    • Intégrer peluchage dans votre processus de génération
    • option de configuration Avancée
    • Créer vos règles personnalisées

    Vous pouvez aussi, bien sûr, d’expérimenter avec d’autres fibres. Ce n’est pas parce que nous avons choisi ESLint pour ce guide que vous devriez rester coincé avec.

    Enfin, n’oubliez pas que peluchage, tandis que incroyablement précieux, est juste une autre arme dans votre arsenal., Vous ne devriez pas oublier les tests automatisés, la revue de code, le refactoring et de nombreuses autres pratiques, techniques et outils à votre disposition dans la lutte sans fin contre le chaos dans votre base de code.

    et parmi toutes les pratiques, techniques et outils que vous pouvez utiliser pour améliorer votre base de code, nous ne pouvons pas nous empêcher de distinguer les tests de bout en bout, qui sont un type de test souvent négligé. Et c’est bien dommage. Avec le bon outil pour vous aider, les tests de bout en bout de qualité peuvent être un allié puissant dans votre lutte contre l’entropie de code.

    Articles

    Laisser un commentaire

    Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *