Table des matières
1. Indent-Rainbow
2. Thème d'icône matérielle
6.
10 Little Overlord
11. traduire
12.filesize
13. TabNine
14. Balise de fermeture automatique
15. Importation automatique
16. automatiquement renommé
est 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, cela fonctionne immédiatement dans les projets utilisant JSX ou TypeScript.
" >En utilisant ce plugin, vous pouvez tracer l'endroit où les classes et les identifiants CSS 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.
En utilisant le plug-in de modèle HTML, vous vous débarrassez de la difficulté de réécrire les balises head et body pour les nouveaux fichiers HTML. 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.
Améliorez votre code et rendez-le plus attrayant en ajoutant des commentaires colorés.
mettra en évidence les avertissements, les erreurs, les problèmes de syntaxe (lignes ondulées d'invites), etc. diagnostiqués par l'éditeur en remplissant l'arrière-plan de la ligne avec de la couleur et affichera les informations de diagnostic à la fin.
est actuellement le formateur de code le plus populaire dans le développement Web. Une fois ce plugin installé, il applique automatiquement Prettier et formate rapidement des documents JS et CSS entiers dans un style de code unifié. Si vous souhaitez toujours utiliser ESLint, il existe également un plug-in Prettier-Eslint, ne le manquez pas !
Un plug-in de mise en évidence de code plus couramment utilisé
Color Picker
26. ESLint
27. Mettez en surbrillance les espaces de fin
compte le nombre total de lignes de code, le nombre de lignes de commentaires, le nombre de lignes vides et la langue utilisée.
Colorisez les supports correspondants
32. Path Intellisense
33. Rainbow Fart
Maison outils de développement VSCode 36 plug-ins frontaux couramment utilisés dans vscode, recherchez et téléchargez directement !

36 plug-ins frontaux couramment utilisés dans vscode, recherchez et téléchargez directement !

Aug 19, 2021 am 10:47 AM
vscode 前端插件

36 plug-ins frontaux couramment utilisés dans vscode, recherchez et téléchargez directement !

Profitez de votre temps libre pour trier certains plug-ins vscode couramment utilisés, afin de devoir les rechercher et les télécharger à nouveau lorsque vous changerez d'ordinateur plus tard. , les étudiants qui en ont besoin peuvent d'abord le sauvegarder, et nous continuerons à le mettre à jour si nous obtenons de nouveaux plug-ins plus tard ! [Apprentissage recommandé : "Tutoriel vscode"]

1. Indent-Rainbow

Laissez l'indentation être colorée

2. Thème d'icône matérielle

Belle icône de fichier

3.

Formatage du code

4. Mode d'alimentation

Un effet de frappe au clavier sympa

5. Vetur

Puissant outil de support de développement de vue

6.

7. Vue CSS Peek

Fournit un support de conversion CSS pour les fichiers vue d'une seule page

8 Vue Peek

Cliquez sur le composant pour accéder au fichier de définition du composant

9.

Certaines données, méthodes et autres fonctions de Vue complètent automatiquement les invites, ce qui est pratique pour écrire rapidement du code

10 Little Overlord

Un Super Mario qui peut être joué en vscode

11. traduire

Traduction de mots. Maintenez la souris sur la sélection pendant quelques secondes pour afficher le contenu traduit.

12.filesize

Affiche la taille actuelle du fichier dans la barre d'état.

13. TabNine

Al outil de complétion de code auxiliaire. Les champs appropriés peuvent être mis en correspondance pour vous en fonction des habitudes de codage que vous avez écrites.

14. Balise de fermeture automatique

Fermer automatiquement la balise

15. Importation automatique

Module d'importation automatique

16. automatiquement renommé

17. Quokka

est 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, cela fonctionne immédiatement dans les projets utilisant JSX ou TypeScript.

18. CSS Peek

En utilisant ce plugin, vous pouvez tracer l'endroit où les classes et les identifiants CSS 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.

19. HTML Boilerplate

En utilisant le plug-in de modèle HTML, vous vous débarrassez de la difficulté de réécrire les balises head et body pour les nouveaux fichiers HTML. 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.

20. De meilleurs commentaires

Améliorez votre code et rendez-le plus attrayant en ajoutant des commentaires colorés.

21. Error Lens

mettra en évidence les avertissements, les erreurs, les problèmes de syntaxe (lignes ondulées d'invites), etc. diagnostiqués par l'éditeur en remplissant l'arrière-plan de la ligne avec de la couleur et affichera les informations de diagnostic à la fin.

22. Prettier

est actuellement le formateur de code le plus populaire dans le développement Web. Une fois ce plugin installé, il applique automatiquement Prettier et formate rapidement des documents JS et CSS entiers dans un style de code unifié. Si vous souhaitez toujours utiliser ESLint, il existe également un plug-in Prettier-Eslint, ne le manquez pas !

23. Color Highlight

Un plug-in de mise en évidence de code plus couramment utilisé

24. Color Picker

Color Picker

25. Écrit par

26. ESLint

Eslint plugin

27. Mettez en surbrillance les espaces de fin

TODO Highlight

28.

29. VS Code Counter

compte le nombre total de lignes de code, le nombre de lignes de commentaires, le nombre de lignes vides et la langue utilisée.

30. Coloriseur de paires de supports

Colorisez les supports correspondants

31. Par exemple, si le mot « banane » est mal orthographié comme « banane », il vous sera demandé si vous souhaitez le remplacer par « banane ». Vous pouvez également ajouter « banane » au dictionnaire du vérificateur.

32. Path Intellisense

Compléter automatiquement les noms de fichiers

33. Rainbow Fart

Aperçu officiel : VSCode Rainbow Fart est une extension qui continue de vous féliciter pour vos compétences en écriture lorsque vous programmez Play. des voix réelles qui sont proches de la signification du code en fonction des mots-clés du code.

34. any-rule

Vous pouvez utiliser rapidement des expressions régulières dans vscode, pas besoin d'utiliser Du Niang !

35. ## Todo Tree

Todo Tree est un plug-in qui invite à effectuer des événements. Ajoutez

au début du commentaire de code et l'intégralité du commentaire sera mise en surbrillance //TODO

36. project-tree

Il s'agit d'un plug-in qui génère automatiquement la structure du projet

Pour plus de connaissances sur 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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment afficher des documents Word dans vscode Comment afficher des documents Word dans vscode Comment afficher des documents Word dans vscode Comment afficher des documents Word dans vscode May 09, 2024 am 09:37 AM

Tout d'abord, ouvrez le logiciel vscode sur l'ordinateur, cliquez sur l'icône [Extension] à gauche, comme indiqué en ① sur la figure. Ensuite, entrez [officeviewer] dans la zone de recherche de l'interface d'extension, comme indiqué en ② sur la figure. . Ensuite, dans la recherche, sélectionnez [officeviewer] à installer dans les résultats, comme indiqué dans ③ sur la figure. Enfin, ouvrez le fichier, tel que docx, pdf, etc., comme indiqué ci-dessous.

Comment dessiner un organigramme avec vscode_Comment dessiner un organigramme avec le code visual_studio Comment dessiner un organigramme avec vscode_Comment dessiner un organigramme avec le code visual_studio Apr 23, 2024 pm 02:13 PM

Tout d'abord, ouvrez le code Visual Studio sur l'ordinateur, cliquez sur les quatre boutons carrés à gauche, puis saisissez draw.io dans la zone de recherche pour interroger le plug-in, cliquez sur Installer. Après l'installation, créez un nouveau fichier test.drawio, puis. sélectionnez le fichier test.drawio, entrez dans le mode d'édition sur la gauche. Il y a différents graphiques sur le côté. Vous pouvez dessiner l'organigramme en sélectionnant à volonté, cliquez sur Fichier → Intégrer → svg puis sélectionnez Copier le svg. Collez le code svg copié dans le code html. Ouvrez la page Web html et vous pourrez le voir. Cliquez sur l'image sur la page Web pour accéder à l'organigramme. Sur cette page, vous pouvez zoomer et dézoomer. organigramme. Ici, nous choisissons de cliquer sur le motif de crayon dans le coin inférieur droit pour accéder à la page Web.

Les Chinois de Caltech utilisent l'IA pour renverser les preuves mathématiques ! Accélérer 5 fois a choqué Tao Zhexuan, 80% des étapes mathématiques sont entièrement automatisées Les Chinois de Caltech utilisent l'IA pour renverser les preuves mathématiques ! Accélérer 5 fois a choqué Tao Zhexuan, 80% des étapes mathématiques sont entièrement automatisées Apr 23, 2024 pm 03:01 PM

LeanCopilot, cet outil mathématique formel vanté par de nombreux mathématiciens comme Terence Tao, a encore évolué ? Tout à l'heure, Anima Anandkumar, professeur à Caltech, a annoncé que l'équipe avait publié une version étendue de l'article LeanCopilot et mis à jour la base de code. Adresse de l'article image : https://arxiv.org/pdf/2404.12534.pdf Les dernières expériences montrent que cet outil Copilot peut automatiser plus de 80 % des étapes de preuve mathématique ! Ce record est 2,3 fois meilleur que le précédent record d’Esope. Et, comme auparavant, il est open source sous licence MIT. Sur la photo, il s'agit de Song Peiyang, un garçon chinois.

Comment ajouter des fichiers à l'espace de travail vscode Comment ajouter des fichiers à l'espace de travail vscode Comment ajouter des fichiers à l'espace de travail vscode Comment ajouter des fichiers à l'espace de travail vscode May 09, 2024 am 09:43 AM

1. Tout d'abord, ouvrez le logiciel vscode, cliquez sur l'icône de l'explorateur et recherchez la fenêtre de l'espace de travail 2. Ensuite, cliquez sur le menu Fichier dans le coin supérieur gauche et recherchez l'option Ajouter un dossier à l'espace de travail 3. Enfin, recherchez l'emplacement du dossier dans le disque local, cliquez sur le bouton Ajouter

Comment activer les mises à jour en arrière-plan dans vscode Comment activer les mises à jour en arrière-plan dans vscode Comment activer les mises à jour en arrière-plan dans vscode Comment activer les mises à jour en arrière-plan dans vscode May 09, 2024 am 09:52 AM

1. Tout d'abord, après avoir ouvert l'interface, cliquez sur le menu Fichier dans le coin supérieur gauche. 2. Ensuite, cliquez sur le bouton Paramètres dans la colonne des préférences. 3. Ensuite, dans la page des paramètres qui apparaît, recherchez la section de mise à jour. Enfin, cliquez sur la souris pour le vérifier et l'activer. Téléchargez et installez le nouveau bouton de version de VSCode en arrière-plan sous Windows et redémarrez le programme.

Comment désactiver le fichier de configuration wsl dans vscode Comment désactiver le fichier de configuration wsl dans vscode Comment désactiver le fichier de configuration wsl dans vscode Comment désactiver le fichier de configuration wsl dans vscode May 09, 2024 am 10:30 AM

1. Tout d'abord, ouvrez l'option des paramètres dans le menu des paramètres. 2. Ensuite, recherchez la colonne du terminal dans la page couramment utilisée. 3. Enfin, décochez le bouton usewslprofiles sur le côté droit de la colonne.

Comment définir l'insertion fluide de l'animation dans VScode Tutoriel VScode pour définir l'insertion fluide de l'animation Comment définir l'insertion fluide de l'animation dans VScode Tutoriel VScode pour définir l'insertion fluide de l'animation May 09, 2024 am 09:49 AM

1. Tout d'abord, après avoir ouvert l'interface, cliquez sur l'interface de l'espace de travail 2. Ensuite, dans le panneau d'édition ouvert, cliquez sur le menu Fichier 3. Ensuite, cliquez sur le bouton Paramètres sous la colonne Préférences 4. Enfin, cliquez sur la souris pour vérifier le CursorSmoothCaretAnimation bouton et enregistrez. Il suffit de le définir

Comment ouvrir les autorisations de confiance de l'espace de travail dans Vscode Méthode Vscode pour ouvrir les autorisations de confiance de l'espace de travail Comment ouvrir les autorisations de confiance de l'espace de travail dans Vscode Méthode Vscode pour ouvrir les autorisations de confiance de l'espace de travail May 09, 2024 am 10:34 AM

1. Tout d'abord, après avoir ouvert la fenêtre d'édition, cliquez sur l'icône de configuration dans le coin inférieur gauche 2. Ensuite, cliquez sur le bouton Gérer l'approbation de l'espace de travail dans le sous-menu qui s'ouvre 3. Ensuite, recherchez la page dans la fenêtre d'édition 4. Enfin, selon à votre bureau Vérifiez simplement les instructions pertinentes si nécessaire

See all articles