Share
Dans cette vidéo, je vais vous présenter mon nouvel éditeur de code préféré: Visual Studio Code. Visual Studio est un produit Microsoft, ce qui peut surprendre beaucoup d'entre vous, mais laissez de côté vos idées préconçues pendant un moment et rejoignez-moi pendant que je vous présente les lieux..
Au fil des ans, j'ai utilisé différents éditeurs de code. TextMate, Coda, Sublime Text, Atom, et chacun a eu ses avantages et ses inconvénients. Visual Studio Code, cependant, est mon préféré jusqu'à présent. Voyons donc quelques-unes de ses fonctionnalités..
Commencez par télécharger la version de votre système (Windows, Mac OS, Linux) à l'adresse code.visualstudio.com (également gratuite)..
L'une des raisons pour lesquelles j'aime tant le code Visual Studio est son interface; c'est vraiment simple.
Il a deux barres latérales, qui peuvent être positionnées à gauche ou à droite selon vos préférences. La première vous donne des icônes pour basculer entre les panneaux. Choisissez parmi l'explorateur, la recherche, Git, le débogage et les extensions. Allez à Voir pour changer le type d'affichage (plein écran, mode zen, etc.)
Le survol de dossiers dans l'explorateur nous offre plusieurs options: Nouveau fichier, Nouveau dossier, Actualiser et Tout réduire. Un clic droit fait apparaître un menu contextuel.
Frappé Maj-Commande-P faire apparaître la palette de commandes.
Dans ce panneau, vous pouvez rechercher ce que vous voulez pour une action rapide et facile. Commandes Git, changer de thème, installer des extensions, tout peut être fait via la palette de commandes.
De même, Commande-P va amener le Aller au fichier… palette.
En portant Commander-' ouvrira le terminal intégré, que je amour.
Cela ouvre le terminal directement à la racine de votre projet, vous évitant d'avoir à naviguer. En cliquant sur le + L'icône ouvre plus de fenêtres de terminaux qui peuvent être basculés entre le menu déroulant. Tout cela s’ajoute à une fonctionnalité très utile, surtout si vous utilisez des compilateurs lors du codage.
Une autre fonctionnalité dont je suis un grand fan est l'intégration de Git. Les modifications que vous apportez à vos fichiers sont mises en évidence à différents endroits pour que vous sachiez exactement ce qui se passe:
Dans la figure ci-dessus, vous pouvez voir la notification de la barre latérale m'indiquant une modification non validée, la modification répertoriée dans le panneau Git et une surbrillance de ligne pour indiquer où se trouve la modification dans le fichier lui-même..
VSC montrera également les comparaisons de versions côte à côte, pour plus de clarté..
D'autres commandes Git standard telles que sync, pull, etc. sont disponibles dans le panneau Git..
Bonne nouvelle: Emmet est déjà intégré à VSC. Aucune installation ou configuration n'est requise, vous pouvez simplement commencer à l'utiliser (avec Languette étant le raccourci clavier prédéfini pour déclencher vos extraits de code) dès que vous ouvrez l'éditeur pour la première fois.
Lorsque vous sélectionnez un morceau de code dans votre fichier, VSC mettra automatiquement en surbrillance toutes les autres occurrences de cette chaîne. Vous pouvez alors frapper Commande-D pour ajouter un autre curseur à l'instance suivante, ou Maj-Commande-L pour ajouter un curseur à toutes les instances. Mass-édition, facilement.
La page Paramètres de VSC est très intuitive. Comme pour Sublime Text, les paramètres sont stockés dans un fichier (JSON dans ce cas) qui permet de parcourir toutes les valeurs par défaut. En frappant le modifier à côté de chaque paramètre, vous le copiez dans un fichier personnalisé dans lequel vous pouvez apporter des modifications:
Frappé sauvegarder et voyez vos modifications prendre effet immédiatement.
IntelliSense est une fonctionnalité de VSC que j’avais très envie d’essayer dès que j’ai ouvert l’éditeur. C'est un assistant d'auto-complétion et de coloration syntaxique super chargé qui va un peu plus loin que ce à quoi on pourrait s'attendre.
En survolant les sélecteurs CSS, vous obtiendrez un exemple d'utilisation du code HTML correspondant (très utile pour les débutants):
En survolant les propriétés, la documentation sur leur travail est révélée, et les valeurs de couleur sont précédées de petits échantillons pour vous montrer comment elles apparaissent à l'écran. Les suggestions de code lors de la frappe sont également extrêmement approfondies.
Code> Préférences> Thème de couleur ouvrira (vous l’aurez deviné) la palette des thèmes de couleurs. Faites défiler les exemples et vous verrez l'interface utilisateur changer en conséquence. Frappé Entrer pour rendre ces changements permanents.
Au-delà des thèmes par défaut, il existe également un énorme marché d’autres exemples (actuellement gratuits) disponibles, ainsi que des extensions de toutes sortes pour jouer avec.
Cela recouvre à peu près certaines de mes fonctionnalités préférées dans Visual Studio Code, il suffit de dire qu'il existe de nombreuses autres fonctionnalités disponibles pour la discussion. En termes de mon expérience en utilisant VSC jusqu’à présent, je peux seulement dire que c’est positif. Auparavant, j'utilisais Atom et je ne regrettais pas d'avoir fait le changement un peu. Bien sûr, vous pouvez être en désaccord avec moi, mais à mon avis, vous ne vous tromperez pas de téléchargement et de prise de cet éditeur de code.
Accentsconagua