[Organisation et partage] 30 plug-ins VSCode, il y en a toujours un qui vous convient

Cet article présente principalement quelques bons plug-ins que j'ai utilisés dans le processus d'utilisation de VSCode au fil des ans. Ces 30 plug-ins VSCode, il y en a toujours un qui vous convient !

1. Live Server

Live Server est un petit serveur avec une fonction de chargement en temps réel. Vous pouvez utiliser le serveur live comme serveur en temps réel dans le projet pour afficher la page Web développée ou l'effet du projet en temps réel. temps. [Apprentissage recommandé : "Tutoriel d'introduction au vscode"]

Il démarre un serveur de développement local avec fonction de rechargement en temps réel pour les pages statiques et dynamiques. Vous pouvez démarrer ou arrêter le serveur d'un simple clic dans la barre d'état.

2. Balise de renommage automatique

Utilisez cette extension pour renommer automatiquement les balises d'ouverture et de fermeture d'une balise HTML lorsque vous la renommez. Évitez de modifier uniquement la balise d'ouverture et d'oublier de modifier la balise de fermeture. L'extension fonctionne avec HTML, XML, PHP et JavaScript.

3. Bracket Pair Colorizer

Utilisez ce plug-in pour distinguer les parenthèses dans le code avec différentes couleurs, ce qui est très pratique pour les codes avec de nombreuses parenthèses. Le plugin prend également en charge les couleurs de support personnalisées.

4. Color Highlight

Cette extension peut être utilisée pour styliser les couleurs CSS. En plus du CSS, il colore également les fichiers JavaScript, HTML, JSON, etc. qui n'affichent pas les couleurs par défaut. Le plugin teinte les noms de couleurs, les couleurs RVB, RGBA et HEX.

5. Better Comments

L'extension Better Comments peut nous aider à créer des commentaires plus conviviaux dans le code, avec différentes formes et couleurs de commentaires parmi lesquelles choisir.

6. GitLens

GitLens améliore la fonctionnalité Git intégrée à Visual Studio Code. GitLens nous aide à mieux comprendre notre code. Voyez rapidement qui a modifié une ligne ou un bloc de code, pourquoi et quand. De plus, cela nous permet d'explorer facilement l'historique et l'évolution de la base de code.

7. VSCode-Icons

VSCode-Icons est un plug-in d'image de fichier qui peut donner différentes icônes à différents types de fichiers du projet. Cela nous permet de différencier plus facilement les différents types de fichiers.

Une fois l'installation terminée, suivez les étapes ci-dessous pour l'utiliser : Fichier → Préférences → Thème d'icône de fichier → VSCode-Icons.

8. Tabnine

tabnine est un plug-in multilingue qui peut nous aider automatiquement à terminer la saisie du code. L'objectif de Tabnine est d'augmenter la productivité des développeurs grâce à des systèmes basés sur l'IA.

9. Tableau de bord du projet

Le tableau de bord du projet est un plug-in de tableau de bord de projet qui peut épingler les dossiers, fichiers, etc. fréquemment consultés au tableau de bord pour y accéder rapidement.

10. CodeSnap

CodeSnap est un plug-in de capture d'écran de code vscode. Sélectionnez simplement le segment de code correspondant dans le projet pour créer rapidement une capture d'écran du code.

11. CSS Peek

Le plug-in CSS Peek nous permet de sélectionner un nom de classe ou d'identifiant en HTML et de maintenir enfoncée la touche Ctrl + bouton gauche de la souris pour localiser directement la position CSS du nom, améliorer l’efficacité du développement.

12. Path Autocomplete

Path Autocomplete fournit la saisie semi-automatique du chemin pour VS Code, vous n'avez donc pas à vous souvenir de ces longs chemins de fichiers.

13. Balise de fermeture automatique

Le plug-in Auto Close Tag est utilisé pour compléter automatiquement les balises de fermeture HTML.

14. Vetur

Un plugin indispensable pour le développement de Vue, qui fournit des outils utiles pour Vue.js tels que le débogage, la vérification des erreurs, la coloration syntaxique, les extraits de code.

15. IntelliCode

IntelliCode est conçu pour aider les développeurs à fournir des suggestions de code intelligentes. Il prend en charge Python, TypeScript/JavaScript, React et Java par défaut. IntelliCode fait gagner du temps en plaçant le contenu que vous êtes le plus susceptible d'utiliser en haut de la liste. Les recommandations IntelliCode sont basées sur des milliers de projets open source sur GitHub.

16. Le plugin Import Cast

est utilisé pour afficher la taille des packages importés en ligne dans l'éditeur. Cette extension utilise webpack pour détecter la taille des packages importés.

17. Beautify

Beautify peut nous aider à formater l'affichage du code d'une manière plus belle. Il prend en charge les langages populaires tels que JavaScript, JSON, CSS, Sass et HTML.

18. Code Time

Code Time peut calculer la durée pendant laquelle nous utilisons Visual Studio Code. Une variété d’indicateurs de données sont fournis.

19. Synchronisation des paramètres

La synchronisation des paramètres est utilisée pour enregistrer les paramètres de Visual Studio Code sur GitHub et les rendre facilement disponibles sur d'autres ordinateurs, tels que des informations sur les extensions ou les paramètres système. Ce plugin facilite la configuration sur de nombreuses machines différentes sans avoir à ouvrir les extensions précédemment installées et les paramètres associés.

20. Live Share

Live Share aide les développeurs de l'équipe à partager le code du programme en temps réel pour modifier et déboguer facilement le programme, comme le partage de sessions de débogage, d'instances de terminal, d'applications Web localhost, les appels vocaux attendent.

21. Code Spell Checker

Code Spell Checker peut nous aider à vérifier s'il y a des erreurs dans l'orthographe des mots. Les règles de vérification suivent camelCase (nomenclature des cas de chameaux).

22. Error Lens

**Error Lens ** est un plug-in qui met en évidence les inspections de code (erreurs, avertissements, problèmes de syntaxe). Error Lens améliore les capacités de diagnostic d'un langage en rendant les diagnostics plus visibles, en mettant en évidence la ligne entière où un diagnostic généré par le langage se produit et en imprimant des messages de diagnostic en ligne en ligne à l'emplacement de la ligne de code.

23. Extraits intelligents de syntaxe ES7 React/Redux/GraphQL/React-Native

Conseils intelligents sur la syntaxe React/Redux/Reatc Native/react-router, un incontournable pour les développeurs React. Avec l'aide de cet extrait de code, vous pouvez facilement créer des composants basés sur des classes et des composants de fonction.

24. REST Client

REST Client est une extension VS Code qui permet de faire des requêtes HTTP et de visualiser les réponses directement dans VS Code. Il s'agit de Postman pour VS Code et peut être facilement intégré à l'éditeur de code. Le client REST prend en charge les API REST et GraphQL.

25. JavaScript Booster

JavaScript Booster suggère automatiquement des actions rapides pour refactoriser ou améliorer votre code en analysant le code et son contexte. Il prend en charge plusieurs opérations de code telles que les conditions de refactorisation, les déclarations, les fonctions, TypeScript, les promesses, JSX, etc.

26. Live SASS Compiler

L'extension Live SASS Compiler peut compiler ou traduire des fichiers SASS ou SCSS en fichiers CSS en temps réel.

27. Remote-SSH

Fourni Remote-SSH peut utiliser n'importe quelle machine distante avec un serveur SSH comme environnement de développement. Étant donné que l'extension exécute des commandes directement sur la machine distante, vous pouvez rapidement faire fonctionner le serveur distant sans avoir de code source sur votre machine locale.

28. Debugger pour Chrome

Debugger pour Chrome est une extension VS Code développée par Microsoft, qui nous permet de déboguer le code JS dans VS Code. Vous pouvez définir des points d'arrêt, parcourir le code, déboguer les scripts ajoutés dynamiquement, etc. Cela permet de détecter les erreurs dès le début du processus de développement.

29. npm Intellisense

Après avoir installé le package npm, vous pouvez obtenir des invites intelligentes en fournissant ce plug-in lorsque cela est nécessaire, et le module npm est automatiquement rempli dans la déclaration d'importation.

30. Aperçu de l'image

Lorsque la souris survole le lien de l'image, vous pouvez prévisualiser l'image en temps réel. De plus, vous pouvez également voir la taille et la résolution de l'image. .

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!