VS Code : un examen approfondi pour les développeurs WordPress

Microsoft a mauvaise réputation. Au fil des ans, ils ont acquis la réputation d'être un peu en retard et peu conviviaux. Il y a des années, ils l'auraient peut-être même mérité. Mais plus maintenant. Les dernières entreprises de Microsoft sont multiplateformes, intuitives et repoussent les limites de la technologie. C'est là qu'intervient Visual Studio Code. Depuis sa sortie en 2015, VS Code est devenu l'éditeur de code de facto pour de nombreux développeurs, faisant de Sublime Text et Atom les premiers choix. Et cela en dit long. Voyons donc pourquoi VS Code est si génial et comment Microsoft a regagné toute notre confiance.

Code Visual Studio : Open Source et l'aimer

En apparence, Visual Studio Code ressemble à la plupart des autres éditeurs. Mise en évidence de la syntaxe, thème sombre, extensions, etc. Mais lorsque vous creusez un peu plus, vous constatez que contrairement à de nombreux autres éditeurs et IDE, l'expérience que vous obtenez dans VS Code est tout simplement fluide et – pardonnez le jeu de mots – sublime.

Le plus grand avantage de VS Code est qu'il est open source. Mais encore une fois, Atom l'est aussi (et il appartient également techniquement à Microsoft, depuis qu'ils ont acquis GitHub). Plus que cela, Microsoft l'a publié sous la licence MIT, la plus clémente et la plus ouverte des licences open source. Pour une entreprise qui a historiquement été assez stricte sur les brevets et leur propriété intellectuelle, c'est une étape énorme .

En raison de cette licence, VS Code commande une communauté inconditionnelle de développeurs qui non seulement utilisent le logiciel pour leur vie professionnelle, mais contribuent également à l'éditeur lui-même ou à certaines des nombreuses extensions et plugins disponibles pour le personnaliser. Il y a un débat quant à l'étendue de la licence MIT pour Visual Studio Code, mais cela ne devrait pas affecter les utilisateurs ni la majorité des développeurs.

Un IDE tout-en-un ?

Voici la question du moment : VS Code est-il un éditeur de code ou un IDE ? Il dispose d'une intégration Git intégrée, d'un accès au terminal et d'un bash, d'une console de débogage et d'un type spécial de mise en évidence de la syntaxe et de complétion de code appelé IntelliSense.

Tout cela est immédiat dès le téléchargement, sans aucune extension ni personnalisation. Habituellement, ces types de fonctionnalités intégrées et mises à jour par l'équipe de développement officielle sont disponibles dans des applications premium telles que PhpStorm. Mais avec VS Code… cette ligne devient floue. Il offre de nombreuses fonctionnalités de type IDE.

Mais au final, ce n'est pas tout à fait un IDE complet. Vous n'obtenez pas de refactorisation de code par défaut, de mises à jour spécifiques à la langue officielle et de pérennité, et les autres éléments lourds qu'un IDE peut parcourir. Cela dit, il existe un IDE Visual Studio. Il s'agit d'un produit haut de gamme distinct que Microsoft fabrique depuis des années, et Visual Studio Code n'est qu'un autre membre de la famille Visual Studio. Donc, si vous recherchez un IDE complet et lourd, vous pouvez en obtenir un auprès de MS. Mais c'est une seconde assez proche, honnêtement.

De plus, l'existence d'un IDE Visual Studio est la raison pour laquelle les développeurs l'appellent VS Code ou simplement Code plutôt que Visual Studio. Ce serait juste trop déroutant sinon.

Code VS : prêt à l'emploi

Si vous ne l'avez pas encore deviné, il y a beaucoup de parties qui composent VS Code. Commençons par examiner les bases et comment le tout fonctionne dès la sortie de la boîte, avant d'ajouter tout type d'extension ou de personnaliser quoi que ce soit.

Lorsque vous ouvrez l'éditeur pour la première fois, vous remarquerez deux choses :

• La mise en page et la conception sont similaires à celles des autres éditeurs, et donc familières à la plupart des gens
• Il se charge plus rapidement que la plupart des autres éditeurs de code (Atom, nous regardons dans votre direction)

Lorsque vous avez fini d'être étonné de sa réactivité, nous pouvons passer à la barre latérale gauche. C'est là que vivront la majorité des outils supplémentaires fournis avec VS Code.

Les icônes par défaut sur le côté ouvriront chacune une nouvelle colonne lorsque vous cliquez dessus, qui peut être redimensionnée et personnalisée.

1. Explorateur

Votre vue par défaut dans VS Code sera l'onglet Explorateur . Dans celui-ci, vous verrez une section intitulée Open Editors , qui est l'argot VS Code pour les documents. Chaque fichier que vous avez ouvert est considéré comme un nouvel éditeur. Donc, si vous avez 8 fichiers .css ouverts, vous verrez une liste de 8 éditeurs.

Ensuite, vous avez la liste des programmes ouverts qui peuvent créer des fichiers à éditer avec VS Code. Pour cet exemple, vous verrez que le seul que j'ai ouvert en arrière-plan est Snagit. En dessous se trouve le contour qui affiche le squelette du fichier actuel. Lorsque vous obtenez un fichier gigantesque et que vous devez obtenir une vue de haut en bas de l'ensemble de la structure, la vue Plan fonctionne en fait un peu plus facilement que même la mini-carte à droite de l'écran.

2. Rechercher

La fonction de recherche dans VS Code est phénoménale. Ce n'est pas qu'il soit plus puissant que les autres éditeurs (parce que je dois être honnête ici : j'adore Find/Replace in Sublime Text). C'est que c'est plus facile et plus transparent que les autres éditeurs.

Lorsque vous effectuez la recherche, chaque instance de votre terme de recherche se trouve en bas de la colonne de droite. Vous pouvez ensuite cliquer sur une seule instance pour mettre en surbrillance l'emplacement du terme de recherche dans le fichier. (Si vous CTRL/CMD-Cliquez, cela ouvrira une deuxième instance du fichier mettant en évidence la nouvelle ligne choisie.)

Si vous choisissez de remplacer le terme dans le deuxième champ, les résultats afficheront une version rouge barrée du terme de recherche et un remplacement teinté de vert dans les résultats. Lorsque vous cliquez sur rechercher/remplacer dans les résultats, un diff comparatif apparaîtra pour prévisualiser les modifications. Cette fonctionnalité est si utile que vous vous demanderez comment vous avez pu vivre sans elle.

3. Git

Je vais commencer par dire que je suis probablement biaisé dans mon approche de Git. J'ai tendance à être un utilisateur de ligne de commande/bash, et les clients graphiques pour Git ne m'ont jamais vraiment plu. Donc, une grande partie de l'intégration de Git avec d'autres éditeurs et IDE n'a pas été ma tasse de thé. Cependant, l'implémentation de VS Code est un hybride entre la ligne de commande et une interface graphique, et elle fonctionne étonnamment bien, quelle que soit la version de Git que vous préférez. Obtenez-le… version de Git ?

La partie concernant l'intégration de Git dans VS Code est que cela fonctionne. La colonne de gauche qui apparaît lorsque vous cliquez sur l'icône Git est un indicateur visuel de l'état de votre dépôt. Vous pouvez cliquer sur les points de suspension (…) pour vérifier les commandes Git qui devraient normalement être saisies de manière très spécifique. Vous pouvez ajouter, valider, pousser et même modifier vos fichiers mis en scène et travailler sur différentes branches via le menu contextuel.

De plus, vous avez la possibilité d'ouvrir un terminal bash dans l'éditeur lui-même. Il y a un menu Terminal dans la barre de navigation, et celui à l'intérieur de VS Code est rapide, propre, fluide et assez utilisable sans avoir à le personnaliser. Vous pouvez diviser en plusieurs colonnes si nécessaire et garder différents répertoires ouverts dans différents terminaux que vous pouvez basculer entre via la liste déroulante.

Le terminal n'est pas non plus spécifique à Git. Cela fonctionne si bien avec la fonctionnalité qu'il m'a semblé naturel de l'inclure ici.

4. Console de débogage

La console de débogage est également l'une des fonctionnalités par défaut de VS Code qui la distingue des autres éditeurs de code. Au moment d'écrire ces lignes, 171 environnements de débogage sont disponibles à installer dans VS Code. Ils ne fournissent pas de décompte, mais je voulais savoir et j'ai pensé que vous le faisiez aussi, alors j'ai compté manuellement.

Dans les résultats, vous pouvez trouver des débogueurs pour tout ce qui est imaginable. JavaScript, CoffeeScript, Coffee, Java… tous les scripts de marque caféine, vraiment. Vous obtenez des environnements LUA et Python et Ruby, Docker, PHP, SASS, LESS et… tout. De tous les langages de programmation obscurs et/ou morts pour lesquels j'ai essayé de trouver un débogueur, QBasic était le seul qui n'a donné aucun résultat. Et personne ne l'a utilisé depuis très longtemps. Je pense vraiment que vous auriez du mal à trouver quelque chose d'usage moderne qui n'est pas disponible sur le marché des extensions.

5. Marché des extensions

Cela dit, un examen plus approfondi du marché des extensions vous donne une idée du type d'outils que vous pouvez attendre de la communauté de développement de l'éditeur. Vous pouvez voir dans la capture d'écran ci-dessus les millions d'installations de certaines extensions, et si vous ne savez pas par où commencer, le tri par installation ou par popularité peut être votre meilleur choix.

Vous pouvez trier et rechercher par mot-clé à l'aide du paramètre @sort . Mais vous pouvez également cliquer sur les points de suspension (2) pour une liste déroulante avec toutes vos options. Les options de gestion de vos propres extensions installées sont également disponibles ici.

Une fois que vous avez trouvé quelque chose que vous souhaitez installer, c'est très simple à faire. Cliquez sur le bouton vert Installer ,

Vous devrez ensuite recharger l'éditeur de code VS pour terminer l'installation.

C'est ça. Une fois cette opération terminée, votre extension est prête à être utilisée. Cependant, vous souhaiterez peut-être revenir occasionnellement à l'onglet Détails, car divers problèmes y sont traités, souvent par le biais de balises mises à jour et codées par couleur.

Pouvoir vérifier l'état de dépendance et de vulnérabilité est excellent, et vous pouvez voir tous les problèmes ouverts avec les extensions et combien de temps il faut généralement pour les résoudre. Toutes les extensions n'afficheront pas toutes les informations, mais quand elles le font, c'est incroyablement utile.

Raccourcis clavier et affectations de touches

La partie la plus importante d'un éditeur de code est peut-être les raccourcis clavier et les keymaps. Toutes les choses dont nous avons déjà parlé sont excellentes et font partie intégrante du succès de l'éditeur et du projet. Mais une fois que vous vous êtes habitué à un clavier et que vos doigts les utilisent via la mémoire musculaire, il est presque impossible de passer à un nouveau.

Au mieux, l'échange ralentira le calendrier de votre projet et réduira votre efficacité, et au pire, vos doigts maladroits commettent une injection catastrophique dans la base de code.

Peu importe d'où vous venez lorsque vous migrez vers VS Code, la communauté vous couvre. Que ce soit à partir de VIM, Emacs, Sublime Text ou même Notepad++, vous pouvez conserver les raccourcis et les keymaps auxquels vous êtes habitué. Vous pouvez soit rechercher sur le marché des extensions avec @recommended:keymaps, soit aller dans Fichier - Préférences - Keymaps pour afficher la liste des extensions disponibles.

Et si vous n'avez aucune préférence pour les raccourcis, c'est bien aussi. Si vous ressentez le besoin de personnaliser quoi que ce soit (ou si vous souhaitez simplement un aperçu des raccourcis clavier disponibles dans VS Code par défaut), vous pouvez accéder à Fichier - Préférences - Raccourcis clavier .

Divers Fonctionnalités à connaître

En tant qu'aperçu général, vous devriez être en mesure de voir à ce stade la plupart de ce que VS Code peut offrir en tant qu'éditeur de texte et de code. Cela dit, il y a une poignée de choses utiles que vous devriez savoir.

1. Le menu de sélection

C'est utile quel que soit votre niveau de développement, mais c'est particulièrement utile si vous débutez avec les éditeurs en général. Le menu Sélection a un certain nombre de fonctions que vous trouverez inestimables.

Plus précisément, il est agréable d'utiliser Ajouter des curseurs aux fins de ligne en un clic, et de pouvoir accéder au menu et sélectionner toutes les occurrences d'un mot, d'une phrase ou d'un extrait en surbrillance dans le fichier actuel. La plupart des éditeurs les ont comme raccourcis, mais tous ne les ont pas aussi facilement étiquetés ou disponibles que VS Code. C'était rafraîchissant de les voir si en avant car ce sont quelques-unes des commandes les plus précieuses et les plus importantes que vous utiliserez.

2. Le menu du terminal

Ce n'est pas parce que vous travaillez dans un éditeur de code que vous êtes un assistant de ligne de commande. En fait, vous avez peut-être regardé la ligne de commande et la section du terminal ci-dessus et pensé que vous ne l'utiliseriez jamais.

Mais jetez un œil au menu Terminal . Même si vous n'en faites pas beaucoup, vous verrez quelques commandes de base que vous pouvez exécuter à partir du menu qui pourraient vous aider un peu dans votre développement.

Le simple fait d'y accéder via un menu au lieu d'avoir besoin de connaître les commandes shell ouvre le terminal, le bash et la ligne de commande d'une manière que de nombreuses applications manquent. Ce sont de petites touches comme celles-ci qui rendent VS Code vraiment attrayant pour tout le monde, pas seulement pour les codeurs vétérans qui viennent de VIM ou d'Emacs.

3. Mode Zen

Dans le menu Affichage , vous trouverez un sous-menu appelé Apparence qui contient une option Basculer le mode Zen . Les autres options sous Afficher valent la peine d'être vérifiées et expérimentées, mais je souhaite attirer votre attention sur le mode Zen, car je pense que beaucoup de gens ne l'ont jamais essayé.

Différents éditeurs peuvent l'appeler par des noms différents, mais l'idée générale est que vous remplissez tout votre écran avec uniquement le document que vous êtes en train d'éditer. C'est différent d'un mode plein écran en ce sens que vous ne maximisez pas l'application, mais le document.

Il est difficile de présenter le mode avec une capture d'écran car il ne peut pas vraiment montrer que tout l' écran est couvert par l'éditeur de code VS. Même la barre des tâches Windows et le dock MacOS. Chaque pixel d'espace d'écran est pris par votre projet en cours afin que vous puissiez vous concentrer sur lui et rien d'autre.

Et si ce n'est pas pour vous, appuyez simplement sur ÉCHAP et vous revenez à votre ancienne vue.

Cela peut sembler peu, et j'étais sceptique. Mais après avoir utilisé une fonctionnalité similaire dans Scrivener pour écrire de la fiction, je suis un converti. Vous pouvez plus facilement entrer dans un état de flux et vraiment faire avancer les choses. Tant de félicitations à VS Code pour la mise en œuvre du mode Zen afin que nous puissions brancher nos écouteurs et travailler sans distraction quand nous le voulons (ou autant que nous le pouvons).

Emballer

Tout bien considéré, vous seriez négligent de ne pas télécharger Visual Studio Code et de l'essayer. Microsoft a publié ce qui pourrait être l'éditeur le plus stable, le plus pris en charge, le plus rapide et proportionnellement léger / riche en fonctionnalités. Nouveaux codeurs, développeurs chevronnés ou amateurs qui veulent trouver les bons outils… VS Code a été conçu pour vous. Ce n'est pas un exploit facile à réaliser, mais comme c'est le cas, VS Code vaut les bits et les octets sur votre disque dur. Et peut-être même un autre regard sur Microsoft si vous les aviez déjà radiés.

Quels sont vos aspects préférés de VS Code ? Avez-vous fait le changement?