23 plug-ins VSCode front-end qui améliorent l'efficacité du développement (venez les récupérer)

Cet article partagera avec vous 23 plug-ins VSCode front-end pour vous aider à améliorer l'efficacité du développement et à obtenir deux fois le résultat avec la moitié de l'effort. Venez le récupérer !

VSCode est un IDE puissant pour notre développement front-end, il est donc nécessaire de choisir des plug-ins faciles à utiliser pour améliorer l'efficacité du développement, puis d'utiliser le temps restant pour pêcher. [Apprentissage recommandé : "Tutoriel d'introduction à vscode"]

Chinois (simplifié)

vscode Nous savons tous que c'est le logiciel open source de Microsoft Pour les étudiants qui ne sont pas bons en anglais, la première chose à faire. faire est d'utiliser la localisation chinoise, l'auteur recommande donc le plug-in chinois.

Pack de langue chinois (simplifié) pour Visual Studio Code : ce pack de langue chinois (simplifié) fournit une interface localisée pour VS Code.

• Nom du plug-in : Pack de langue chinois (simplifié) (chinois simplifié) pour Visual Studio Code
• Adresse officielle : marketplace.visualstudio.com/items?itemN…
• Utilisation : Par en utilisant " La commande "Configurer la langue d'affichage" définit explicitement la langue d'affichage du VS Code, qui peut remplacer la langue par défaut de l'interface utilisateur. Appuyez sur Ctrl+Shift+P pour afficher le panneau de commandes, puis tapez display pour filtrer et afficher la commande Configure Display Language. Appuyez sur "Entrée" et une liste des langues installées par paramètres régionaux s'affiche avec le paramètre de langue actuel en surbrillance. Sélectionnez une autre « Langue » pour changer la langue de l'interface utilisateur. Consultez la documentation pour plus d'informations.

Polacode-2020

Polacode-2020 : Si vous voulez un moyen simple de donner ces magnifiques effets visuels à n'importe quelle sélection de vos extraits.

• Nom du plug-in : Polacode-2020
• Adresse officielle : marketplace.visualstudio.com/items?itemN…
• Caractéristiques :

• • Sélectionnez la gamme que vous souhaitez pour prendre une capture d'écran de Générer des captures d'écran de blocs de code
  • Vous pouvez définir l'ombre et la couleur d'arrière-plan souhaitées

• Utilisation : commande+shift+p, fn+F1 (Mac) / ctrl+shift+ p (Fenêtre), sélectionnez Polacode, puis sélectionnez la plage que vous souhaitez capturer

CodeSnap

CodeSnap : prenez de belles captures d'écran de votre code dans VS Code !

• Nom du plug-in : CodeSnap
• Adresse officielle : marketplace.visualstudio.com/items?itemN…
• Caractéristiques :

• • Enregistrez rapidement le code Capture d'écran de
  • Copier la capture d'écran dans le presse-papiers
  • Afficher le numéro de ligne
  • De nombreuses autres options de configuration

• Utilisation : sélectionnez le bloc de code qui doit être intercepté, puis cliquez avec le bouton droit sur CodeSnap pour

Aperçu de l'image

Aperçu de l'image : Vous pouvez prévisualiser l'image dans le vide de l'éditeur et en passant la souris sur l'image.

• Nom du plug-in : Aperçu de l'image
• Adresse officielle : marketplace.visualstudio.com/items?itemN…
• Caractéristiques : Les images introduites dans les balises ou les styles HTML peuvent être modifiées. Aperçu dans l'intervalle de l'éditeur et lorsque la souris survole l'image
Lors du développement de certaines pages, vous rencontrerez toujours le besoin d'avoir de nombreuses petites images. À l'heure actuelle, l'utilisation d'images Sprite peut réduire le nombre de requêtes du serveur et économiser de la bande passante. Sans l'aide de l'interface utilisateur, choisir ce plug-in est un bon choix. .
• Sprites d'images : les sprites d'images sont des collections d'images placées dans une seule image. Les pages Web contenant de nombreuses images peuvent prendre beaucoup de temps à charger et générer plusieurs requêtes de serveur. L'utilisation de sprites d'images réduira le nombre de requêtes du serveur et économisera de la bande passante.

Nom du plug-in : Image Sprites

Adresse officielle :

marketplace.visualstudio.com/items?itemN…

Caractéristiques : Facile Créer et mettre à jour des sprites d'image

Prise en charge des images png, jpg et bmp

• Configurer la disposition verticale ou horizontale des sprites
• Générer des fichiers LESS, Sass ou CSS en utilisant les positions des images de sprite
Vous pouvez gérer tous les sprites avec différentes options de configuration

• Utilisation :
  Sprite toutes les images du dossier
  • Faites un clic droit sur le dossier contenant les images et sélectionnez Créer une image Sprite

Sprite quelques images

• Sélectionnez l'image, faites un clic droit et sélectionnez Créer un sprite d'image

• • Ces deux méthodes généreront un fichier de paramètres .sprite et le fichier par défaut généré. fichier image.css

• Aperçu SVG
  • Lorsque vous trouvez une image svg appropriée mais qu'elle est inappropriée en raison de la couleur, de la forme, etc., vous pouvez utiliser ce plug-in pour modifier il.
  Aperçu SVG : aperçu SVG pour VSCode.

Nom du plug-in : SVG Preview

• Adresse officielle :
  marketplace.visualstudio.com/items?itemN…

Caractéristiques :

fichiers svg et l’intérieur de svg Panoramique et zoom du fichier

(jusqu'à 32767%)

• file-size
file-size : Une extension simple. Affiche la taille actuelle du fichier texte dans la barre d'état. Le statut sera mis à jour lorsque vous enregistrerez un fichier ou modifierez l'onglet actif. Le Nom du plug-in : file-size

• Adresse officielle :
  • Marketplace.visualstudio.com/items Itemn ...
  Live Server

Live Server : démarrez un serveur de développement local avec des capacités de rechargement en direct pour les pages statiques et dynamiques.

• Nom du plug-in : Live Server
• Adresse officielle : marketplace.visualstudio.com/items?itemN…
• Caractéristiques :

• • Avec navigateur en temps réel - Chargement rapide Développer un serveur temps réel.
  • Démarrez ou arrêtez le serveur d'un simple clic depuis la barre d'état.
  • Ouvrez un fichier HTML dans le navigateur à partir du menu Explorateur. [Démonstration Gif rapide].
  • Prend en charge l'exclusion de fichiers pour la détection des modifications.
  • Contrôle des raccourcis clavier.
  • Numéro de port personnalisable, répertoire racine du serveur et navigateur par défaut.
  • Prend en charge n'importe quel navigateur (par exemple : Firefox Nightly) en utilisant la ligne de commande avancée.
  • Prise en charge du module complémentaire de débogage Chrome (plus d'informations). [Démonstration Gif rapide].
  • Connectez-vous à distance via WLAN (ex : connectez-vous à l'aide d'un appareil mobile) [Besoin d'aide ? Voir la section FAQ]
  • Utilisez le nom d'hôte préféré * (localhost ou 127.0.0.1) *.
  • Balises de support personnalisables pour la fonctionnalité Live Reload. (La valeur par défaut est Corps ou tête)
  • Support SVG
  • Support https.
  • Agents de support.
  • Activer CORS
  • Prend en charge plusieurs espaces de travail racine.
  • Prend en charge n'importe quel fichier ou même les pages dynamiques via Live Server Web Extension.

Profile Switcher

Profile Switcher : Cette extension vous permet de définir de nombreux profils de paramètres et vous pouvez basculer facilement entre eux. L'idée originale de cette extension est venue de mon souhait de disposer d'un moyen simple de basculer mon VS Code vers des paramètres permettant de mieux optimiser le rendu (changer de thème, augmenter la taille de la police, etc.).

• Nom du plug-in : Profile Switcher
• Adresse officielle : marketplace.visualstudio.com/items?itemN…
• Caractéristiques : Cette extension introduit quatre nouvelles commandes qui peuvent être utilisées à partir du panneau de commande. . Toutes les commandes commencent par Profile Switcher

Project Manager

Lorsque vous devez ouvrir de nombreux projets de natures différentes dans vscode, Project Manager est un bon plug-in de gestion de projet.

Chef de projet : il vous aide à accéder facilement à vos projets, peu importe où ils se trouvent. Ne manquez plus ces éléments importants. Vous pouvez définir vos propres Projets (également appelés Favoris), ou choisir de détecter automatiquement les dossiers Git, Mercurial ou SVN, VSCodedossiers ou tousautres dossiers.

• Nom du plug-in : Project Manager
• Adresse officielle : marketplace.visualstudio.com/items?itemN…
• Caractéristiques : Commandes disponibles :

• • Chef de projet : Enregistrer Le projet enregistrera le dossier/espace de travail actuel en tant que nouveau projet
  • Gestionnaire de projet : modifier le projet Modifiez manuellement votre projet (projects.json)
  • Gestionnaire de projet : listez les projets à ouvrir Listez tous les projets enregistrés/détectés et sélectionnez-en un
  • Gestionnaire de projet : répertorier les projets à ouvrir dans une nouvelle fenêtreListez tous les projets enregistrés/détectés et sélectionnez-en un à ouvrir dans une nouvelle fenêtre
  • Gestionnaire de projet : filtrer les projets par balise par balise sélectionnée Filtrer les projets favoris

• Utilisation :

• • L'extension Project Manager possède sa propre barre latérale avec diverses commandes pour améliorer l'efficacité de votre travail
  • Vous pouvez définir des balises personnalisées (la synchronisation des paramètres peut vous aider. Nous changeons d'ordinateur, réinstallons le système, ou synchronisez les paramètres sur VSCode entre plusieurs ordinateurs.
  Synchronisation des paramètres : synchronisation des paramètres pour Visual Studio Code.

Nom du plug-in : Paramètres Sync

Adresse officielle :

marketplace.visualstudio.com/items?itemN…

npm

npm : extension Prend en charge les fichiers en cours d'exécution définis dans le script npm.
Nom du plug-in : npm
• Adresse officielle :
marketplace.visualstudio.com/items?itemN…

Caractéristiques :

• npm est signalé. Un avertissement propose d'exécuter une solution rapide.
Les commandes utilisées pour exécuter le script sont disponibles dans cette catégorie npm

• ouvrir dans le navigateur

ouvrir dans le navigateur : Cette extension permet Votre fichier HTML s'ouvre dans le navigateur.

• • Nom du plug-in : ouvrir dans le navigateur
  Adresse officielle :

marketplace.visualstudio.com/items?itemN…

Usage

• Navigateur par défautAlt + B pour ouvrir le fichier
html
• Shift + Alt + B actuel, ou sélectionnez un navigateur. Vous pouvez également faire un clic droit comme sur l'image :

• • Lorsque vous sélectionnez oepn dans Autres navigateurs, une liste de navigateurs s'affichera et vous pourrez en choisir un pour ouvrir le fichier actuel.

Lorsque vous sélectionnez Ouvrir dans le navigateur par défaut, la valeur par défaut est

• le navigateur par défaut du système
  • . Si vous souhaitez configurer le navigateur par défaut, vous pouvez le remplacer comme ceci :

GitLens - Git suralimenté

GitLens - Git suralimenté : GitLens suralimente Git dans VSCode et débloque des connaissances inexploitées dans chaque référentiel. Il vous aide intuitivement à visualiser la paternité du code avec Git, à comparer les commentaires et CodeLens, à naviguer et à explorer de manière transparente les référentiels Git, à obtenir des informations précieuses avec des visualisations riches et de puissantes commandes de comparaison et plus encore.

• Nom du plug-in : GitLens - Git supercharged
• Adresse officielle : marketplace.visualstudio.com/items?itemN…

Historique de Git

Historique de Git : Afficher le journal git, l'historique des fichiers, fusionner des branches ou des commits.

• Nom du plug-in : Git History
• Adresse officielle : marketplace.visualstudio.com/items?itemN…

SVN

SVN : Ce plugin dépend du système Installation SVN, vous devez donc d'abord installer TortoiseSVN.

• Nom du plug-in : SVN
• Adresse officielle : marketplace.visualstudio.com/items?itemN…
Caractéristiques : Voir : Gestion du code source Voir
Diff rapide dans le caniveau

• Barre d'état
  Créer une liste de modifications
  Ajouter des fichiers
  Annuler les modifications
  Supprimer des fichiers
  Créer une branche
  Changer de branche
  • "Créer un patch"
  Code postal : le code postal peut être utilisé pour créer et tester Effectuez des requêtes HTTP/s simples et complexes et affichez les réponses.
  Nom du plug-in : Code postal
  Adresse officielle :
  • marketplace.visualstudio.com/items?itemN…
  • Client REST
  Client REST : Client REST vous permet d'envoyer des requêtes HTTP et d'afficher les réponses directement dans Visual Studio Code.

Nom du plug-in : TEST Client

Adresse officielle : marketplace.visualstudio.com/items?itemN…

• Émettre une demande
• Émettre une demande cURL

Partage en direct

Live Share : Live Share vous permet de collaborer avec d'autres personnes sur l'édition et le débogage en temps réel, quel que soit le langage de programmation que vous utilisez ou le type d'application que vous créez. Il vous permet de partager instantanément (et en toute sécurité) votre projet en cours, puis, si nécessaire, de partager des sessions de débogage, des instances de terminal, des applications Web localhost, des appels vocaux et bien plus encore ! Les développeurs qui rejoignent votre session reçoivent tout le contexte de l'éditeur (par exemple, services linguistiques, débogage) de votre environnement, garantissant ainsi qu'ils peuvent commencer à collaborer de manière productive immédiatement sans avoir à cloner de référentiels ou à installer de SDK.

• Nom du plugin : Live Share
• Adresse officielle : marketplace.visualstudio.com/items?itemN…

Draw.io Integration

Intégration Draw.io : Cette extension non officielle intègre Draw.io (également connu sous le nom de diagrammes.net) dans VS Code.

• Nom du plug-in : Draw.io Integration
• Adresse officielle : marketplace.visualstudio.com/items?itemN…
• Caractéristiques :

• • Au tirage au sort. Éditeur io Modifier dans un fichier ou un fichier .drawio. .dio.drawio.svg.drawio.png

• • • Pour créer un nouveau diagramme, créez simplement un fichier .drawio, .drawio.svg ou *.drawio.png vide et ouvrez-le. **
    • .drawio.svg.svg est un fichier valide qui peut être intégré dans le fichier readme de Github ! Aucune exportation requise.
    • .drawio.png est un fichier .png valide ! Aucune exportation requise. Vous devriez utiliser .svg autant que possible – ils sont tellement meilleurs !
    • Pour convertir entre différents formats, utilisez la commande Draw.io : Convertir en....

• • Utilisez la version hors ligne de Draw.io par défaut.
  • Plusieurs thèmes Draw.io disponibles.
  • Collaborez avec d'autres pour modifier des diagrammes à l'aide de Liveshare.
  • Les nœuds/bords peuvent être liés avec des étendues de code.

Markdown All in One

Markdown All in One : Tout ce dont vous avez besoin pour Markdown (raccourcis clavier, table des matières, aperçu automatique, etc.).

• Nom du plug-in : Markdown All in One
• Adresse officielle : marketplace.visualstudio.com/items?itemN…

Markdown PDF

Mar kdown PDF : Ce L'extension démarquera Convertissez les fichiers en fichiers PDF, HTML, PNG ou JPEG.

• Nom du plug-in : Markdown PDF
• Adresse officielle : marketplace.visualstudio.com/items?itemN…
• Caractéristiques : Prend en charge les fonctions suivantes :
Grammaire Mettez en surbrillance

• émoticônes
  markdown-it-checkbox
  conteneur de démarques
  markdown il comprend
  plante UML

markdown-it - plantuml
Sirène

• • Aperçu Markdown amélioré

Aperçu Markdown amélioré : Aperçu Markdown améliorations.

• Nom du plug-in : Markdown Preview Enhanced
• Adresse officielle : marketplace.visualstudio.com/items?itemN…

Pour plus de connaissances sur VSCode, veuillez visiter : tutoriel vscode !

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!