Fermer

juin 12, 2019

Top 5 des extensions de code VS pour des développeurs JavaScript efficacesUne minute de lecture

JavaScriptT Light_870x220


Les extensions sont des ressources externes qui vous aident à améliorer les capacités intégrées de VS Code. Dans cet article, nous examinons les cinq principales extensions pour améliorer nos compétences en développement JavaScript.

L'un des aspects les plus remarquables de Visual Studio Code est sa capacité à améliorer ses capacités en ajoutant des extensions externes. Il existe cependant de nombreuses extensions sur le marché. Dans cet article, nous discuterons des 5 meilleures extensions qui amélioreront considérablement votre développement JavaScript dans VS Code.

ESLint

ESLint est un outil linter configurable permettant l’identification et le suivi de modèles de développement dans JavaScript. Il vous aide à maintenir la qualité et la structure de votre code facilement. L'ajout de cette extension à VS Code vous aidera à formater automatiquement votre code, en appliquant un code propre, bien structuré et cohérent.

 ESLint "title =" ESLint "/></p data-recalc-dims=

Obtention de ESLint

ESLint, ainsi que tous les Une autre extension VS Code est disponible sur le VS Code Marketplace . Ouvrez simplement le lien et cliquez sur Installer

Une autre façon de procéder consiste à utiliser VS Code lui-même. Si vous êtes un fan de l'installation Voici comment procéder dans vos extensions dans VS Code:

 install-eslint "title =" install-eslint "/></p data-recalc-dims=

Remarque: dans la dernière version de VS Code, vous n'avez pas besoin de rechargez le code VS lorsque vous installez une extension.

Après l'installation, vous pouvez configurer ESLint pour qu'il fonctionne comme vous le souhaitez. Par exemple, vous pouvez le configurer pour formater votre code uniquement lorsque vous enregistrez. De plus, les fonctions de lintement d'ESLint imposent certaines consignes de développement pour vous aider à rester cohérent.

Débogueur pour Chrome

Le débogueur pour Chrome est une extension de code VS utilisée pour déboguer le code JavaScript exécuté dans le navigateur Google Chrome. à partir de VS Code. Cela vous évite de changer constamment de contexte pour afficher les modifications dans logcat ou généralement pour effectuer des opérations de débogage.

 débogueur-pour-chrome "title =" débogueur-pour-chrome "/></p data-recalc-dims=

Obtenir le débogueur pour Chrome

L’extension Debugger pour Chrome est disponible pour l’installation sur le VS Code Marketplace en même temps que toute autre extension du Code VS que vous souhaitez. Ouvrez simplement le lien et cliquez sur Installer pour installer. dans votre code VS.

Vous pouvez également l’installer directement à partir de VS Code en cliquant sur l’icône des extensions, en recherchant l’extension pour débogueur pour Chrome et en l’installant:

 install-debugger -for-chrome "title =" install-debugger-for-chrome "/></p data-recalc-dims=

Remarque: Dans la dernière version de VS Code, il n'est pas nécessaire de recharger VS Code lorsque vous installez une extension.

Plus de fonctionnalités

Après l'installation, vous aurez accès à tous les les fonctionnalités d'extension telles que la définition de points d'arrêt, le défilement de lignes de code, l'affichage de la sortie de votre console, le débogage de scripts eval, les balises de script et les scripts ajoutés de manière dynamique.

Limitations

Il est intéressant de noter qu'il existe certaines limitations à ce que l'extension peut faire. Par exemple, il ne peut pas déboguer les travailleurs Web ni les fonctionnalités qui ne sont pas le débogage de script.

Extraits de code JavaScript (ES6)

Les extraits de code JavaScript (ES6) est une extension de code VS qui contient des extraits de code pour JavaScript. dans la syntaxe ES6 pour VS Code. Quoi de plus? Il prend en charge JavaScript et TypeScript.

 Extraits de code JavaScript ES6 "title =" Extraits de code JavaScript ES6 "/></p data-recalc-dims=

Les extensions d'extrait de code sont très populaires dans la communauté VS Code. Celui-ci est encore meilleur car il vous permet d'ajouter rapidement des codes ES6 à votre projet en quelques frappes de touche.

Langues prises en charge

Outre JavaScript, il prend en charge d'autres langues telles que:

  • HTML
  • Vue
  • TypeScript React
  • JavaScript React
  • etc.

Extraits

Voici quelques extraits et leurs déclencheurs que vous devez connaître.

rqr → require package require ('');
rencontré → crée une méthode dans une classe add () {}
fre → pourChaque boucle dans la syntaxe ES6 .forEach (currentItem => {})
clg → journal de la console console.log (objet)
pge → crée une propriété getter get propertyNa me () {return value;}

Il existe une longue liste de ces extraits de code et de leurs déclencheurs respectifs sur la place de marché correspondant à votre consommation.

Obtention de JavaScript (ES6) Extraits de code ]

Comme les extensions précédentes, vous pouvez obtenir des extraits de code JavaScript (ES6) provenant du Code Marketplace ou directement auprès de VS Code.

Coloriseur de paire de support

Ceci est mon préféré. Outre l'aspect esthétique que donne votre code dans VS Code, il vous aide à faire correspondre automatiquement toutes vos bretelles. Souvent, à mesure que nos lignes de code se développent, il devient de plus en plus difficile de garder une trace de tous les accolades, crochets et parenthèses de notre code.

 Coloriage entre crochets "title =" Coloriseur entre crochets " /></p data-recalc-dims=

Le coloriseur de paires de supports est entièrement personnalisable, car vous pouvez définir les types de symboles que vous souhaitez associer et les associer à des couleurs définies de votre choix.

Obtenir le coloriseur de paires de supports

] Pour installer cette extension, rendez-vous sur la Marketplace et cliquez sur le bouton Installer pour lancer l’installation dans VS Code. Vous pouvez également l’installer directement à partir de VS Code en effectuant une recherche dans extensions icône comme ceci.

 install-Bracket-Pair-Colorizer "title =" install-Bracket-Pair-Colorizer "/></p data-recalc-dims=

Apparemment, je l'ai déjà installé, c'est pourquoi vous ne le voyez pas le bouton Installer comme vous le feriez autrement.

Path Intellisen se

Ceci est une autre de mes extensions de code VS préférées. Avoir à me souvenir des chemins de fichiers exacts m’impose une tâche ardue, et cela l’est encore plus avec des projets très volumineux comportant de nombreux fichiers. Heureusement, les extensions Path Intellisense viennent à la rescousse. Il complète automatiquement les noms de fichiers pour vous afin que vous n'ayez plus à vous souvenir de tous vos noms de fichiers et de leurs emplacements de stockage.

 Path-Intellisense "title =" Path-Intellisense "/></p data-recalc-dims=

Il est à noter que cette fonctionnalité particulière est préchargée dans certains projets, vous n'avez donc peut-être pas besoin d'installer d'extensions.

Obtenir Path Intellisense

L'extension Path Intellisense est disponible sur le Code VS Marketplace . Ouvrez simplement le lien et installez l'extension. Mieux encore, vous pouvez l'installer via npm ou directement à partir de la section Extensions du code VS.

Utilisation

 Path-Intellisense-at-Work "title =" Path-Intellisense-at-Work "/></p data-recalc-dims=

Crédit d'image: Path Intellisense

Conclusion

Voilà ce que nous avons. Dans cet article, nous avons mis en évidence 5 extensions de code Visual Studio qui amélioreront certainement votre développement JavaScript. ESLint vous aidera à écrire un code plus propre et plus cohérent; Le débogueur pour Chrome aidera à mieux déboguer; Les extraits de code JavaScript (ES6) augmenteront votre productivité en générant des extraits pour vous. Bracket Pair Colorizer sera là pour vous aider à tracer et à faire correspondre les accolades de fuite à leurs paires respectives; et enfin, l'extension Path Intellisense vous aidera à compléter automatiquement les noms de fichiers.

Si vous avez d'autres extensions étonnantes qui amélioreraient le développement de JavaScript dans VS Code, allez-y et mentionnez-les dans la section commentaire.

Pour plus d'informations sur la création d'excellentes applications Web

Vous souhaitez en savoir plus sur la création d'excellentes applications Web? Tout commence avec Kendo UI – la bibliothèque complète de composants d'interface utilisateur qui vous permet de créer rapidement des applications réactives de haute qualité. Il comprend tout ce dont vous avez besoin, des grilles et graphiques aux menus déroulants et jauges.

En savoir plus sur le Kendo UI

Testez gratuitement le Kendo UI




Source link