Augmentez votre productivité en utilisant le code VS

1. Bienvenue au cours: Bienvenue dans ce cours dans lequel vous apprendrez comment augmenter la productivité à l'aide Visual Studio Code VS Code est l'une des de développeurs indépendants les plus utilisées communautés d'éditeurs de code et de développeurs indépendants les plus utilisées et les plus appréciées. Et dans ce cours, vous découvrirez quelques trucs et astuces intéressants, tels que la recherche, Emmett, le clavier, raccourcis et bien d'autres encore dans de petites leçons vidéo. Bonjour, je suis et je suis développeur Web complet depuis plus de quatre ans. Et j'ai commencé le développement web avec JavaScript. Bien sûr, après avoir appris le HTML et le CSS. Et à l'époque, j'utilisais un autre éditeur de code. Mais lorsque j'ai commencé à apprendre différents langages comme Python, Django, ruby ou Java, j'ai dû installer un éditeur de code distinct pour chaque langue. Mais quand j'ai découvert VS Code, j'ai commencé à l'aimer dès les deux ou trois premiers jours car il était très flexible. Et il existe de nombreux raccourcis. Nous pouvons également télécharger des extensions adaptées à nos besoins, ce qui en fait l'éditeur de code idéal pour le développement Web et la programmation en général. Dans ce cours, je partagerai mon expérience de son utilisation et quelques astuces intéressantes qui peuvent augmenter votre productivité. 2. raccourcis clavier et comment le modifier: Raccourcis clavier et comment les modifier. Tout d'abord, ouvrez votre code Visual Studio. Ensuite, cliquez sur cette icône en forme d'engrenage. Cliquez sur ce raccourci clavier. Vous pouvez également voir ici le raccourci pour ouvrir le raccourci clavier, qui est Control plus K et S. Ici, vous pouvez voir tous vos raccourcis clavier. Vous pouvez également rechercher les raccourcis clavier ici En cliquant également sur cette icône en forme de crayon, vous pouvez modifier votre raccourci clavier. Par exemple, I. Je vais modifier ce raccourci pour créer un nouveau fichier. Si je tape ici Control et N, vous pouvez voir qu' il affiche un message car un raccourci existant contient cette combinaison de touches. Je taperais donc son contrôle et ce entre crochets. Et je vais appuyer sur la touche Entrée. Vous pouvez voir que mon raccourci a changé. Le raccourci pour créer un nouveau fichier a maintenant changé. Vérifions-le. Créons donc un nouveau fichier en utilisant ce raccourci. Je vais taper ici index.html, et vous pouvez voir que cela fonctionne. De même, j'ai modifié ce raccourci pour dupliquer la ligne Je peux donc appuyer sur Ctrl et D pour dupliquer la ligne. C'est très utile. 3. Toutes les techniques de sélection Multi: La sélection de plusieurs curseurs est une technique très utile pour améliorer la productivité à l'aide de Visual Studio Code. Supposons que vous souhaitiez ajouter du texte dans ces cinq lignes. La première chose que vous pouvez faire est de taper le texte ici et de le copier-coller quatre fois de plus. Mais dans Visual Studio Code, vous pouvez sélectionner plusieurs lignes, par exemple appuyer sur Alt et cliquer avec le bouton gauche sur ces lignes, et plusieurs curseurs apparaîtront. Vous pouvez maintenant taper ce que vous voulez. Une application de cette méthode pourrait consister ajouter le nom de la classe sur plusieurs listes en HTML. Si vous souhaitez ajouter la même classe, qui est un élément en pointillés F sur plusieurs listes. Vous pouvez appuyer sur Alt et cliquer ici avec le bouton gauche de la souris. Tapez ensuite votre classe est égale à l'élément de navigation. Vous pouvez également appuyer sur le bouton central de la souris pour sélectionner plusieurs lignes. Ensuite, vous pouvez taper quelque chose ici. Vous pouvez également appuyer sur les touches Ctrl plus Alt et Flèche vers le haut pour sélectionner plusieurs lignes en haut. Vous pouvez également appuyer sur Ctrl plus Alt plus touche flèche vers le bas pour sélectionner plusieurs lignes en partant du bas. Maintenant, pour sélectionner une occurrence multiple d'un mot , vous pouvez appuyer sur Ctrl et D, par exemple si je veux sélectionner l'occurrence multiple de cette variable première est, je sélectionnerai cette variable et appuyez sur Control. Et D, il sélectionnera la prochaine occurrence de ce mot. Et si j'appuie une fois de plus sur Ctrl et D, cela sélectionnera une autre occurrence de ce mot. Notez que si la sélection Ctrl+D ne fonctionne pas pour vous, il est fort probable que ce raccourci ait changé. Donc, ce que vous pouvez faire, c'est ouvrir les raccourcis clavier et taper ici, sélectionner les deux prochaines correspondances. Et vous pouvez voir ce raccourci ici. Vous devez donc appuyer sur cette touche au lieu de la Ctr+D pour sélectionner la prochaine occurrence d'un mot. Maintenant, si vous voulez sélectionner toutes les occurrences d'un mot, vous devez d'abord sélectionner ce mot et appuyer sur Ctrl plus Shift plus L. Cela sélectionnera toutes les occurrences d'un mot. Maintenant, une autre astuce consiste à sélectionner un morceau de code et à appuyer sur Ctr+Shift plus la touche flèche droite. Cela élargira la sélection. Si vous appuyez sur la touche Ctrl plus Shift plus la touche flèche gauche au lieu de la touche flèche droite, le cours sera réduit. Maintenant, une autre technique consiste à placer le curseur quelque part, à maintenir Shift et Alt enfoncés et à commencer à faire glisser le pointeur. Il sera sélectionné comme une boîte. C'est ce que l'on appelle la sélection de boîtes à colonnes. 4. Trouver, remplacer et rechercher sur les fichiers: Dans VS Code, vous pouvez rapidement trouver du texte et le remplacer. Dans cette leçon, nous allons en apprendre davantage à ce sujet. Tout d'abord, si vous voulez trouver quelque chose, vous pouvez appuyer sur Ctrl et F, cela ouvrira ce widget de recherche. Et si vous tapez quelque chose ici, les résultats de recherche seront surlignés. S'il y a deux résultats de recherche ou plus, vous pouvez appuyer sur la touche Entrée pour accéder au résultat suivant. Vous pouvez également appuyer sur Shift plus Entrée pour accéder au résultat de recherche précédent. Si vous sélectionnez un mot, si vous appuyez sur Ctrl et F, les données Word apparaîtront automatiquement lors de cette visite de recherche. Désormais, par défaut, cette opération de recherche s' exécute sur l'ensemble du fichier. Mais si vous souhaitez l'exécuter sur une zone de texte sélectionnée, vous devez utiliser ce bouton hamburger. Par exemple, si vous souhaitez trouver texte dans ces lignes, appuyez sur la touche Ctrl. Et F. Et je vais taper « here is prime ». Et sélectionnez ces lignes de code et appuyez sur ce bouton hamburger. Vous pouvez maintenant voir que seul le mot est premier, ceux qui se trouvent sur ces lignes sont surlignés. Maintenant, si vous souhaitez sélectionner plusieurs lignes, appuyez sur Ctrl et F, puis tapez le texte ici. Et pour insérer une nouvelle ligne, appuyez sur Ctrl et Enter. Ensuite, vous pouvez taper un ou quelque chose comme ça. Maintenant, vous pouvez également agrandir le widget pour ce faire, appuyez ici et faites-le glisser. Si vous double-cliquez ici, cela se maximisera. Et si vous double-cliquez à nouveau ici, cela diminuera. Passons maintenant à la recherche. Enfin, appuyez sur Ctrl plus Shift plus f, puis cet objet apparaîtra ici. Vous pouvez également l' optimiser ou le minimiser en cliquant et en le faisant glisser ici. Maintenant, si je tape here is prime, vous pouvez voir que les résultats de recherche sont apparus ici. Cela me dit qu'il existe une variable S prime sur ce fichier nommée hello.py. Si je clique ici, je prêterai à ce fichier. Vous pouvez également rechercher et remplacer directement un mot à partir d'ici. Par exemple, cliquez sur cette icône en forme de flèche, puis vous pouvez taper ici, ils remplacent vers et appuyez sur ce bouton. Vous pouvez également voir le raccourci ici, puis cliquez ici. Et c'est tout. Le mot est maintenant remplacé. 5. Serveur en direct pour le rechargement automatique et la réalisation de demandes: Dans cette leçon, nous allons en apprendre davantage sur Live Server. Mais avant de découvrir ce qu'est un serveur live, parlons de ses utilisateurs. La première utilisation de Live Server est donc le rechargement automatique. Par exemple, vous pouvez voir ici que j'ai un fichier index.html et voici mon navigateur Chrome. Maintenant, si je modifie quelque chose dans ce fichier HTML, par exemple, je modifierai le texte de ce titre. Maintenant, si j'appuie sur Ctrl et S pour enregistrer ce fichier, vous pouvez voir qu'il s'est rechargé automatiquement détecte que ce titre a changé. Il existe également une autre utilisation de Live Server, qui vous permet de créer, d'obtenir, de mettre, de publier et de supprimer facilement des demandes à l'aide de celui-ci. D'accord, nous avons donc vu quelques utilisations de Life Server. Installez-le. Et en gros, il s' agit d'une extension. Donc, pour l'installer, vous devez vous rendre le marché externe et rechercher Live Server. Maintenant, après l'avoir installé, vous devrez peut-être redémarrer votre VS Code. Ouvrez un fichier HTML. Et vous pouvez voir ce bouton de mise en ligne en bas, cliquez ici. Et il ouvrira ce fichier dans le navigateur par défaut, qui s'est agrandi dans la plupart des cas. Maintenant, la deuxième façon d'ouvrir ce serveur live consiste à cliquer avec le bouton droit sur ce fichier HTML et à choisir cette option Ouvrir avec Live Server. Vous pouvez également voir le raccourci ici. Vous pouvez maintenant voir que si je modifie quelque chose dans le fichier HTML, il se recharge automatiquement. Maintenant, pour arrêter le serveur Live, vous pouvez soit appuyer sur cette option en bas, soit cliquer avec le bouton droit de la souris et choisir cette option d'arrêt du serveur Live. Désormais, par défaut, le serveur live fonctionnera sur le port 55 double zéro. Mais vous pouvez également modifier cela pour ouvrir les paramètres et taper ici live server. Faites défiler l'écran vers le bas et cliquez sur ce lien dans la section du rapport. Maintenant, après avoir cliqué dessus, ce type de code apparaîtra sur le nouveau type de VSCode Ne saisissez pas ici le numéro de port lequel vous souhaitez exécuter votre serveur Life. Par exemple, si je tape ici 8080, et si je sauvegarde ceci, maintenant, si je lance ce serveur live, vous pouvez voir que le serveur a démarré sur le port 8080. Pour ne pas annuler cela, vous pouvez supprimer cette ligne. Maintenant, je vais enregistrer ceci et exécuter ce fichier sur le serveur live. Vous pouvez maintenant voir que ce serveur a démarré sur le port 5 500. 6. Changer votre thème: L'une des fonctionnalités intéressantes de VSCode est la mise en évidence de la syntaxe et les équipes. Dans cette leçon, nous allons en apprendre davantage à ce sujet. Tout d'abord, ouvrez VS Code dans un dossier. Au fait, si vous souhaitez ouvrir VS Code dans un dossier spécifique, vous pouvez faire glisser ce dossier et le déposer dans VS Code. Il va ouvrir ce dossier. Maintenant, dans VS Code, accédez à Fichier, Préférences et thème de couleur. Vous pouvez également voir le raccourci ici. Cliquez dessus, et ce type de chose apparaîtra ici. Vous pouvez maintenant utiliser les flèches vers le haut et vers le bas pour choisir l'équipe que vous aimez L'aperçu s'affichera également, sélectionnez l'équipe que vous aimez. Vous pouvez voir que j' utilise une protéine à point. Vous pouvez également télécharger Teams à partir d'extensions. Alors allez sur Extend Sun et tapez ici Tim, vous voulez, par exemple vous pouvez taper du matériel par paire, et c'est l'équipe Material UI. Il existe maintenant un site Web sympa où vous pouvez trouver des équipes qui utilisent aussi bien indivi. Ce site Web est donc VS Code Teams. Et vous pouvez voir ici qu' il y a beaucoup de thèmes. Vous pouvez également filtrer les équipes. Choisissez l'équipe que vous aimez et cliquez sur le bouton Ouvrir avec VS Code. Vous pouvez également copier son nom et coller ici au sens large, puis télécharger l'équipe à partir d'ici. Désormais, vous pouvez également personnaliser les icônes de vos fichiers. Pour cela, vous pouvez rechercher du matériel Icone team et le télécharger. 7. Lec8 vidéo finale: Dans cette leçon, vous découvrirez quelques raccourcis de ligne de commande de base et utiles. Maintenant, pour ouvrir une invite de commande dans un dossier, il existe un joli raccourci qui consiste à ouvrir ce dossier, à taper CMD et à appuyer sur la touche Entrée. Maintenant, pour créer un nouveau dossier dans ce dossier en utilisant la ligne de commande, vous devez taper ici MKDIR et le nom du dossier. Je vais donc taper ici mon dossier et appuyer sur la touche Entrée. Et vous pouvez voir que le dossier a été créé. Maintenant, pour créer un fichier sous Windows, vous devez taper pair, type, null et est un symbole supérieur à. Et le nom du fichier, le type de sol ici, le nouveau point de fichier HTML. Maintenant, sur Mac, vous devez utiliser la commande tactile. Vous devez donc taper ici touch et le nom du fichier pour ne pas supprimer un fichier sous Windows, vous devez utiliser la commande de suppression. Tapez donc ici, D E, N D nom de fichier. Maintenant, dans Command Prompt ou dans le terminal, si vous êtes sur Mac, vous pouvez appuyer sur la touche Tab pour effectuer une saisie semi-automatique. Par exemple vous pouvez voir ici que j'ai quatre fichiers dans ce dossier. Disons que je souhaite supprimer ce fichier. Je vais donc taper a ou D, L et L, taper ici m, y, dy, puis appuyer sur la touche Tab. Il complétera automatiquement ce nom de fichier. Si je tape uniquement ici, J'appuie sur la touche Tab. Il affichera le premier résultat. Et si j'appuie à nouveau sur la touche Tab, le deuxième résultat s'affichera, et ainsi de suite. Maintenant, pour accéder à un dossier qui se trouve dans ce dossier, je dois utiliser la commande cd. Je vais donc taper ici C, D et le nom du dossier. Maintenant, si vous voulez revenir en arrière dans un dossier, vous devez taper ici c, d et ce double point. Et c'est tout.