Les meilleurs plugins Webstorm pour un codage efficace

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

Si ces techniques d’économie de temps et d’efforts peuvent sembler négligeables en tant que telles, lorsqu’elles sont cumulées, elles peuvent vraiment faire la différence.

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

Rainbow Brackets

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

no-rainbow-brackets
Pas de crochets arc-en-ciel

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

Avec les parenthèses arc-en-ciel, vous pouvez voir visuellement ce qui se passe dans votre code, lorsqu’il s’agit de délimiter la portée des fonctions.

En fait, les crochets arc-en-ciel ne fonctionnent pas seulement avec les crochets, mais aussi avec les parenthèses, ce qui permet de repérer facilement des éléments comme le mapping dans les projets React.

rainbow-brackets
Des crochets arc-en-ciel !

En savoir plus sur les parenthèses arc-en-ciel ici.

Tabnine

Tabine est mon plugin préféré depuis un certain temps maintenant. J’aime l’utiliser pour sa complétion de texte précise qui m’a littéralement prédit des lignes entières de code que je peux choisir d’accepter d’une simple pression de touche.

Voir aussi :  Tendances à suivre en matière de développement du front-end en 2022
tabnine-2
Tabnine prédisant des extraits de code en fonction de mes habitudes de codage

Il y parvient grâce à ses algorithmes de codage prédictif pilotés par l’IA. Lorsqu’il est activé, Tabnine apprend en fait de vos habitudes de codage et des projets sur lesquels vous travaillez, de sorte qu’il peut 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.

Pour en savoir plus ici.

CSV

C’est un outil intéressant si vous travaillez avec des fichiers CSV.

Le plugin CSV traite le CSV, ou « valeurs séparées par des virgules », comme son propre langage dans les IDE de JetBrains. Cela signifie qu’il a sa propre définition syntaxique, ses éléments de langage structurés et les types de fichiers associés, tels que .csv, .tsv et .psv.

Ce plugin nous permet de le traiter comme n’importe quel autre code dans l’éditeur, les erreurs étant mises en évidence pour nous. Voici une liste complète du support que vous obtiendrez :

  • Détection des fichiers CSV/TSV/PSV
  • éditeur de tableaux flexible
  • éditeur de texte personnalisable
  • coloration des colonnes personnalisable
  • commentaire de ligne personnalisable
  • validation syntaxique
  • mise en évidence de la syntaxe (personnalisable)
  • mise en forme du contenu (personnalisable)
  • contrôles rapides
  • intentions (Alt+Entrée), par exemple Citation/Décitation (tout), Décalage de colonne gauche/droite
  • vue de la structure (mise en page de l’en-tête et des entrées)
  • prise en charge de ‘,’, ‘;’, ‘:’, ‘|’ et ‘↹’ comme séparateur de valeur prédéfini
  • support pour les séparateurs de valeurs librement définis
  • support des commentaires de ligne (# par défaut, personnalisable)
  • mise en évidence des valeurs des colonnes actives
  • mise en évidence du séparateur de tabulation (↹)
Voir aussi :  What is PostCSS? How to Use Plugins to Automate CSS Tasks
csv-webstorm
A quoi ressemble un fichier .csv lorsqu’il est ouvert dans Webstorm, avec le plugin CSV.

En savoir plus sur CSV ici.

Il existe aussi le CSV arc-en-ciel, si vous voulez ajouter un peu de couleur à votre vie !

Manipulation de chaînes de caractères

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

Ainsi, par exemple, si vous voulez changer un groupe de chaînes surlignées en camelCase, vous pouvez le faire instantanément. Mais ce n’est que la partie émergée de l’iceberg. Vous pouvez trier les chaînes de caractères, les filtrer ou même les trier en fonction de la casse !

Cet outil est un énorme gain de temps lorsqu’il s’agit de mettre de l’ordre dans le code.

before-string-manipulation.pbg
Avant la manipulation des chaînes
after-string-manipulation
Après la manipulation des chaînes de caractères ! Si soigné et ordonné en un clic !

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

Prettier

De tous les plugins mentionnés, Prettier est celui que j’utilise depuis le plus longtemps, et j’oublie parfois qu’il fait partie intégrante de 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 fait, si tout le monde utilisait Prettier, alors tout notre code suivrait exactement les mêmes directives – hourra pour la cohérence !

Il le fait en n’offrant pas des tas et des tas d’options à l’utilisateur comme ESLint. Si vous le voulez vraiment, vous pouvez le changer, mais cela irait à l’encontre de son objectif.

before-prettier
Avant plus joli

Ici vous pouvez voir Prettier au travail. Il a pris du code et a fait en sorte que toutes les lignes de code aient une longueur inférieure à 60 caractères. 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 tous les guillemets sont cohérents.

Voir aussi :  The React Cheatsheet for 2022
after-prettier-1
Après Prettier

Voilà, c’est beaucoup plus « joli » ! (geddit ?)

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