What is the preferred state of the art setup for vim and TypeScript?

Viewed 887

The least sucky setup I have found after much trial and error is to use these plugins:

  • galooshi/vim-import-js (automatically add the import statements when using an exported variable for the first time in a file)
  • neoclide/coc.nvim (looks like it has the better plugins for TS support)
  • coc-tsserver (for typescript autocompletion)

and then my coc-settings.json:

{
  "coc.preferences.formatOnSaveFiletypes": [
    "css",
    "typescript",
    "javascript",
    "markdown",
    "scss",
    "json"
  ],
  "prettier.disableSuccessMessage": true,
  "tslint.autoFixOnSave": true
}

This setup is lacking though.

  • The TS autocompletion doesn't work well and it can't suggest types more or less automatically. I remember a colleague showing me on their VSCode how the editor suggests types for untyped variables and he just has to press his autocomplete key to use it. That would be nice.

  • I am getting most of the TS errors in my status line, but they can take a while to show in some cases: I would get the >> marker that shows there is an error, but having the actual error display in the status line can take 10 seconds.

  • When on a variable, pressing K only brings a moderately helpful partial type definition. I would much rather get the full definition so I know what arguments a particular function takes for instance.

  • Prettier is really not that great at formatting HTML files

  • When autocompleting variable names for automatic import, I only get a list with the names... but not which library they've been found in. There is quite a lot of overlap between ramda and rxjs for instance, so when I import something with autocomplete, I never really know which one I'm getting until I go back to the imports list and see whether it used the right one or not

I feel like my current setup is nowhere near as good as it could be and I'm struggling to find anything online for a setup that would cover it all. I'd like to know how others have their vim set up for a pleasant and smooth TS experience: I don't want to use VSCode just to make TS get out of the way.

1 Answers
  1. You don't need to use vim-import-js, coc-tsserver already support organize import: call CocAction('runCommand', 'editor.action.organizeImport')
  2. nmap <silent> gd <Plug>(coc-definition), gd will go to definition
  3. Try coc-prettier and coc-html for HTML files
Related