10 plug-ins VSCode indispensables pour un développement efficace

Cet article présente 10 plug-ins de développement indispensables pour VSCode, l'outil de développement le plus populaire pour le développement front-end, afin d'améliorer considérablement l'efficacité du développement logiciel.

VSCode (Visual Studio Code) est un éditeur de texte (code) gratuit, open source et multiplateforme développé par Microsoft. Il peut être considéré comme un développement logiciel presque parfait. pour un outil de développement front-end.

Le site officiel est : https://code.visualstudio.com/

10 plug-ins d'éditeur à installer absolument

Équivalent à une mise à jour supplémentaire du didacticiel vidéo, voici 10 plug-ins de l'éditeur VSCode incontournables pour tout le monde. Pour l'utilisation basique de l'éditeur et l'installation des plug-ins, vous pouvez directement vous référer au tutoriel vidéo ci-dessus.

1. Icônes de fichiers vscode-icons

Nom du plug-in : vscode-icons
Adresse du plug-in : https://marketplace.visualstudio.com /items?itemName =robertohuertasm.vscode-icons

Tout d'abord, afin que nous ayons une interface efficace et facile à utiliser lors du codage, nous devons embellir certains composants peu clairs.

Le plug-in vscode-icons peut optimiser l'affichage des icônes devant des fichiers de différents types de fichiers, de sorte que lorsque nous visualisons une longue liste de fichiers, nous puissions rapidement connaître le fichier directement via l'icône du tapez le fichier, plutôt que de regarder le suffixe du fichier.

2. Thème sombre One Dark Pro

Nom du plug-in : One Dark Pro
Adresse du plug-in : https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme

Après une longue période de codage, un environnement de codage de couleur sombre est moins susceptible de provoquer une fatigue visuelle et peut également vous rendre plus concentré.

Après avoir installé le plug-in One Dark Pro, vous pouvez ajuster la couleur de l'éditeur VSCode sur une couleur sombre en un seul clic, ce qui rend le codage plus confortable.

3. Code d'embellissement Embellir

Nom du plug-in : Embellir
Adresse du plug-in : https:// market.visualstudio.com/items?itemName=HookyQR.beautify

Le plug-in Beautify peut rapidement formater votre code, rendant instantanément votre structure de code désordonnée très régulière lors de l'écriture de code, un incontournable pour les obsessionnels du code. -trouble compulsif, mieux Le format du code sera beaucoup plus pratique pour une maintenance ultérieure et une lecture par d'autres.

Le plug-in prend en charge de nombreuses langues, couvrant essentiellement toutes les langues actuelles, et vous pouvez également personnaliser la structure de formatage du code.

4. Outil de vérification de code ESLint

Nom du plug-in : ESLint
Adresse du plug-in : https:/ /marketplace.visualstudio .com/items?itemName=dbaeumer.vscode-eslint

ESLint est un outil de vérification des règles de grammaire et du style de code qui peut être utilisé pour garantir que le code avec une grammaire correcte et un style unifié est écrit.

Le plug-in ESLint dans VSCode intègre directement les fonctions d'ESLint et peut être utilisé après l'installation. Les détails du format et des spécifications du code peuvent également être personnalisés, et une équipe peut partager le même fichier de configuration, ainsi. Le code écrit par tous les membres d'une équipe peut utiliser la même spécification de code, et chacun peut effectuer sa propre vérification de spécification de code avant que le code ne soit archivé.

5. Outil de débogage essentiel Débogueur pour Chrome

Nom du plug-in : Débogueur pour Chrome
Adresse du plug-in : https: //marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Cet outil est tout simplement un incontournable pour le développement front-end et va grandement changer votre mode de développement et de débogage .

Dans le passé, le débogage frontal consistait principalement en un débogage JavaScript. Vous devez rechercher la partie de code correspondante dans la console Chrome, ajouter un point d'arrêt, puis parcourir le débogage dans la console Chrome et afficher la valeur. changements.

Après avoir utilisé Debugger pour Chrome, lorsque le code est exécuté dans Chrome, vous pouvez directement ajouter des points d'arrêt dans VSCode. Après avoir cliqué sur Exécuter, la page dans Chrome continuera à s'exécuter jusqu'à ce que vous soyez dans VSCode. vous pouvez effectuer un débogage en une seule étape directement dans VSCode.

Concernant l'utilisation des outils de débogage de Chrome, vous pouvez vous référer au didacticiel vidéo original "50 astuces essentielles pour les outils de développement Chrome" que j'ai partagé sur notre Knowledge Planet. Le cours partage les navigateurs essentiels pour le développement front-end. 50 compétences essentielles d'utilisation et de débogage lors de l'utilisation de l'outil de débogage Chrome Developer Tools Ces connaissances sont des compétences essentielles pour devenir un développeur front-end qualifié.

6. Environnement d'exécution de langage universel Code Runner

Nom du plug-in : Code Runner
Adresse du plug-in : https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

Si vous avez besoin d'apprendre ou d'être exposé à divers langages de développement, le plug-in Code Runner vous permet d'exécuter le code du langage correspondant directement via ce plug-in sans configurer un environnement de développement pour différents langages. Il est très approprié pour apprendre ou tester divers langages de développement. .

Les langages pris en charge sont : C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), Script C#, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective - C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D et quelques commandes personnalisées.

Fonctionnalités

● Exécuter les fichiers de code à partir de l'éditeur de texte actuellement actif

● Exécuter les fichiers de code via le menu contextuel de l'explorateur de fichiers

🎜>

● Exécuter l'extrait de code sélectionné dans l'éditeur de texte

● Exécuter le code par Shebang

● Exécuter le code par nom de fichier glob

● Exécuter une commande personnalisée

● Arrêter l'exécution du code

● Afficher la sortie dans la fenêtre de sortie

● Définir la langue par défaut pour l'exécution

● Sélectionnez la langue d'exécution

● Prise en charge de REPL en exécutant du code dans le terminal intégré

7 Annotation rapide Documentez ceci

Nom du plug-in : Documentez ceci

Plug-in. adresse : https://marketplace.visualstudio.com/items?itemName=joelday.docthis

En plus d'excellentes performances et d'un format standardisé, un excellent code est également indispensable, et les commentaires sont également indispensables. ensemble standard de méthodes d'annotation, en particulier pour les langages comme JavaScript.

Document Cela peut vous aider rapidement à générer des commentaires. Par exemple, les commentaires sur certaines fonctions peuvent également vous aider à extraire la définition des paramètres, etc. C'est un outil indispensable pour écrire du code standardisé.

8. IntelliSense pour les noms de classes CSS en HTML

Nom du plug-in : IntelliSense pour les noms de classes CSS en HTML

Adresse du plug-in : https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

Lors de l'appel du nom de style défini en HTML, il est parfois nécessaire de changer entre les fichiers HTML et CSS Basculez d'avant en arrière pour afficher les noms de classes CSS que vous avez définis.

Avec le plug-in IntelliSense pour les noms de classe CSS dans HTML, vous pouvez appeler les noms de classe CSS partout où vous en avez besoin en HTML, et ce plug-in vous demandera intelligemment les noms de classe CSS définis.

Fonctionnalités

● Vous permet de compléter automatiquement les définitions de classes CSS qui peuvent être trouvées dans l'espace de travail (définies dans un fichier CSS ou dans la liste "Supported Défini dans les types de fichiers répertoriés dans la section Mode langage)

● Prise en charge des feuilles de style externes référencées via des éléments dans les fichiers linkHTML

● Pour la remise en cache manuelle des classes utilisées dans les commandes définies de saisie semi-automatique

● Les paramètres utilisateur remplacent les dossiers et fichiers qui doivent être pris en compte ou exclus du processus de cache

9. Vérificateur orthographique du code Vérificateur orthographique du code

Nom du plug-in : Code Spell Checker

Adresse du plug-in : https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Ne vous inquiétez pas après avoir installé ce plug- Dans Désormais, lorsqu'il y a des mots mal orthographiés dans votre code, vous découvrirez ses avantages, car après tout, nous écrivons du code avec un grand nombre de définitions de variables de mots anglais, et le plug-in peut également donner des suggestions pour les mots mal orthographiés.

10. Plug-in Mémo TODO Highlight

Nom du plug-in : TODO Highlight

Adresse du plug-in : https://marketplace .visualstudio.com/items?itemName=wayou.vscode-todo-highlight

De nombreux autres éditeurs de code ont des fonctions d'annotation TODO. Par exemple, lorsque vous écrivez une certaine partie du code, une partie. La fonction doit être implémentée plus tard.De cette façon, vous pouvez ajouter un commentaire de type TODO au code correspondant, puis vous pouvez rapidement accéder à cette partie pour continuer à écrire plus tard.Et lorsque le projet est volumineux, TODO devient plus important. . Utile, car il peut parfois y avoir des dizaines de TODO, vous aidant à marquer les fonctions qui doivent être implémentées ou optimisées.

Résumé

Bien sûr, les plug-ins présentés ici ne sont que 10 des incontournables avoir des plug-ins. Selon le langage que vous développez, de nombreux outils doivent être installés qui peuvent améliorer considérablement l'efficacité du développement. Vous pouvez les vérifier, les télécharger et les installer dans le centre de plug-ins de VSCode.

Tutoriel recommandé : 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!