Comment activer la liaison sur Save in Visual Studio Code à l'aide d'Eslint

En JavaScript, l'écriture de code bien formaté peut être difficile, nous pouvons donc utiliser certains outils qui automatisent ce processus pour nous. De plus, ces outils offrent une réutilisabilité et la cohérence du code. Ce tutoriel fournira un aperçu détaillé d'Eslint dans le code Visual Studio. En JavaScript, nous pouvons permettre la liaison sur l'enregistrement qui aborde automatiquement les problèmes mineurs de notre code.

Comment installer Eslint dans Visual Studio Code

On peut utiliser Eslint avec de nombreux éditeurs de texte et IDE, mais le code Visual Studio est celui que les développeurs utilisent le plus. Afin d'installer Eslint dans Visual Studio Code, nous devons suivre les étapes suivantes:

Tout d'abord, nous devons appuyer sur le «Extensions» Bouton dans le coin gauche et recherchez l'eslint comme nous l'avons fait dans l'extrait ci-dessous:

Maintenant, appuyez sur le "installer" bouton Pour installer l'eslint dans le code Visual Studio:

Comme nous avons fini avec l'installation d'Eslint dans le code Visual Studio. Maintenant, nous devons avoir un projet où nous pouvons le tester. Initialisons d'abord un projet.

Comment créer un projet de nœud?

Pour créer un projet, utilisez la commande:

Maintenant nous allons utiliser le "CD" Commande pour accéder à notre projet:

Il est maintenant temps d'initialiser notre projet, à cette fin, nous exécutons la commande suivante dans notre terminal:

> npm init -y

Maintenant, nous allons installer Eslint dans notre projet, puis nous l'initialiserons:

> NPM Install Eslint @ 7.32.0

Pour initialiser le "Eslint" Dans notre projet, tapez la commande:

> npx eslint - init

Lorsque nous appuyons sur le bouton «Entrer», une séquence de questions apparaît l'une après l'autre:

Sélectionnez la deuxième option et appuyez sur le bouton «Entrer»:

Ensuite, sélectionnez l'option Importer / Exporter et Appuyez sur le bouton «Entrer»:

Ici, sélectionnez les options «Aucune de ces» pour sélectionner le cadre:

Sélectionnez l'option «Non» pour la question-donnée ci-dessus et appuyez sur le bouton «Entrer» pour passer à la question suivante:

Sélectionnez les deux options et appuyez sur Entrée, Sélectionnez Sélectionner "JavaScript" pour la dernière question,

Lorsque nous appuyons sur Entrée, nous recevrons un message «Créé avec succès». Maintenant à l'intérieur de notre projet, nous avons les fichiers suivants:

Maintenant, nous allons considérer un exemple et nous enfreindrons délibérément certaines règles de base et nous observerons comment Eslint réagira lorsque nous enfreindreons certaines règles.

var string = "Bonjour comment allez-vous";
Soit val = 20;
console.log (val);

Qu'avons-nous fait dans cet exemple? Nous avons créé deux variables et n'avons pas utilisé l'un d'eux dans notre projet:

Mais comme nous avons activé Eslint dans notre code Visual Studio, il souligne les variables «String» comme indiqué dans l'extrait ci-dessus et montre l'erreur suivante dans la section «Problèmes»:

Et ce problème disparaîtra lorsque nous utiliserons cette variable quelque part dans notre code:

var string = "Bonjour comment allez-vous";
Soit val = 20;
console.log (val, string);

Jetez maintenant un œil aux ci-dessous donnés coupés:

Vous verrez que cette fois, il n'y a pas de tel problème qui apparaît dans la section Problème:

Pour une meilleure compréhension d'Eslint, considérons un autre exemple dans lequel nous enfreindrons certaines règles comme les demi-colons et les espaces supplémentaires manquants, et nous observerons comment Eslint y réagit:

var string = "Bonjour comment allez-vous";
Soit Val = 20
console.journal (val)
if (val == 20)

console.journal (chaîne)

Dans ce code, nous ajoutons des espaces blancs supplémentaires et manquons intentionnellement les semi-colons:

Donc, techniquement rien de mal à cela, comme le montre la section des problèmes. Cependant, ce n'est pas une bonne pratique de codage pour mettre des espaces supplémentaires ou manquer des demi-colons.

Eslint ne montre aucun problème car ces règles ne sont pas ajoutées dans Eslint. Nous pouvons les spécifier dans le fichier suivant:

Nous ouvrirons le ".eslinrc.JS " Fichier dans le dossier de notre projet et nous ajouterons quelques règles:

Nous ajoutons la première règle à aborder avec les demi-colons et la deuxième règle à aborder avec des espaces blancs et enregistrer les modifications. Maintenant, si nous manquons le point-virgule ou si nous mettons des espaces supplémentaires dans notre code, Eslint les mettra en évidence dans la section Problème:

Comment activer la liaison sur Save

Nous pouvons activer la liaison à chaque sauvegarde, cela signifie que chaque fois que nous enregistrons notre fichier, ces problèmes seront résolus automatiquement. À cette fin, la première presse «Ctrl +» et sélectionnez le «Espace de travail» paramètres:

Dans la zone de recherche, recherchez le «Code Actions sur Save» et sélectionnez le «Modifier dans les paramètres.JSON " option:

Ajouter le code suivant dans le paramètre.Fichier JSON:

Ces paramètres permettront la liaison sur Save.

Conclusion

Eslint est un package qui rend la peluche dans votre projet vraiment facile, et il applique un guide de style tout au long de notre projet afin que nous puissions maintenir un style cohérent tout au long du projet. Dans cet article, nous avons décrit comment installer l'extension Eslint, puis nous avons créé un projet et observé comment la lignée fonctionne sur le code Visual Studio. Ensuite, nous déterminons comment ajouter des règles pour la liaison, et enfin, nous apprenons comment activer Eslint sur Save.