Oubliez tout le mal qu’on a pu dire de Microsoft. Depuis que Satya Nadella a pris la tête de l’entreprise, Microsoft a entamé un véritable virage à 180° en direction des communautés open source, à tel point qu’ils fournissent aujourd’hui des outils parmi les plus agréables à utiliser totalement gratuitement.
Dans ce tutoriel, vous apprendrez à configurer Visual Code Studio pour le développement d’un projet Angular.
Installer Visual Code Studio
L’installer de Visual Studio Code est disponible gratuitement pour Windows, OSX et les distributions Linux. Vous pourrez le télécharger à l’adresse suivante : https://code.visualstudio.com
Installer les extensions
Visual Code Studio seul est un IDE comme il en existe des dizaines. Mais sa grande force réside dans le nombre vraiment impressionnant d’extensions disponibles et qui permettent de personnaliser votre expérience utilisateur, a fortiori quand on est un développeur Angular.
Pour entrer dans la section de gestion des extensions, utilisez le raccourci clavier ⇧ Ctrl X (⇧ Cmd X sous OsX).
La communauté Angular étant peuplée d’esprits brillants, John Papa a créé un pack qui compile les extensions les plus utiles. Pour l’installer, recherchez l’extension Angular Essentials par johnpapa.
Une autre méthode pour installer ce pack est d’utiliser le bandeau d’ouverture rapide via Ctrl P ( Cmd P sous OsX ) puis d’entrer la commande suivante :
ext install angular-essentials
Rechargez Visual Studio code et vos extensions installées sont maintenant :
Angular v4 Snippets : Des « bouts de code » ( snipets ) Angular qui sont conformes aux bonnes pratiques du Typescript, des templates et de RxJS.
Angular Language Service : Cette extension créée par les membres de l’équipe officielle de Angular apporte des aides dans l’interface pendant l’édition de vos fichiers templates.
Editor Config : Des réglages préinstallés pour Visual Code Studio. Si les pros l’utilisent, ce n’est pas pour rien. Faites leur confiance.
tslint : Le lintage est un ensemble de conventions d’écriture du code (Où met-on les espaces ? Les noms des variables sont-ils redondants ?). Respecter les conventions proposées par le lintage officiel c’est réduire de nombreuses ambiguïtés dans le code qui pourraient nuire à la compilation. Attention : tslint doit être installé sur votre système pour que cette extension fonctionne.
Chrome Debugger : Permet d’afficher la console de développeur de Chrome directement dans Visual Code Studio.
Bracket Pair Colorizer : Cette extension détecte les paires de parenthèses et de curly ( { } ) et les colore pour identifier visuellement où commence un bloc et où il finit.
Path Intellisense : Grâce à cette extension, Visual Studio Code complètera automatiquement vos noms de répertoire et de fichiers.
Angular Inline : L’extension de langage Visual Studio Code pour javascript et typescript. Indispensable.
Angular Material Theme : Les icônes de fichiers et de répertoire qui identifient visuellement la nature de chaque fichier utilisé par Angular (et il y en a beaucoup…).
Puisque l’objet de ce tutoriel est de vous accompagner dans l’installation des extensions essentielles au développement Angular, je ne vous en propose pas d’autres, mais sachez qu’il existe probablement déjà une extension pour chaque problème que vous rencontrez. N’hésitez pas à explorer le site https://marketplace.visualstudio.com/VSCode qui est à Visual Code Studio ce que l’AppStore est à iOS.
Une petite remarque toutefois : il existe parfois des incompatibilités entre certaines extensions. Assurez-vous de les installer et de les tester une par une sous peine de rendre votre Visual Code Studio totalement inutilisable.
Préférences
Pour parfaire votre installation, il ne vous reste plus qu’à faire un tour dans les préférences en utilisant le raccourci Ctrl , ( Cmd , sous OsX ).
L’éditeur de préférence se divise en deux colonnes. A gauche : les réglages par défaut. A droite, vos réglages pour le projet courant. Pour modifier un réglage, survolez-le et cliquez sur l’icône crayon qui s’affiche à sa gauche. Si une liste fermée d’options est possible, Visual Code Studio vous la proposera. Cliquez sur votre choix : il est directement inscrit dans la colonne de droite avec la valeur choisie.
A minima, je vous recommande les réglages suivants :
{
"typescript.check.tscVersion": false,
"window.zoomLevel": -1,
"workbench.iconTheme": "material-icon-theme",
"editor.renderControlCharacters": true,
"editor.tabSize": 4,
"editor.renderWhitespace": "all",
"tslint.configFile": "tslint.json"
}
Trackbacks / Pingbacks