Les extensions VS Code vous permettent d’ajouter des outils à votre installation VS Code pour prendre en charge votre flux de travail de développement. Cet article couvre les cinq principales extensions VS Code pour accélérer le processus de développement de votre application React.
Les extensions VS Code vous permettent d’ajouter des débogueurs et des outils à votre installation VS Code pour prendre en charge votre flux de travail de développement. Ce modèle d’extensibilité est l’une des raisons pour lesquelles de nombreux développeurs React choisissent VS Code. Il existe de nombreuses extensions qui contribuent à améliorer nos flux de travail de développement en tant que développeurs Web. Cet article couvrira le cinq principales extensions VS Code pour accélérer le processus de développement de votre application React.
1. ESLint
ESLint est un utilitaire de peluchage enfichable pour JavaScript et JSX. Il analyse statiquement votre code pour trouver et résoudre rapidement les problèmes, éviter les bugs et rendre votre code plus cohérent et lisible.
Le Extension VS Code ESLint intègre ESLint dans VS Code. Recherchez ESLint dans l’onglet extensions de VS Code et installez-le, ou utilisez ceci lien pour l’installer.
Il utilise la bibliothèque ESLint installée dans le dossier de l’espace de travail ouvert. Si le dossier n’en fournit pas, l’extension recherche une version installée globalement. Reportez-vous à la documentation ESLint pour un guide sur la configuration d’ESLint pour votre projet.
2. Plus jolie
Prettier est un formateur de code avisé qui applique un style cohérent dans votre code. L’extension Prettier facilite la configuration de l’éditeur pour formater votre code lorsque vous l’enregistrez. Installez l’extension via les extensions VS Code en recherchant Prettier - Code formatter ou en utilisant le lien Web.
Si vous souhaitez activer et désactiver le formateur, installez vscode-status-bar-format-toggle.
3. npm Intellisense
npm Intellisense est un plugin qui fournit la saisie semi-automatique pour les modules npm dans les instructions d’importation. Toutes les importations des modules npm sont automatiquement gérées avec cette extension, réduisant ainsi vos frappes au clavier.
Vous pouvez installer npm Intellisense en accédant au marché VS Code et en recherchant npm Intellisenseou en le recherchant dans la fenêtre des extensions dans VS Code.
4. Coût d’importation
Le coût d’importation est utilisé pour afficher en ligne dans l’éditeur la taille du package importé. Il utilise webpack pour détecter la taille importée et vous aide à prendre conscience de la taille des modules que vous utilisez.
Vous pouvez installer Import Cost à l’aide du marché VS Code en recherchant le Coût d’importation extension et en cliquant sur le bouton d’installation.
Voici un exemple qui montre la différence de taille lorsque vous importez le uniqueId fonction lodash.
5. Extraits de réaction simples
Simple React Snippet est une collection d’extraits et de commandes React. Il vous permet de regrouper les codes courts en extraits de code.
Vous pouvez l’installer en utilisant ceci lien ou recherchez Simple React Snippets dans la fenêtre des extensions dans VS Code.
Bonus : Tailwind CSS IntelliSense
Je sais que je vous en ai promis cinq, mais ce dernier extrait est celui que de nombreux développeurs React qui aiment et utilisent Tailwind CSS apprécieront.
Tailwind CSS IntelliSense est un outil qui améliore l’expérience de développement Tailwind en fournissant aux utilisateurs de VS Code des fonctionnalités avancées telles que la saisie semi-automatique, la coloration syntaxique et le peluchage. Vous pouvez l’obtenir en utilisant ceci lien ou en recherchant Tailwind CSS IntelliSense sur le marché des extensions VS Code.
Conclusion
VS Code dispose d’un vaste marché d’extensions où vous pouvez trouver de nombreuses extensions adaptées aux développeurs React. Cet article couvre les cinq principales extensions VS Code que je recommanderais pour accélérer le processus de développement de votre application React.
J’espère que cet article contribuera à rendre votre parcours de développement plus agréable.
Source link