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

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

22 plug-ins VSCode pratiques pour le développement Web 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

22 plug-ins VSCode pratiques pour le développement Web 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

22 plug-ins VSCode pratiques pour le développement Web 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

22 plug-ins VSCode pratiques pour le développement Web 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

22 plug-ins VSCode pratiques pour le développement Web 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

22 plug-ins VSCode pratiques pour le développement Web 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

22 plug-ins VSCode pratiques pour le développement Web 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

22 plug-ins VSCode pratiques pour le développement Web 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

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

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

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

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.