Le développement avec Typescript propose une solution d’intégration avec un grand nombre d’IDE (Eclipse, Atom, Visual Studio, etc.).
Pour l’administration système et pour le traitement de très gros fichiers texte, j’utilise VI ou VIM depuis très longtemps. Du coup, j’ai testé l’installation d’outil de coloration syntaxique et d’auto-complétion pour Typescript dans VIM.
Coloration syntaxique
En premier, il faut télécharger la coloration syntaxique depuis ce blog, dézipper le contenu pour copier le fichier typescript.vim dans le dossier des syntaxes de VIM soit dans mon cas : C:\Program Files (x86)\Vim\vimfiles\syntax\
Pour activer la reconnaissance de la syntaxe, il faut créer un fichier typescript.vim dans le dossier suivant: C:\Program Files (x86)\Vim\vimfiles\ftdetect\ contenant l’instruction d’association de l’extension .ts avec le type typescript:
au BufRead,BufNewFile *.ts set filetype=typescript
Installation d’un gestion de plugins dans VIM
Je ne me doutais pas que VIM avait des installateurs de plugins; habituellement je me contentais de copier des fichiers pour activer une fonctionnalité. Au final, on trouve des évolutions dans VIM de manière tout à fait similaire à tous les autres IDEs.
Donc j’ai installé le plugin gérant les plugins vim-plug.
Il faut copier le fichier plug.vim en provenance du site GitHub dans le dossier C:\Program Files (x86)\Vim\vim80\autoload\.
Pour activer l’installation d’un plugin il faut éditer le fichier C:\Program Files (x86)\Vim\_vimrc en ajoutant les lignes suivantes
call plug#begin('C:/Developpement/vim/plugged')
call plug#end()
Le dossier C:\Developpement\vim\plugged\ contiendra les plugins installés dans la suite.
Installation de Tsuquyomi en attente
Ce plugin permet de réaliser l’auto-complétion mais son installation suppose des pré-requis: les installations de Node.js, Typescript et Shougo/vimproc.vim.
Node.js
L’installation de node.js se fait assez simplement sous windows via le téléchargement de l’installeur windows via https://nodejs.org/en/download/.
Typescript
L’installation se fait tout aussi simplement pour Typescript via la commande suivante à exécuter dans le dossier où on veut avoir Typescript (dans mon cas dans c:\Developpement\typescript\)
npm install --prefix . -g typescript
Vimproc
L’installation de vimproc va s’appuyer sur le gestionnaire de plugin. Dans le fichier C:\Program Files (x86)\Vim\_vimrc il faut demander l’installation et la compilation de vimproc pour fabriquer la DLL vimproc.dll. L’ajout du Plugin se fait avec la ligne Plug à ajouter entre le plug#begin et le plug#end
call plug#begin('C:/Developpement/vim/plugged')
Plug 'Shougo/vimproc.vim', {'do' : 'mingw32-make'}
call plug#end()
Il faut disposer d’un compilateur gcc par exemple MinGw et indiquer dans la variable d’environnement PATH le chemin vers le dossier bin (dans mon cas C:\Developpement\MinGW\bin)
Ouvrir vim et taper la commande pour installer les plugins et la compilation via mingw32-make (qui est dans la variable d’environnement %PATH%) car c’est VIM qui va exécuter la commande de compilation.
:PlugInstall
Voici la fin de la compilation du nouveau plugin:
Installation de Tsuquyomi enfin
Il faut réouvrir le fichier C:\Program Files (x86)\Vim\_vimrc pour ajouter à la ligne d’installation de vimproc.vim une installation en plus de tsuquyomi:
call plug#begin('C:/Developpement/vim/plugged')
Plug 'Shougo/vimproc.vim', {'do' : 'mingw32-make'} | Plug 'Quramy/tsuquyomi'
call plug#end()
Un rappel de nouveau à la commande :PlugInstall pour installer le dernier plugin.
L’ajout du nouveau plugin se passe correctement mais à l’ouverture d’un fichier typescript test.ts…
Problème rencontré
La compilation a réalisé la création d’une dll vimproc_win64.dll, cette dernière est pour windows 7 x64 hors mon VIM est en version x32 d’où incompatibilité:
La compilation à la main via la commande suivante dans le dossier C:\Developpement\vim\plugged\vimproc.vim\ devrait fabriquer la dll correcte:
mingw32-make -f make_mingw32.mak
Cette commande fabrique correctement la dll dans le même dossier que la version x64:
C:\Developpement\vim\plugged\vimproc.vim\lib\winproc_win32.dll
Enfin
L’ouverture d’un fichier test.ts associé avec gvim avec la commande Control+x Control+o permet d’obtenir l’auto-complétion dans VIM selon typescript:
Il ne me reste qu’à rajouter dans le fichier C:\Program Files (x86)\Vim\_vimrc les derniers réglages pour avoir une complétion plus détaillé en ajoutant ces lignes:
let g:tsuquyomi_completion_detail = 1 autocmd FileType typescript setlocal completeopt+=menu,preview
Maintenant, je vais pouvoir commencer à utiliser angular.j version 2 qui se base sur typescript en utilisant ce bon vieux VIM qui rend encore énormément de service.
SourceMap
Comme on a le fichier typescript.ts qui est compilé en typescript.js, il peut être difficile dans les debuggers intégrés des navigateurs de trouver la correspondance entre le code .ts et l’exécution en javascript .js.
Bien entendu, les développeurs de typescript (et d’autres surcouche/framework javascript) on trouvé une solution qui est de réaliser une correspondance entre les 2 qui s’appelle SourceMap.
Pour utiliser la sourceMap, il faut en premier lieu l’activer dans le navigateur, par exemple. Dans Chrome, il faut ouvrir les outils de développement (CTRL+SHIFT+I) puis F1 pour avoir les préférences et on peut alors activer les sourcesMap:
Pour Firebug, l’intégration est en cours dans la version 3.0.
Pour Firefox, il semblerait que l’option est activé par défaut:
Au boulot…
