Plugins vscode essentiels pour améliorer l'efficacité du développement front-end (partage)

Cet article partagera avec vous quelques plug-ins vscode essentiels pour améliorer l'efficacité du développement front-end. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

[Apprentissage recommandé : "tutoriel vscode"]

plug-in essentiel du front-end vscode - améliorer l'efficacité du développement

1. Balise de fermeture automatique

Fermer automatiquement les balises HTML/XML

2. Renommer automatiquement la balise　

Terminer automatiquement la modification synchronisée de la balise de l'autre côté

3. Beautify

code de formatage Il convient de noter que le plug-in embellit prend en charge les règles de code de formatage personnalisées

<.>

4. Coloriseur de paires de supports

Ajoutez différentes couleurs aux supports pour distinguer les différents blocs. Les utilisateurs peuvent définir différents types et couleurs de supports

<.>

5. Débogueur pour Chrome

Mappez les points d'arrêt de vscode vers Chrome pour un débogage facile

6. Courier New

Une belle police

7.

Pratique pour afficher les journaux git, un must pour les gros utilisateurs de git

8. Prise en charge HTML CSS

Nom et identifiant de la classe CSS d'invite intelligente

Extraits HTML

Balises HTML d'invite intelligente et significations des balises

10. Extraits de code JavaScript (ES6)

Les conseils intelligents sur la syntaxe ES6 et la saisie rapide prennent en charge non seulement .js, mais également .ts, .jsx, .tsx, .html, .vue, éliminant ainsi le besoin de le configurer pour prendre en charge divers codes Time contenant js. fichiers

11. Extraits de code jQuery

Conseils intelligents pour le code jQuery

12. Aperçu du démarque amélioré

Aperçu en temps réel du démarque, un incontournable pour les utilisateurs de démarque

13. markdownlint

Correction de la syntaxe Markdown

14. 🎜>

Je pense personnellement que c'est le meilleur thème d'icônes vscode, qui prend en charge le changement d'icônes de différentes couleurs. Il convient de souligner que ce plug-in est mis à jour extrêmement fréquemment, fondamentalement cohérent avec la fréquence de mise à jour de vscode

<.>

15. ouvrir dans le navigateur

Contrairement à l'IDE, vscode peut ouvrir le HTML directement dans le navigateur, et le plug-in prend en charge les touches de raccourci et le droit. bouton de la souris. Ouvrez les fichiers HTML dans le navigateur et prenez en charge l'ouverture personnalisée des navigateurs spécifiés, notamment : Firefox, Chrome, Opera, IE et Safari

.

16. Path Intellisense

Invite automatiquement les chemins de fichiers et prend en charge divers fichiers d'importation rapide

17. Extraits de syntaxe React/Redux/react-router

　Conseils intelligents sur la syntaxe React/Redux/react-router

18. Vetur

Plug-in intégré multifonctionnel Vue, comprenant : coloration syntaxique, invites intelligentes, emmet, invites d'erreur, formatage, complétion automatique Complet, débogueur. vscode est officiellement désigné plug-in Vue, un incontournable pour les développeurs Vue.

19. vscode-icon

Laissez le répertoire de l'arborescence des ressources vscode ajouter

20. HTMLHint

　détection de code HTML

21. Gestionnaire de projet

Outil pour basculer rapidement entre plusieurs projets

22, en-tête de fichier

Modèle de commentaire supérieur, vous pouvez définir l'auteur et l'heure et d'autres informations, et l'heure de la dernière modification sera automatiquement mise à jour. La touche de raccourci ctrl+alt+i entrera automatiquement les informations sur l'auteur et les informations de modification au début du fichier

23. taille du fichier

La taille actuelle du fichier est affichée dans la barre d'état en bas. Après avoir cliqué, vous pouvez également voir l'heure détaillée de création et de modification

.

24. quokka

Un plug-in d'outil de débogage qui fournit des commentaires en temps réel basés sur le code que vous écrivez. Il est facile à configurer et offre la possibilité de prévisualiser les fonctions et les résultats des valeurs calculées des variables. De plus, dans les projets utilisant JSX ou TypeScript, il peut être utilisé immédiatement

25, CSS Peek

Utilisation ce plug-in, vous pouvez retracer l'endroit où les classes CSS et les identifiants sont définis dans la feuille de style. Lorsque vous cliquez avec le bouton droit sur le sélecteur dans le fichier HTML et sélectionnez l'option "Aller à la définition et à la définition", il vous enverra le code CSS pour le style.

26. HTML Boilerplate

En utilisant le plug-in de modèle HTML, vous vous débarrassez de la nécessité de réécrire les en-têtes et en-têtes pour les nouveaux fichiers HTML. Le problème avec les balises body. Il vous suffit de taper du HTML dans un fichier vide et d'appuyer sur la touche Tab pour générer une structure de document propre.

27. Prettier

Prettier est actuellement le formateur de code le plus populaire dans le développement Web. Une fois ce plugin installé, il peut appliquer automatiquement Prettier et formater rapidement l'intégralité du document JS et CSS dans un style de code unifié. Si vous souhaitez toujours utiliser ESLint, il existe également un plug-in Prettier – Eslint, vous ne voulez pas le manquer !

28. Informations sur les couleurs

Vous fournit des informations sur l'utilisation des couleurs en CSS. Vous pouvez prévisualiser les informations sur le modèle de couleur (HEX, RVB, HSL et CMJN) dans le bloc de couleur en passant simplement le curseur sur la couleur.

29. Polices d'icônes

Il s'agit d'un plug-in qui peut ajouter des polices d'icônes au projet. Le plugin prend en charge plus de 20 jeux d'icônes populaires, notamment Font Awesome, Ionicons, Glyphicons et Material Design Icons

30, Minify

　Il s'agit d'une application permettant de compresser et de fusionner des fichiers JavaScript et CSS. Il offre un grand nombre de paramètres personnalisables, ainsi que la possibilité de compresser, d'enregistrer et d'exporter automatiquement vers des fichiers .min. Il fonctionne avec JavaScript, CSS et HTML via respectivement uglify-js, clean-css et html-minifier. Utilisez F1 pour exécuter le minificateur de fichiers Minify

31. VueHelper

extrait de code

32. Snippets Vue 2

33, Extraits Vue VSCode

Plug-in d'auto-complétion de code VUE

34, Historique Git

　Historique des soumissions Git

35. Synchronisation des paramètres

Synchronisez vos paramètres et plug-ins

36. Extraits de code Reactjs

　Un outil d'extraits de code automatique React.

37. Terminal

　 vs le plug-in de ligne de commande intégré au code est également plus pratique.
38. npm Intellisense

Utilisé pour remplir automatiquement les modules npm dans l'instruction d'importation.

39, npm

Cette extension prend en charge l'exécution des scripts npm définis dans le fichier et la vérification que les modules installés package.json. package.json

40, Couleurs des fenêtres

Chaque fenêtre VSCode peut être colorée de manière unique et automatiquement.

41. Plug-in du serveur Live

Ouvrir le serveur local

42. Commentaire Traduire

plug-in de traduction, sélectionnez le texte à traduire

43 . Tiny Light

Thème de protection des yeux beige, similaire à Hbuild

Pour plus de connaissances liées à la programmation, veuillez visiter :

Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!