Extensions VSCode pour faciliter le développement de JavaScript et Vue

À ce jour, il existe une quantité suffisante d'outils de développement avec prise en charge du langage JavaScript et des cadres basés sur celui-ci. La question du choix d'un outil spécifique dépasse le cadre de cet article, je vais essayer de décrire mon expérience utilisateur avec Visual Studio Code et des outils qui sont conçus pour faciliter la vie des développeurs JS, en particulier ceux qui utilisent Vue.

Il y a beaucoup de plugins dans le magasin d'extensions VSCode, les plus pratiques pour le développement web seront listés ci-dessous.

HTML et CSS

La mise en page et l'écriture des styles étant souvent une tâche monotone, les extensions suivantes peuvent faciliter et accélérer votre travail:

• Balise de fermeture automatique et balise de renommage automatique - des extensions simples et pratiques, pour simplifier le travail avec la mise en page, prennent en charge les composants à fichier unique Vue.
• CSS Peek est une extension simple qui ajoute la possibilité d'afficher ou de parcourir rapidement une règle.
• Couleur Info - vous permet de visualiser des informations détaillées sur la couleur, a une bonne marge de paramètres.
• Couleur surlignée - ajoute un affichage des couleurs sous forme de bordure, si un codage couleur est détecté dans le code.
• IntelliSense pour les noms de classe CSS en HTML - analyse l'environnement de travail pour ajouter la possibilité de compléter automatiquement les classes CSS.

Javascript

• Debbugger pour Chrome - une extension pour simplifier le débogage directement à partir de l'éditeur de code, fonctionne avec tout ce que Chrome DevTools possède.
• Extraits de code JavaScript (ES6) - un ensemble d'extraits de code pour JS, accélère considérablement le développement.
• JSHint - extension pour des conseils sur la conception et l'organisation du code JS, a des paramètres flexibles.
• ESLint est un linter pour JS avec des paramètres flexibles.

Vue

Il n'y a pas beaucoup d'extensions appropriées pour travailler avec Vue, voici quelques-unes des plus utiles:

• Vetur est un ensemble complet des modules complémentaires les plus nécessaires pour travailler avec vue, tels que les extraits, la coloration syntaxique.
• Vue Peek - Ajoute une transition pratique vers les composants vue.

Git

VSCode prend en charge le travail avec git prêt à l'emploi, mais les fonctions intégrées ne sont toujours pas suffisantes. Les extensions suivantes faciliteront un peu le travail avec git:

• GitLens est probablement l'extension la plus célèbre pour travailler avec git, qui ajoute de nombreuses fonctionnalités pour afficher les informations git.
• Git History - ajoute la possibilité de visualiser facilement l'historique des changements dans git, a une interface plutôt pratique.
• Indicateurs Git - un indicateur simple de l'activité Git dans le bac inférieur VSCode.

Environnement de travail et processus de développement

Pour un travail productif, il serait bien d'avoir des aides sous forme de modules complémentaires mettant en évidence des erreurs simples, suggérant un style d'écriture et d'autres astuces / actions pratiques. Essayez les extensions suivantes:

• Bracket Pair Colorizer - ajoute une demi-lumière aux supports entourant les blocs de code, facilite la perception du code avec une imbrication profonde, séparant visuellement le code.
• Beautify est, à mon avis, l'extension la plus pratique pour le style de code automatique, plus de détails peuvent être trouvés sur le lien.
• Live Server est une extension très utile qui vous permet de lancer rapidement votre serveur live, par exemple pour la mise en page.
• Le coût d'importation est une excellente extension qui affiche la taille du module importé, vous permet de sélectionner les parties importées du module plus en détail sans recourir à des analyseurs de bundle.
• NPM Intellisense - saisie semi-automatique pour les modules npm.
• Ouvrir dans le navigateur est une extension simple qui ajoute un point d'ouverture dans le navigateur.
• Path Intellisense - saisie semi-automatique pour les noms de fichiers et leur emplacement.
• Synchronisation des paramètres - après avoir terminé l'installation des outils nécessaires et configuré l'environnement, il est pratique d'enregistrer la configuration, cette extension vous permettra de tout synchroniser dans git gist.
• Trier les lignes - un moyen facile d'organiser le tri des lignes dans le code selon les conditions données.
• TODO Highlight est une extension simple pour mettre en évidence des mots clés tels que TODO, FIXME.
• Espaces de fuite - met en évidence les espaces supplémentaires.
• VS Live Share - beaucoup ont été confrontés à un problème lorsqu'ils ont dû expliquer à un développeur distant pendant très longtemps où et ce qui n'allait pas, cette extension simplifie la vie dans de telles situations, vous permettant de faire une démonstration en direct, prend en charge le travail de plusieurs utilisateurs, transmet l'environnement d'exécution à la machine du client.
• Visual Studio IntelliCode - automatise les tâches de routine pour les développeurs dans des langages tels que Python, TypeScript / JavaScript et Java.

Conception de l'éditeur

• Thème Darcula - le design le plus réussi à mon avis, je peux également conseiller Monokai Pro .
• vscode-icons est le pack d' icônes le plus performant pour VSCode.

Cela peut aussi être intéressant.

• GraphQL pour VSCode - une sorte d'intellisense pour GraphQL, l'extension la plus pratique, sous la suie beaucoup utile, plus sur le lien.
• Markdown instantané - aperçu en direct pour le balisage de démarque.
• Coller JSON en tant que code est une extension pratique qui génère un modèle de type à partir de données JSON. Prend en charge TypeScript, Python, Go, Ruby, C #, Java, Swift, Rust, Kotlin, C ++, Flow, Objective-C, JavaScript, Elm et JSON Schema.
• Rainbow CSV - rétro-éclairage pour les fichiers CSV.
• Regex Previewer est une extension très utile pour les aperçus réguliers.
• Visionneuse SVG - Visionneuse SVG.

J'espère que cette liste vous sera utile, je serai heureux des ajouts.