22 plug-ins VSCode pratiques pour le développement Web

Recommandations associées : "Tutoriel de base vscode"

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

Faites-moi confiance, le débogage de JavaScript est bien plus que simplement écrire console.log() (bien que cette méthode soit la plus couramment utilisée). 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

vscode

. Si vous souhaitez en savoir plus, vous pouvez lire :

"Débogage de JavaScript dans Chrome et Visual Studio Code" :

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.

4. Serveur en direct

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. Colorizor de paire de supports

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

Les supports sont le fléau qui empêche les développeurs de rester 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-rename-tag

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

Dans les grands projets, il peut être difficile de se souvenir des noms de fichiers spécifiques et des répertoires dans lesquels se trouvent les fichiers. 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 fera gagner beaucoup de temps en parcourant les fichiers :)

9. Chef de projet

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

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 pour une poignée de styles de codage pris en charge dans les principaux éditeurs de texte/IDE. 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 des extensions à 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

Êtes-vous 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 celle-ci 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. Objectif Git

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 belles captures d'écran de code que vous voyez sur les blogs et sur Twitter ? 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 colore différents types de commentaires pour leur donner des significations différentes et se démarquer 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 est fait pour vous. 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-icons

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-icon-theme

Ê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, notamment les éditeurs de texte. À 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 aligner

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

Si vous êtes le genre de personne qui aime un alignement parfait dans votre code, alors vous avez besoin de Better Align. 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 pouvez utiliser toutes les astuces VIM directement dans VS Code. Personnellement, je ne suis pas doué pour cela, mais je sais à quel point vous pouvez être incroyablement productif en utilisant VIM à son potentiel, vous offrant ainsi bien plus de fonctionnalités.

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

Auteur original : James Quick

Adresse de traduction : https://segmentfault.com/a/1190000038478784

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!