VS Code, c’est mieux

Kevin

Kevin


May 10th 2017 in code

Rappelez-vous, le 7 juillet 2015 nous vous parlions d’Atom : ce magnifique éditeur Open Source créé et maintenu par Github !
Et bien aujourd’hui, c'est au tour de Visual Studio Code - VS Code pour les intimes - une délicieuse surprise concoctée par Microsoft en avril 2016.

Cela fait maintenant un petit moment que j'entends parler de VS Code et l'idée de créer cet article m'est venue après plusieurs jours de travail sur ce dernier.
Je me suis d'ailleurs très vite pris au jeu et je me suis rapidement amusé à créer une nouvelle extension Highlight Bad Char. Elle permet d'afficher les caractères nuisibles — invisibles — qui font planter les compilateurs et/ou interpréteurs.

J’ai souvent été déçu par les outils Microsoft, pour ne citer que le dernier en date: Le remplacement de l’application Wunderlist par Microsoft To-Do.
— Anonyme engagé

Pour ne rien vous cacher, la première fois qu’on a entendu parler de l’éditeur de texte Made In Microsoft, on était un peu sceptique à l’agence. On se remémore tous nos expériences, plus ou moins fastidieuses, sur les logiciels Visual Studio. Si ça nous a bien appris une chose, c’est de ne plus trop miser sur des outils avec les mots Visual et Studio dans leur nom.

Mes a priori étaient forts - ma rancoeur également - mais, armé de tout mon courage, je me suis lancé dans l’aventure VS Code… et je me suis surpris à grandement l'apprécier.

Les avantages

Ma première attente pour justifier à mon sens l’usage de VS Code était la possibilité de customiser l’outil. Je partais du principe qu’un produit Microsoft ne puisse pas être modifié ou du moins pas comme Sublime Text ou Atom, n’est-ce pas ?

Bien heureusement je me suis trompé ! VS Code propose un Marketplace extrêmement riche ! On y trouve tous les équivalents des packages Atom ou Sublime Text (sans compter ceux intégrés nativement dans VS Code tel Emmet).

Outre l’aspect customisation bien pensé et agréable à utiliser grâce à son fichier de configuration (settings.json), la réelle plus-value de VS Code est sa performance !

Il est vraiment incroyable sur ce point ! Sachant qu’il repose sur les mêmes bases qu’Atom, Electron, c’est tout bonnement ahurissant.
Que ce soit IntelliSense, le système d'autocomplete/recherche, en passant par l’édition multiligne de très gros fichiers rien ne bronche.

Quels packages utilisons-nous ?

Must Have
Debugger for Chrome : Debug intégré avec le protocole Remote Chrome Debugger.
Atom Keymap : Port des keymap Atom.
One Dark Theme : Le thème One Dark.
Project Manager : Gestion des projets.
Path Intellisense : Autocomplete les chemins des fichiers.
Material Icon Theme : Stylise la treeview avec les icons Material.
EditorConfig for VS Code : Permet l’utilisation des fichiers editorconfig.
Highlight Bad Chars : Stylise visuellement les caractères spéciaux dans le code.
PHP DocBlocker : Intégration des commentaires DocBlocker pour les fichiers PHP.

Linter
Styelint : Intégration Styleint.
ESLint : Intégration ESLint.

Syntax Highlighting
Swig : Pour les fichiers Swig.
Twig Pack : Pour les fichiers Twig.
Apache Conf : Pour les fichiers de configuration Apache.
Gitignore : Pour les fichiers .gitignore.
Cucumber : Pour les fichiers Gerkin.

Tools & Snippet
Drupal Syntax Highlighting : Pour les fichiers spécifique Drupal.
WordPress Snippet : Des raccourcis pour le développement WordPress.
ACF-Snippet : Des raccourcis pour le développement WordPress et ACF.
Ionic2-snippets : Des raccourcis pour le développement Ionic2.

Bonus
PHP Intellisense - Crane : Autocomplete avancé pour PHP.
Settings Sync : Synchronise la configuration VS Code avec un repo Gist.
Color Highlight : Stylise visuellement les codes couleurs dans le code.
Copy Relative Path : Ajoute un menu contextuel pour copier les paths relatifs des fichiers.
Auto Close Tag : Ferme automatiquement les tags HTML/XML.
Align : Aligne le code pour le rendre lisible facilement.
Open in Github : Ajoute des commandes courants pour Github (blame, file, history, ...).

Les fonctionnalités manquantes

VS Code est vraiment un excellent éditeur de texte ! Il est mis à jour presque toutes les semaines et l'équipe de développement écoute sa communauté.
En continuant dans ce sens, son avenir ne peut qu’être glorieux.

Cependant voici la liste des points qui nous font regretter Sublime Text et/ou Atom pour le moment:

Coloriser l’état des fichiers/dossiers dans la treeview (selon l'index Git) https://github.com/Microsoft/vscode/issues/178.

Supporter le multidossier pour un même projet
https://github.com/alefragnani/vscode-project-manager/issues/46 et https://github.com/Microsoft/vscode/issues/396.

Permettre la personnalisation des raccourcis souris
https://github.com/Microsoft/vscode/issues/3130.

Utiliser la feature MacOS pour cacher la barre de titre et l'alignement au niveau des tabs (voir Chrome ou Atom)
https://github.com/Microsoft/vscode/issues/12377.

Coloriser les variables définie comme couleur Sass
Le module Colorize promet de l'intégrer prochainement et pourrait donc remplacer le module Color Highlight.
https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize.

N’hésitez pas à ajouter une réaction sur les issues qui vous semblent essentielles au projet, les développeurs les prennent en considération pour le Roadmap.

En conclusion

Après plusieurs jours d'essais, de configuration et de “fine tuning” intensif, je dois bien avouer que Microsoft a réalisé un excellent outil, et ce malgré les quelques manques évoqués ci-dessus.

Rapide, beau et agréable à utiliser - sans parler de sa communauté au taquet - VS Code à tout pour séduire n’importe quel type de développeurs.
Cependant, je ne pense pas troquer mon Atom tout de suite, aussi lent soit-il. En effet, les quelques fonctionnalités manquantes à VS Code sont, à mon avis, trop importantes aujourd'hui pour que je puisse pleinement l'utiliser sans impacter fortement mon workflow.
J'attends avec impatience que l'équipe de développement comble les points essentiels à une utilisation régulière et retournerais avec joie dessus pour lui donner une seconde chance et certainement l'adopter définitivement !

Je pense qu'avec plus de maturité VS Code est vraiment capable de faire la différence avec Atom. Et ainsi, démontrer que la technologie Electron permet de créer des programmes beaux (si certains en doutaient) mais également très performants.

Microsoft peut également accoucher d'outils formidables.
— Anonyme constructif

Si vous aussi vous êtes hyper enthousiaste par cet éditeur (ou pas), n'hésitez pas à commenter cet article.

Bonus

Visual Studio Code replacement icon
https://dribbble.com/shots/2436746-Visual-Studio-Code-replacement-icon

Notre fichier de configuration (settings.json) - + ,

Iteration Plan
L’équipe de VS Code est d’une transparence folle avec son développement, vous trouverez facilement les Roadmaps sur le repo Github.

Updates

28.04.2017 Atom est en train de travailler sur les performances de son éditeur de textes, comme en atteste cet article provenant de leur blog.
Va-t-on avoir le droit à des améliorations également sur les performances globales où uniquement sur le startup ? Seul l'avenir nous le dira.

*Cet article n'est en aucun cas sponsorisé par Microsoft. Nous sommes justes des développeurs qui écrivent des articles sur les tendances, nos outils ou simplement sur nos passions. =)