Article original : Best Webstorm Plugins for Effective Coding

En tant que développeur logiciel, j'utilise une variété de plugins qui facilitent ma vie lorsqu'il s'agit d'éviter les erreurs et de coder plus efficacement.

Bien que ces techniques d'économie de temps et d'efforts puissent sembler négligeables ponctuellement, lorsqu'elles sont accumulées, elles peuvent vraiment faire une différence.

Dans cet article, je vais partager avec vous mes plugins WebStorm préférés pour les développeurs JavaScript et mes raisons pour lesquelles.

Parentheses Arc-en-ciel

Parce que qui n'a pas passé du temps à essayer de comprendre à quelles parenthèses appartiennent les autres ? Lorsque je travaille sur des projets JavaScript, je imbrique souvent des parenthèses les unes dans les autres, ce qui donne quelque chose comme ceci :

Image Sans Parentheses Arc-en-ciel

Il devient très difficile de suivre la portée de certaines fonctions, surtout lorsque vous voulez en supprimer certaines.

Avec les parentheses arc-en-ciel, vous pouvez voir visuellement ce qui se passe dans votre code en termes de portée des fonctions.

En fait, les parentheses arc-en-ciel ne fonctionnent pas seulement avec les parenthèses, mais aussi avec les parenthèses, ce qui facilite la détection des mappings dans les projets React.

Image Parentheses Arc-en-ciel !

En savoir plus sur les Parentheses Arc-en-ciel ici.

Tabnine

Tabnine est mon plugin préféré depuis un certain temps. J'apprécie de l'utiliser pour sa complétion de texte précise qui a littéralement prédit des lignes entières de code pour moi que je peux choisir d'accepter avec une simple pression de touche.

Image Tabnine prédisant des extraits de code basés sur mes habitudes de codage

Il le fait grâce à ses algorithmes de codage prédictif basés sur l'IA. Lorsqu'il est activé, Tabnine apprend en fait de vos habitudes de codage et des projets sur lesquels vous travaillez, afin de pouvoir prédire avec précision ce que vous allez taper ensuite.

J'utilise actuellement Tabnine avec mon IDE WebStorm pour les projets JavaScript. Mais il est également disponible dans plus de 30 langues et pour 21 IDE et éditeurs de code.

En savoir plus à ce sujet ici.

CSV

Celui-ci est cool si vous travaillez avec des fichiers CSV.

Le plugin CSV traite les CSV, ou 'valeurs séparées par des virgules', comme un langage à part entière dans les IDE JetBrains. Cela signifie qu'il a sa propre définition de syntaxe, des éléments de langage structurés et des types de fichiers associés, tels que .csv, .tsv et .psv.

Avoir ce plugin nous permet de le traiter comme nous le faisons avec tout autre code dans l'éditeur, avec les erreurs mises en évidence pour nous. Voici une liste complète du support que vous obtiendrez :

  • Détection des fichiers CSV/TSV/PSV
  • Éditeur de tableau flexible
  • Éditeur de texte personnalisable
  • Colorisation des colonnes personnalisable
  • Commentaire de ligne personnalisable
  • Validation de la syntaxe
  • Mise en évidence de la syntaxe (personnalisable)
  • Formatage du contenu (personnalisable)
  • Inspections de correction rapide
  • Intentions (Alt+Enter), par exemple Citer/Déciter (tout), Déplacer la colonne à gauche/droite
  • Vue de structure (disposition en-tête-entrée)
  • Support pour ',', ';', ':', '|' et '' comme séparateurs de valeurs prédéfinis
  • Support pour les séparateurs de valeurs librement définis
  • Support pour les commentaires de ligne (# par défaut, personnalisable)
  • Mise en évidence des valeurs de colonne active
  • Mise en évidence du séparateur de tabulation ()

Image Comment un fichier .csv apparaît lorsqu'il est ouvert dans WebStorm, avec le plugin CSV.

En savoir plus sur CSV ici.

Il y a aussi Rainbow CSV, si vous voulez ajouter un peu de couleur supplémentaire dans votre vie !

Manipulation de chaînes

Le plugin String Manipulation vous permet de formater instantanément des chaînes avec une variété d'options intégrées.

Par exemple, si vous souhaitez convertir un ensemble de chaînes mises en évidence en camelCase, vous pouvez le faire instantanément. Mais ce n'est que la partie émergée de l'iceberg. Vous pouvez trier des chaînes, les filtrer, ou même les trier par sensibilité à la casse !

Cet outil est un énorme gain de temps lorsqu'il s'agit de nettoyer du code.

Image Avant la manipulation de chaînes

Image Après la manipulation de chaînes ! Si net et ordonné en un seul clic !

La liste des capacités est trop longue, alors au lieu de les coller ici, vous pouvez les consulter sur le site web ici.

Prettier

J'utilise Prettier depuis plus longtemps que tous les autres plugins mentionnés, et parfois j'oublie son existence car il est si intégré à mes activités quotidiennes en tant que développeur.

Prettier prend votre code tel que vous l'avez écrit et fournit une standardisation et une cohérence. En gros, si tout le monde utilisait Prettier, tout notre code suivrait exactement les mêmes directives – hourra pour la cohérence !

Il le fait en n'offrant pas des tonnes et des tonnes d'options à l'utilisateur comme ESLint. Si vous le souhaitez vraiment, vous pouvez le changer, mais cela irait vraiment à l'encontre de son but.

Image Avant Prettier

Ici, vous pouvez voir Prettier en action. Il a pris du code et fait en sorte que toutes les lignes de code soient inférieures à 60 caractères de long. Si une ligne dépasse cette limite, elle est placée sur une nouvelle ligne séparée. Il ajoute également des points-virgules si vous le souhaitez et s'assure que toutes les marques de citation sont cohérentes.

Image Après Prettier

Là, beaucoup plus 'Prettier' ! (vous voyez le jeu de mots ?)

Prettier est en fait déjà intégré avec WebStorm, donc vous n'avez même pas besoin de l'installer pour l'utiliser.

Code with Me

Ce n'est pas tant un plugin qu'une fonctionnalité régulière de WebStorm maintenant qu'il a été intégré avec la version 2021.1, mais cela vaut la peine d'être mentionné.

Maintenant que le télétravail est une chose régulière dans beaucoup de nos vies, notre besoin de pouvoir partager du code efficacement est plus important que jamais.

Je le sais car j'ai passé beaucoup de temps à prendre des "captures d'écran" de mon écran et à les envoyer sur Slack lorsque je discutais avec des collègues développeurs. Si seulement il existait un outil où quelqu'un pourrait littéralement voir mon écran ET modifier mon code...

Image Moi utilisant Code With Me

Eh bien, c'est ce que fait Code With Me, avec en plus des appels vidéo.

Vous pouvez choisir qui peut modifier votre code que vous partagez. Et si vous présentez à un grand groupe d'appel et que vous ne voulez pas que quelqu'un le touche, vous pouvez passer en mode 'lecture seule'.

Image Moi montrant la fonctionnalité de chat de Code With Me

Cette fonctionnalité est définitivement un sauveur de vie lorsqu'il s'agit de télétravail. Si vous voulez en savoir plus sur cette fonctionnalité, assurez-vous de consulter le lien ici.

Merci d'avoir lu ! J'espère que ces plugins vous aideront à devenir plus productif dans votre codage au quotidien.

Code avec Ania Kubów
Bonjour à tous. Cette chaîne est gérée par Ania Kubow. Dans cette chaîne, je vous enseignerai JavaScript, React, HTML, CSS, React-native, Node.js et bien plus encore ! Un peu à propos de moi : Mon parcours est dans les marchés financiers, où j'ai travaillé comme courtier en dérivés à la sortie de l'université. Après avoir commencé m
AAUvwnjSRt8sIbeM7P--pHoUDh67sDhaNTCMF_XiNOCvUw=s900-c-k-c0x00ffffff-no-rj