In this article I will describe how to use Vim ALE for Typescript development. As well I will give a little bit background why I think you might consider this solution vs other solutions from the Vim’s world.
I recommend installing
deoplete.nvim as well
(while I believe you can use ALE without deoplete). The best part
here is that you don’t need to install anything else because ALE
tsserver. All you need to do now is to bind commands to
something you want. I use following mappings:
nmap <silent> <leader>aj :ALENext<cr> nmap <silent> <leader>ak :ALEPrevious<cr>
,ak in my case jumps to next/previous
info/warning/error message in file.
files. I mapped this by file type because
c-] is used for
navigation using tags in other situations in Vim.
nnoremap K :ALEHover<CR>
ALEHover command show information about word under cursor (e.g.
nnoremap <silent> gr :ALEFindReferences<CR>
gr when you want to find locations where your function is
nnoremap <leader>rn :ALERename<CR>
If you need to rename something in a smart way use this command.
nnoremap <leader>qf :ALECodeAction<CR> vnoremap <leader>qf :ALECodeAction<CR>
Lastly you can use code actions. Let’s say you are missing import
and there is error showing that. You can use
,qf in normal mode
to import missing library. As well you can select some text in
visual mode and extract your code to function or method. Actually
tsserver supports more code actions.
Disclaimer: I have implemented code actions in ALE so you can complain to me if something is not working as intended 😅.
That’s the main features for Typescript development but there are more.
Most probably you use
eslint in your projects.
ALE will lint your files using those tools if it will manage to
find them (again nothing to install). Potentially you want to fix
some of your files as well with those tools. You can do it in this
As well enable fix on save:
let g:ale_fix_on_save = 1
And there are more. ALE support auto-import on completion. I don’t find this feature useful as it sometimes import random libraries I don’t want to but you can enable it like this:
let g:ale_completion_autoimport = 1
You can change sign symbols as well. E.g.:
let g:ale_sign_error = "🐛" let g:ale_sign_warning = "⚠️" let g:ale_sign_info = "ℹ"
Neovim users might want to enable virtual text (at least I found it practical):
let g:ale_virtualtext_cursor = 1 let g:ale_virtualtext_prefix = "🔥 "
I have tried out other Typescript tools for Vim as well so let’s review them again.
It slows down Vim sometimes. Switching tabs took more than 1 second while working in large projects. I have no idea why it happens but it does.
You have to take extra steps when you use
IMHO importing VS Code extensions to Vim make Vim poorer as ecosystem. While tools in CoC ecosystem are good but in some situations they actually make you poorer. E.g.
coc-wordgives you auto-complete for 10k most popular words what is good but combine deoplete with ujihisa/neco-look, install write-good (it works out-of-the-box with ALE) and you have much better tools.
There is at least one thing you might be missing from CoC if you
decide to migrate to ALE. CoC fixes imports in Typescript files
after file rename. It does this by using
watchman and by using
getEditsForFileRename. This can be implemented
in ALE as well as code edits part is available already. While I
think that’s not the only way how file rename handling can be
LSP (as vs
tsserver) is another way how to use Typescript with
Vim. There are a lot of LSP client implementations for Vim and
Neovim has native LSP support (I have written about it
here). The main
problem with LSPs is that tsserver does not support LSP natively
(and it does not seem that they want to do it
you have to use
what is wrapper around tsserver and you end-up adding yet another
server into your configuration. As well you now have problem with
fnm (like with CoC).
While I believe that LSP might be the future one day. That actually might be faster than expected.
is yet another
tsserver implementation for Vim. Initially it
looked very promising but at some time author managed to brake it
somehow (at least for me) and I had to look for different
tool. As of today ALE has better
nvim-typescript for tsserver.