Mon utilisation de Visual Studio Code¶
À-propos…¶
À-propos de cette page¶
Cette page est là pour décrire rapidement l’utilisation que je fais quotidiennement du génial Visual Studio Code, un éditeur de texte multi-plateforme.
Note
Qu’est-ce qu’un éditeur de texte ?
« Un éditeur de texte est un logiciel destiné à la création et l’édition de fichiers textes. »
« Son usage est courant, voire incontournable pour certaines tâches informatiques de base comme l’administration de système et le développement de logiciels. »
Inutile de dire donc que je m’en sers constamment, principalement sous Linux (Ubuntu 15.10), et aussi sur Windows (7).
La page Wikipédia sur les éditeurs de textes contient une liste des plus populaires éditeurs de texte multi plates-formes. Sublime Text est évidemment dans la liste, accompagné de gedit, des deux légendaires Emacs et Vim, et de Komodo Edit notamment.
Cet article contient de rapides explications sur l’installation et l’utilisation de https://code.visualstudio.com/, ainsi qu’une liste des meilleurs plugins (aussi appelé greffon) que j’utilise avec VSCode, des liens vers mes fichiers de configurations, et des remarques générales.
Note
Licence ?
Cette page, et tous les fichiers liés, sont distribués librement, sous les termes de la licence GPLv3 ! (comme tout ce que je publie ou distribue sur ce site).
À-propos de Visual Studio Code¶
Le site officiel est code.VisualStudio.com. Mon article s’intéresse aux versions supérieures à 1.14 de Visual Studio Code.
Aperçu de Visual Studio Code avec ma configuration (septembre 2018).¶
Voir aussi
- Sublime Text 3
était mon éditeur favori depuis quelques années. Après 4 ans d’utilisation intensive de Sublime Text, je suis en train de l’abandonner pour passer à Visual Studio Code, et tel Edith Piaf, « non, je ne regrette rien »…
Qu’est-ce que Visual Studio Code ?¶
Visual Studio Code est un éditeur de texte et de code source, disponible sur de multiples plates-formes. Il est écrit en TypeScript et dispose d’une API en TypeScript ou en Javascript (avec nodejs). L’application est compilée en Javascript et empaquetée avec Electron.
Visual Studio Code est un logiciel complètement gratuit, multi-plateformes, produit par Microsoft, et dont le code source est distribué librement selon la licence MIT. Regardez sur GitHub : Microsoft/vscode.
Le logiciel distribué sur le site de téléchargement, quant à lui, l’est sous une licence privatrice malheuresement. Oui bon, en même temps, c’est un produit Microsoft, vous vous attendiez à quoi, une license GPL ?!
Visual Studio Code intègre la plupart des fonctionnalités de base d’un éditeur de texte, dont la coloration syntaxique personnalisable, l’auto-complétion, un système de plugins…
L’éditeur propose cependant des fonctions plus avancées, dont :
Minimap : prévisualisation de tout le fichier dans une barre latérale,
Sélection et édition dans plusieurs sections de code en parallèle (multi-curseur),
Marque-page au sein même des fichiers,
Sauvegarde automatique,
Recherche et remplacement par texte simple ou expressions régulières,
Support de greffons écrits en TypeScript ou Javascript,
Personnalisation des raccourcis clavier.
Note
VS Code est encore en développement actif, mais il marche déjà très bien !
Comment installer des greffons ?¶
Note
Greffon ?
Un greffon, ou plugin en anglais, est un composant supplémentaire qui complète un logiciel hôte pour lui apporter de nouvelles fonctionnalités.
VS Code est équipé d’un gestionnaire de paquets qui permet à l’utilisateur de trouver, installer, mettre à jour et supprimer des paquets additionnels !
Le gestionnaire de paquet est une fonctionnalité officielle de VS Code, contrairement à packagecontrol.io pour Sublime Text. Regardez un peu sur marketplace.visualstudio.com/vscode pour plus de détails.
Un gros avantage que je trouve à VS Code est qu’il est disponible en français (entièrement), et dans une douzaine d’autres langues. Cf. https://code.visualstudio.com/docs/getstarted/locales.
Plus de détails ailleurs !¶
Il y a une documentation officielle, très bien écrite (en anglais) : code.visualstudio.com/docs.
Voir aussi
Cette « super » liste (en anglais) donne de très bons conseils : github.com/viatsko/awesome-vscode.
Interlude humoristique¶
Mon utilisation de Visual Studio Code¶
Ma configuration¶
Mes fichiers de configurations, snippets et scripts de constructions, pour Visual Studio Code sont tous dans le dossier publis/VSCode.
Pour utiliser un de ces fichiers, il suffit de le copier dans votre dossier User/.
- État:
Maintenu activement (juillet 2017).
Config¶
Mes fichiers de configurations :
settings.json est le fichier de configuration principal.
Raccourcis clavier¶
Comme (presque) tout dans VS Code, il est facile de modifier ou d’ajouter des raccourcis clavier. Cela peut être fait globalement, ou projet par projet, ou langage par langage.
keybindings.json sont mes raccourcis clavier (ajoute notamment
ctrl+epour aller en fin de ligne ouctrl+maj+een début de ligne).
Snippets¶
Liste de mes snippets, dans ce dossier : snippets.
Scripts de construction¶
Avec VS Code (comme avec d’autres bons éditeurs de texte), il est possible de construire, exécuter ou compiler automatiquement et facilement vos fichiers. VS Code est livré avec des scripts de construction pour des tâches liées au développement Javascript (npm, bower etc), et il est facile d’en créer et d’en installer de nouveaux.
Liste de mes snippets, dans ce dossier : tasks.
Macro¶
Pas encore.
Interlude comique¶
Les meilleurs greffons ?¶
Tous ces greffons sont gratuits, libres et open-source, et ils sont tous installables facilement depuis le gestionnaire de paquet (Ctrl+Maj+X).
Pour chaque paquet cité ci-dessous, un lien vers sa page d’information sur marketplace.visualstudio.com/vscode est donné.
Note
Mon propre greffon ?
Pas encore.
Pour Sublime Text 3, j’ai écrit ce greffon, SwitchDictionary, disponible via PackageControl, cf. SwitchDictionary.
Petits greffons de personnalisation :
Paste and Indent : copie-colle avec l’indentation « qu’il faut ».
Power Mode : « your code is powerful, unleash it! Useless but fun! »
Select Line Status Bar : affiche le nombre de ligne sélectionnée dans la bar de statut.
Shortcuts : permet d’ajouter des raccourcis pratiques dans la barre de statut.
Sublime Text Keymap : permet d’utiliser directement les raccourcis clavier de Sublime Text.
Greffons ajoutant de super fonctionnalités :
Align : pour facilement aligner du texte sur plusieurs lignes.
Auto Close Tag : ferme automatiquement les tags HTML/XML, comme pour Sublime Text.
Bookmarks : marque des lignes et permet d’y revenir rapidement plus tard.
Color Highlight : surligne en couleur les codes couleurs dans l’éditeur, comme en RGB #ff00ff par exemple.
Calculate : évalue rapidement des expressions mathématiques sélectionnées et insert le résultat. Très pratique !
change-case : pour changer rapidement la casse de la sélection ou du mot courant (camelCase, CONSTANT_CASE, snake_case, etc).
Clipboard History : garde un historique des élements copiés et permet de re-coller depuis l’historique si besoin. Utile si vous n’utilisez pas déjà un gestionnaire de presse-papier. Moi j’utilise glipper.
Gremlins : affiche les caractères invisibles comme les espaces invisibles et les caractères de largeur nulle, pour les effacer rapidement.
Path Autocomplete fournit une complétion de chemin, très minuscule mais utile dans certaines situations comme insérer des liens vers d’autres pages (e.g. à SublimeText3).
All Autocomplete fournit la saisie semi-automatique des mots et des éléments en fonction de tous les éditeurs ouverts.
Trailing Spaces : affiche les espaces restant en fin de ligne, et permet de les supprimer rapidement !
VSCode Google Translate : permet de facilement traduire un morceau de texte sélectionné (ou des lignes) dans n’importe quelle language, avec Google Translate.
WakaTime : métriques, informations et temps mesuré automatiquement pour vos activités de programmation. J’aime bien Wakatime, j’en parle ici (wakatime.html).
Un meilleur support pour certains langages :
Bash Debug : permet le débogage de scripts bash (avec bashdb).
Python : évaluation de la qualité du code, débogage (y compris multi-microprocessus, applications web), Intellisense, auto-complétion, formatage de code, morceaux de code, tests unitaires, et plus, pour le langage Python.
MagicPython : meilleure coloration syntaxique pour tous les derniers ajouts au langage Python.
Python-autopep8 : applique autopep8 au fichier courant.
Git Blame : affiche des informations de
git blamedans la barre de statut.Git History (git log) : affiche le journal git, et l’historique pour un fichier ou une ligne précise.
gitignore : supporte les fichiers
.gitignore. Permet d’ajouter un fichier.gitignorefacilement depuis la collection https://github.com/github/gitignore.HTML Preview : affiche un aperçu automatiquement mis-à-jour pour les fichiers HTML.
HTML Snippets : tous les tags HTML, y compris pour HTML5.
JS-CSS-HTML Formatter : Formate (
prettifyetbeautify) pour Javascript, CSS, HTML en utilisant des raccourcis clavier ou le menu contextuel.Julia : support pour le langage Julia.
LaTeX Workshop : support très complet pour éditer des fichiers LaTeX efficacement avec aperçu, compilation, autocomplétion, coloration syntaxique, et plus.
C’est une extension que j’ai faite moi-même! Mais maintenant, à partir de 2019, cela ne sert à rien, car VSCode est livré avec un support intégré pour Makefiles. Makefiles Support For VSCode : est mon extension pour ajouter le support des fichiers GNU Makefile (pour l’instant très simple : juste la coloration et la détection, pas encore l’intégration dans le système de construction).
Make seems to be exactly offering what I had on Sublime Text and was using extensively: « Run any Makefile target with ease. Just run CMD-SHIFT-P and type make. You will be prompted for a target. » ! Mais je ne peux pas le faire fonctionner localement….
Make support and task provider marche un peu, et c’est la seule qui propose ce genre de fonctionnalités. Ce n’est pas parfait ! Mais c’est déjà ça…
Avertissement
J’ai aussi essayé, Makefile Command Runner et makeRunner le 08/02/2021, sans succès : les deux s’installent sans problème, mais ne font rien. Flemme d’aller signaler et aider à corriger ça, trop de boulot ces temps-ci.
Markdown All in One : tout ce qu’il faut pour éditer des fichiers Markdown (raccourcis clavier, table des matières, aperçu latéral etc).
minify : minifier les codes Javascript, CSS et HTML, depuis la palette ou en sauvegardant un fichier (optionnel).
OCaml : support très complet du langage OCaml pour Visual Studio Code. Ça marche vraiment très bien !
Ocaml tuareg-master : petite extension pour envoyer un bloc OCaml (terminé par
;;) dans un terminal ouvert.reStructuredText : permet d’éditer des fichiers reStructuredText (RST, ReST) avec un aperçu en temps réel précis !
Table Formatter : formate des tableaux écrits en texte avec la syntaxe Markdown, Textile et reStructuredText.
Greffons plus lourds, ou conçu pour un langage spécifique :
VSCode LTex (et sa documentation) : vérification de la grammaire avec LanguageTool : il fonctionne directement dans les fichiers LaTeX et Markdown mais peut être utilisé sur d’autres formats également. Je trouve ça incroyable, je viens de le découvrir (février 2021).
Readability Check pour vérifier la lisibilité (mais seulement en anglais).
Code Spellchecker : correcteur d’orthographe pour les commentaires et les noms de variables dans du code.
Color Picker : utilitaire pour sélectionner une couleur et insérer son code CSS.
Dash : accéder rapidement à la documentation locale via Dash.app ou Zeal.
:emojisense: : ajoute des suggestions et l’autocomplétion pour des emoji dans Markdown.
Gitmoji snippets : pareil dans les messages de commit pour Git.
Note
Purement subjective
Cette liste reflète simplement mon utilisation quotidienne de VSCode. Ces choix sont purement subjectifs. Par exemple, cette liste « awesome-vscode » présente aussi une liste de greffons utiles à avoir.
Un dernier conseil ?¶
Comme pour tout logiciel aussi puissant et technique, Visual Studio Code demande un léger temps d’adaptation, mais il est bien plus simple à prendre en main que d’autres éditeurs comme Emacs, Vi(m), ou même Atom ou Sublime Text. Merci à la traduction entièrement en français (et d’autres langues) de son interface et documentation !
Comment l’installer ?¶
Le site officiel code.visualstudio.com/Download permet de télécharger la dernière version de VSCode (une version pour OS X, Windows et Ubuntu sont disponibles).
Cette page explique en détails le processus d’installation de VSCode sur différentes plates-formes.
C’est facile, gratuit et rapide :) !