22 plug-ins VSCode qui améliorent la vitesse de développement Web (à collectionner)

Cet article présente 22 des meilleurs plug-ins VSCode pour le développement Web. 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.

22 plug-ins Visual Studio Code à partager

1. Débogueur pour Chrome

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Faites-moi confiance, le débogage de JavaScript ne se résume pas à la simple écriture de console.log() (bien que ce soit la méthode la plus courante). Chrome possède des fonctionnalités intégrées pour une meilleure expérience de débogage. Ce plugin vous permet d'utiliser toutes (ou presque toutes) ces fonctionnalités de débogage dans VS Code.

Si vous souhaitez en savoir plus, vous pouvez lire :

Débogage de JavaScript dans Chrome et Visual Studio Code.

Adresse : https://scotch.io /tutorials/debugging-javascript-in-google-chrome-and-visual-studio-code

2. Extraits de code Javascript (ES6)

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

J'adore le plugin Snippets. Je ne ressens pas le besoin de taper encore et encore le même morceau de code. Ce plugin vous fournit des extraits de code JavaScript populaires (ES6).

Remarque... Si vous n'utilisez pas les fonctionnalités d'es6javascript, utilisez-les maintenant !

3. ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Vous voulez écrire un meilleur code ? L’ensemble de l’équipe doit-elle utiliser un format cohérent ? Installez ESLint. Ce plugin peut être configuré pour formater automatiquement le code et « crier » avec des erreurs ou des avertissements. VS Code, avec la configuration appropriée, peut vous montrer ces conseils.

Apprentissage recommandé : "Tutoriel vscode"

Serveur Live

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Apportez des modifications dans l'éditeur de code, passez au navigateur et actualisez pour voir les modifications. C'est une boucle sans fin pour les développeurs, mais que se passe-t-il si le navigateur s'actualise automatiquement lorsque vous apportez des modifications ? C'est là qu'intervient Live Server !

Il exécute également votre application sur le serveur local. Certaines choses ne peuvent être testées que lorsque l'application est exécutée sur le serveur, c'est donc un plus.

5. Paire de supports Colorizor

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket- pair-colorizer

Les brackets sont le fléau qui maintient les développeurs en vie. Avec beaucoup de code imbriqué, il est presque impossible de déterminer quelles parenthèses correspondent. Bracket Pair Colorizor (comme vous pouvez vous y attendre) fait correspondre les couleurs des supports pour rendre le code plus lisible. Croyez-moi, vous le voulez !

6. Balise de renommage automatique

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto- renommer la balise

Besoin de renommer des éléments en HTML ? Eh bien, avec "Auto Rename Tag", il vous suffit de renommer la balise de début ou de fin, et les autres balises seront renommées automatiquement. Simple mais efficace !

7. Quokka

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Besoin d'un endroit rapide pour tester du JavaScript ? J'avais l'habitude d'ouvrir la console dans Chrome et d'y saisir du code, mais les inconvénients sont nombreux. Quokka vous fournit un bloc-notes JavaScript (et TypeScript) dans VS Code. Cela signifie que vous pouvez tester un morceau de code dans votre éditeur préféré !

8. Chemin Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path -intellisense

Mémoriser les noms de fichiers spécifiques et les fichiers dans les grands projets Le répertoire dans lequel il est localisé peut être gênant. Ce plugin vous fournira des conseils intelligents. Lorsque vous commencez à saisir un chemin entre guillemets, vous verrez des invites intelligentes pour les noms de répertoire et de fichier. Cela vous évitera de passer beaucoup de temps à parcourir les fichiers :)

Chef de projet

https://marketplace. . visualstudio.com/items?itemName=alefragnani.project-manager

i Une chose que je déteste, c'est de basculer entre les projets dans VS Code. Chaque fois que je dois ouvrir l'explorateur de fichiers et trouver l'élément sur mon ordinateur. Mais cela change avec l’application de Project Manager. En utilisant ce plugin, vous pouvez ouvrir un menu supplémentaire dans le menu latéral de votre projet. Vous pouvez basculer rapidement entre les projets, enregistrer les favoris ou détecter automatiquement les projets Git à partir du système de fichiers.

Si vous développez plusieurs projets différents, c'est un excellent moyen de rester organisé et d'augmenter votre efficacité.

10. Configuration de l'éditeur

https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

Editor Config est un standard parmi les rares styles de codage utilisés dans les principaux éditeurs de texte / sont pris en charge dans l'EDI. Comment cela fonctionne est le suivant. Vous enregistrez le fichier de configuration dans un référentiel pris en charge par votre éditeur. Dans ce cas, vous devez ajouter une extension à VS Code pour qu'il respecte ces profils. C’est super facile à mettre en place et parfait pour les projets d’équipe.

11. Carte de clavier de texte sublime

https://marketplace.visualstudio.com/items?itemName=ms-vscode. sublime-keybindings

Vous êtes un utilisateur passionné de Sublime et ne souhaitez pas passer à VS Code ? Cette extension rendra votre changement transparent en modifiant tous les raccourcis pour qu'ils correspondent aux raccourcis de Sublime. Maintenant, quelles raisons auriez-vous pour ne pas faire le changement ?

12. Aperçu du navigateur

https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser -preview

J'aime l'extension Live Server (mentionnée ci-dessus), mais cette extension va encore plus loin en termes de commodité. Il vous donne un aperçu du rechargement en direct dans VS Code. Plus besoin de regarder votre navigateur pour constater de petits changements !

13. Git Lens

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Il existe de nombreux plug-ins git, mais l'un d'entre eux est le plus puissant et possède le plus de fonctions. Vous obtenez des informations sur les avertissements, l'historique des lignes et des fichiers, les recherches de validation, etc. Si vous avez besoin d'aide avec votre workflow Git, commencez avec ce plugin !

14.Polacode

https://marketplace.visualstudio.com/items?itemName=pnp.polacode

Vous connaissez ces jolies captures d'écran de code que vous voyez dans les blogs et les tweets ? Eh bien, ils viennent très probablement de Polacode. C'est super facile à utiliser. Copiez un morceau de code dans votre presse-papiers, ouvrez l'extension, collez le code et cliquez sur Enregistrer l'image !

15. Plus joli

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Ne perdez plus de temps à formater votre code... c'est fait. Plus tôt, j'ai mentionné ESLint, qui assure le formatage et l'inspection. Si vous n'avez pas besoin de vérifier les peluches, optez pour Prettier. Il est très simple à configurer et peut être configuré pour formater automatiquement le code lors de l'enregistrement.

16. De meilleurs commentaires

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better -comments

Ce plugin marque différents types de commentaires dans différentes couleurs, pour donnez-leur un sens différent et démarquez-vous du reste du code. Je l'utilise pour obtenir des conseils. Il est difficile d'ignorer une grosse invite orange m'informant que j'ai du travail inachevé à faire.

Il existe également des codes couleurs pour les questions, les alertes et les faits saillants. Vous pouvez également ajouter vos propres créations personnalisées !

17. Lien Git

https://marketplace.visualstudio.com/items?itemName=qezhu.gitlink

Si vous souhaitez voir les fichiers sur lesquels vous travaillez dans Github, ce plugin vous convient. Une fois installé, faites un clic droit sur le fichier et vous verrez l'option permettant d'ouvrir le fichier dans Github. Si vous n'utilisez pas le plugin Git Lens, ce plugin est idéal pour vérifier l'historique, les versions de branche, etc.

18. Icônes de code VS

https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode- icônes

Saviez-vous que vous pouvez personnaliser les icônes dans VS Code ? Si vous regardez les paramètres, vous verrez une option pour "Thème d'icône de fichier". À partir de là, vous pouvez choisir parmi les icônes préinstallées ou installer un pack d'icônes. Ce plugin vous offre un pack d'icônes vraiment mignon et est utilisé par 11 millions de personnes !

19. Thème d'icônes matérielles

https://marketplace.visualstudio.com/items?itemName=PKief.material- thème-icône

Êtes-vous fan du design Google Material ? Eh bien, jetez un œil à ce pack d'icônes « Thème matériel ». Il existe des centaines d’icônes différentes et elles sont superbes !

20. Synchronisation des paramètres

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings -sync

Les développeurs (moi y compris) passent beaucoup de temps à personnaliser les environnements de développement, en particulier le texte. éditeur. À l'aide du plugin "Settings Sync", vous pouvez enregistrer les paramètres dans Github. Ils peuvent ensuite être chargés dans n'importe quelle nouvelle version de VS Code à l'aide d'une seule commande.

21. Mieux s'aligner

https://marketplace.visualstudio.com/items?itemName=wwm.better-align

Si vous êtes le genre de personne qui aime l'alignement parfait dans votre code , alors vous avez besoin d'un meilleur alignement. Vous pouvez aligner plusieurs déclarations de variables, commentaires de fin, extraits de code, etc. Il n’y a pas de meilleure façon de voir à quel point ce plugin est génial que de l’installer et de l’essayer !

22. VIM

https://marketplace.visualstudio.com/items?itemName=vscodevim.vim

Êtes-vous un utilisateur approfondi de VIM ? Si tel est le cas, félicitations, vous maîtrisez toutes les opérations intéressantes de VIM et pouvez les utiliser directement dans VS Code. Personnellement, je ne suis pas doué pour cela, mais je sais à quel point il peut être incroyablement productif d'utiliser VIM à son potentiel, vous offrant ainsi bien plus de fonctionnalités.

Auteur original : James Quick 

Adresse originale : https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for-web -développement

Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de 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!